{{define "booking_documents"}}
<div>
    <p class="text-sm font-medium text-gray-500 my-4">Documents</p>
    {{if eq (len .ViewState.documents) 0}}
    <p class="p-12 text-gray-500 text-center text-md">Aucun document</p>
    {{end}}


    {{if gt (len .ViewState.documents) 0}}

    <div class="-mx-4 mb-10 ring-1 ring-gray-300 sm:-mx-6 md:mx-0 md:rounded-lg">
        <table class="min-w-full divide-y divide-gray-300 table-fixed">
        <thead>
            <tr>
            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Type</th>
            <th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell">Nom du document</th>
            <th scope="col" class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell">Ajout&eacute; le</th>
            <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
                <span class="sr-only">Actions</span>
            </th>
            </tr>
        </thead>
        <tbody>
            {{range .ViewState.documents}}
            <tr>
            <td class="relative py-4 pl-4 sm:pl-6 pr-3 text-sm">
                <div class="font-medium text-gray-900">
                    <span class="bg-co-blue text-xs text-white rounded-xl p-1 mr-2">{{index $.ViewState.file_types_map .Metadata.Type}}</span>
                </div>
            </td>
            <td class="px-3 py-3.5 text-sm text-gray-900 table-cell max-w-10 overflow-hidden">
                <p class=" overflow-hidden">{{.Metadata.Name}}</p>
            </td>
            <td class="px-3 py-3.5 text-sm text-gray-500 lg:table-cell">{{.LastModified.Format "02/01/2006"}}</td>
            <td class="relative py-3.5 pl-3 pr-4 sm:pr-6 text-right text-sm font-medium">
                <a href="/app/vehicles/bookings/{{$.ViewState.booking.ID}}/documents/{{.FileName}}" target="_blank">
                <button type="button" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-30">Voir<span class="sr-only"> le document</span></button>
                </a>
            </td>
            </tr>
            {{end}}


            <!-- More plans... -->
        </tbody>
        </table>
    </div>

    {{end}}
</div>
{{end}}