<div class="flex flex-col divide-y space-y-4 m-2">
    <div id="edit" class="flex flex-col md:flex-row gap-2">
        <div class="flex flex-col md:w-1/3">
            <div class="text-xl font-bold ">
                {{ __('RDS File') }}
            </div>
            <div class="text-gray-500 text-md">
                {{__('Download the RDS file for this project')}}
            </div>
        </div>
        <div class="md:w-2/3">
            <button wire:click="downloadRds" class="inline-flex items-center rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" >Download RDS</button>
        </div>
    </div>
    <div
         class="flex flex-col md:flex-row">
        <div class="flex flex-col my-4 md:w-1/3">
            <span class="text-xl font-bold dark:text-gray-300">{{__('Download Tifs')}}</span>
            <div class="text-gray-500 text-md">
                {{ __('Create a zip file with satelite images for a given time series') }}
            </div>
        </div>
        <div id="mail" class="flex flex-col md:w-2/3" > {{-- flex col--}}
            <div class="flex justify-between my-4">
                <div class="inline-flex items-center gap-2">
                    <div class=" text-md font-bold">
            <button x-on:click="$wire.showDownloadTifsModal = true" class="inline-flex items-center rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" >Download tifs</button>
                    </div>
                </div>
            </div>
            <div class="flex w-full "></div>
        </div>
    </div>
    <div
        class="flex flex-col md:flex-row">
        <div class="flex flex-col my-4 md:w-1/3">
            <span class="text-xl font-bold dark:text-gray-300">{{__('Download Mosaics')}}</span>
            <div class="text-gray-500 text-md">
                {{ __('Create a zip file with mosaic images for a given time series') }}
            </div>
        </div>
        <div id="mail" class="flex flex-col md:w-2/3" > {{-- flex col--}}
            <div class="flex justify-between my-4">
                <div class="inline-flex items-center gap-2">
                    <div class=" text-md font-bold">
                        <button x-on:click="$wire.showDownloadMosaicsModal = true" class="inline-flex items-center rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" >Download Mosaics</button>
                    </div>
                </div>
            </div>
            <div class="flex w-full "></div>
        </div>
    </div>
    <div class="flex justify-end items-center py-4"></div>
    <x-download-mosaics-as-zip-modal :formData="$formData"></x-download-mosaics-as-zip-modal>
    <x-download-tifs-as-zip-modal :formData="$formData"></x-download-tifs-as-zip-modal>
</div>
