<div class=" p-4">
    <div class="max-w-full mx-auto bg-white rounded-lg">
        <!-- Header -->
        <div class="text-black p-4 rounded-t-lg flex justify-between items-center">
            <h1 class="text-lg font-semibold">{{ $company }} (SN={{ $serverKey }}):: MAINVAR.inc</h1>
            <button wire:click="downloadAllFile" class="bg-info hover:info-focus text-white font-bold py-2 px-4 rounded">
                Download
            </button>
        </div>

        <div class="overflow-x-auto p-4">
           <table aria-describedby="mydesc"  class="is-hoverable table w-full text-left border-b">
                <thead>
                    <tr>
                        <th scope="col" 
                            class="whitespace-nowrap rounded-tl-md bg-slate-300 px-4 py-1 font-semibold uppercase text-black  dark:bg-navy-800 dark:text-navy-100 lg:px-5">
                            #
                        </th>
                        <th scope="col" 
                            class="whitespace-nowrap bg-slate-300 px-2 py-1 font-semibold uppercase text-black  dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                            File Name
                        </th>
                        <th scope="col" 
                            class="whitespace-nowrap rounded-tr-md bg-slate-300 px-2 py-1 font-semibold uppercase text-black  dark:bg-navy-800 dark:text-navy-100 lg:px-2">
                            Action
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @if (count($fileNameList) > 0)
                        @foreach ($fileNameList as $key => $file)
                            <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
                                <td class="py-2 px-4 border w-32">
                                    {{ $key + 1 }}
                                </td>
                                <td class="py-2 px-4 border w-32">
                                   {{ $file }}
                                </td>

                                <td class="whitespace-nowrap px-1 py-1 sm:px-2">
                                    <div class="flex justify-center space-x-2">
                                        <a
                                            class="btn h-8 w-8 p-0  hover:text-main-container active:text-main-container hover:primary-focus focus:primary-focus active:bg-info/25">
                                            <i aria-hidden="true" class="fa fa-download"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    @endif
                </tbody>
        </div>
    </div>
</div>
