{{define "beneficiary_files"}}
<div class="px-4 py-6 sm:px-6"
x-data="{
    fields: {
        name: null,
        type: null,
        file: null,
    },
    rules: {
        name: ['required'],
        type: ['required'],
        file: ['required'],
    },
    formValidation: {
        valid: false,
        fields: {
            name: {valid: null},
            type: {valid: null},
            file: {valid: null},
        }
    },
    isFormValid: true,
    validate() {
        this.formValidation = Iodine.assert(this.fields, this.rules)
    },
    validateField(field) {
        this.formValidation.fields[field] = Iodine.assert(this.fields[field], this.rules[field])
    },
    submit(event) {
        this.validate()
        if(!this.formValidation.valid) {
            this.isFormValid = false
            event.preventDefault()
        }
        return this.formValidation.valid
    }
}">
    {{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">
          <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é 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 lg:table-cell">{{.Metadata.Name}}</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/beneficiaries/{{$.ViewState.beneficiary.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}}

    <h3 class="text-lg">Ajouter un document</h3>
    <form method="POST" action="/app/beneficiaries/e7616eac-4a87-4396-a505-23e0421b9c4c/documents"  @submit="submit"  enctype="multipart/form-data">
        <div class="md:grid md:grid-cols-6 p-2">
            <div class="sm:col-span-2">
                <label for="type" class="block text-sm font-medium text-gray-700">Type</label>
                <select id="type" name="type" class="mt-1 block w-full rounded-l-2xl border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
                    x-model="fields.type" @blur="validateField('type')"
                    :class="formValidation.fields.type.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
                    <option value="" selected>Sélectionner un type</option>
                    {{range .ViewState.beneficiaries_file_types}}
                    <option value="{{.}}">{{index $.ViewState.file_types_map .}}</option>
                    {{end}}
                </select>
              </div>
              <div class="sm:col-span-4">
                <label for="name" class="block text-sm font-medium text-gray-700">Nom</label>
                      <input type="text" name="name" id="name"
                          placeholder="Nom du fichier"
                          class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm  rounded-r-2xl"
                          x-model="fields.name" @blur="validateField('name')"
                          :class="formValidation.fields.name.valid == false ? 'border-co-red border-2' : 'border-gray-300'" />
              </div>
              <div class="sm:col-span-6 mt-4">
                <label for="cover-photo" class="block text-sm font-medium text-gray-700">Téléchargement</label>
                <div class="mt-1 flex justify-center rounded-md border-2 border-dashed px-6 pt-5 pb-6"
                x-on:drop="console.log('toto')"
                :class="formValidation.fields.file.valid == false ? 'border-co-red border-2' : 'border-gray-300'">
                  <div class="space-y-1 text-center">
                    {{.IconSet.Icon "hero:outline/folder-plus" "mx-auto h-12 w-12 text-gray-400"}}
                    <div class="flex text-sm text-gray-600">
                      <label for="file-upload" class="relative cursor-pointer rounded-md bg-white font-medium text-co-blue focus-within:outline-none focus-within:ring-2 focus-within:ring-co-blue focus-within:ring-offset-2 hover:text-co-blue">
                        <span>Sélectionnez un fichier </span>
                        <input id="file-upload" name="file-upload" type="file" class="sr-only"
                        x-model="fields.file" @blur="validateField('file')">
                      </label>
                      <!-- <p class="pl-1">ou glissez-déposez</p>  -->

                        
                    </div>
                    <p class="text-xs text-gray-500">Jusqu'à 10MB</p>
                    <p class="text-co-blue p-2" x-text="fields.file" x-if="fields.file"></p>
                  </div>
                </div>
              </div>
        </div>
        <button type="submit"
            class="rounded-2xl border border-transparent bg-co-blue px-4 py-2 my-4 mt-8 w-full text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
            Ajouter le document
        </button>
    </form>

</div>
{{end}}