@if (loading().isLoading) {
  <app-loading message="Téléchargement du CV" />
} @else {
  <ng-container *ngTemplateOutlet="cvForm" />
}

<ng-template #cvForm>
  <div class="space-y-4 max-w-md mx-auto">
    <!-- Zone de sélection/affichage du fichier -->
    <div
      class="flex flex-col sm:flex-row sm:space-x-4 space-y-4 sm:space-y-0 items-center justify-center"
    >
      <!-- Aperçu du fichier sélectionné -->
      @if (file(); as file) {
        <div
          class="flex flex-col space-y-2 items-center p-4 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-800"
        >
          <div class="relative">
            <img src="assets/images/pdf.svg" alt="PDF" class="w-16 h-16" />
            <button
              type="button"
              (click)="fileManagerService.removeFile()"
              class="absolute -top-2 -right-2 p-1 bg-red-600 hover:bg-red-700 rounded-full text-white transition-colors"
              aria-label="Supprimer le fichier"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                class="w-4 h-4"
              >
                <path
                  fill-rule="evenodd"
                  d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
                  clip-rule="evenodd"
                />
              </svg>
            </button>
          </div>
          <span
            class="text-sm text-gray-700 dark:text-gray-300 text-center break-all max-w-[200px]"
          >
            {{ file.name }}
          </span>
          <span class="text-xs text-gray-500 dark:text-gray-400">
            {{ fileManagerService.formatFileSize(file.size) }}
          </span>
        </div>
      }

      <!-- Bouton de sélection -->
      <label
        for="uploadFile1"
        class="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-2 bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg cursor-pointer transition-colors w-full sm:w-auto"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-white" viewBox="0 0 32 32">
          <path
            d="M23.75 11.044a7.99 7.99 0 0 0-15.5-.009A8 8 0 0 0 9 27h3a1 1 0 0 0 0-2H9a6 6 0 0 1-.035-12 1.038 1.038 0 0 0 1.1-.854 5.991 5.991 0 0 1 11.862 0A1.08 1.08 0 0 0 23 13a6 6 0 0 1 0 12h-3a1 1 0 0 0 0 2h3a8 8 0 0 0 .75-15.956z"
          />
          <path
            d="M20.293 19.707a1 1 0 0 0 1.414-1.414l-5-5a1 1 0 0 0-1.414 0l-5 5a1 1 0 0 0 1.414 1.414L15 16.414V29a1 1 0 0 0 2 0V16.414z"
          />
        </svg>
        <span class="text-sm text-center">
          {{ file() != null ? 'Changer le fichier' : 'Sélectionner un fichier PDF' }}
        </span>
        <input
          type="file"
          id="uploadFile1"
          class="hidden"
          accept="application/pdf"
          (change)="fileManagerService.onFileChange($event)"
        />
      </label>
    </div>

    <!-- Message d'erreur -->
    @if (fileError()) {
      <div
        class="flex items-start space-x-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5"
        >
          <path
            fill-rule="evenodd"
            d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
            clip-rule="evenodd"
          />
        </svg>
        <p class="text-sm text-red-800 dark:text-red-200">{{ fileError() }}</p>
      </div>
    }

    <!-- Information sur la taille maximale -->
    <p class="text-xs text-gray-500 dark:text-gray-400 text-center">
      Format accepté : PDF | Taille maximale : 5 Mo
    </p>

    <!-- Bouton de soumission -->
    @if (file() != null && !fileError()) {
      <button
        type="button"
        (click)="onSubmit()"
        [disabled]="!canSubmit"
        class="w-full px-6 py-3 bg-purple-600 hover:bg-purple-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors"
      >
        Mettre à jour mon CV
      </button>
    }
  </div>
</ng-template>
