<?php

$data = [
    'files' => ___salesloo('files')
];
?>

<div x-data="<?php echo salesloo_make_json($data); ?>">
    <div class="text-secondary">
        <div class="flex items-center mb-5 space-y-5 sm:space-y-0">
            <div class="w-full sm:w-2/6">
                <div class="flex items-center text-secondary">
                    <div class="mr-2 relative">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                        </svg>
                    </div>
                    <h2 class="font-semibold text-lg mr-auto"><?php _e('Download', 'salesloo'); ?></h2>
                </div>
            </div>
        </div>
        <div class="bg-secondary rounded-lg shadow-sm">
            <?php foreach ((array)___salesloo('files') as $file) : ?>
                <div class="px-5">
                    <div class="py-5 rounded-lg duration-500 border-b border-gray-100">
                        <div class="flex justify-center items-center flex-col sm:flex-row">
                            <div class="w-1/2">
                                <div class="mt-1 text-base text-secondary font-bold"><?php echo $file['name']; ?></div>
                            </div>
                            <div class="flex-grow">
                                <div class="flex items-center justify-end w-full text-base">
                                    <div class="w-full">
                                        <div class="flex items-center justify-end w-full">
                                            <a target="__blank" href="<?php echo $file['link']; ?>" class="py-2 px-4 rounded-lg m-1 hover:opacity-75 bg-blue-800 border border-blue-800 text-white">
                                                <?php _e('Download', 'salesloo'); ?>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>