@if (loading().action === ActionType.UPDATE && loading().isLoading && onSubmitted()) {
  <app-loading message="Mise à jour de la photo de profile..." />
} @else {
  <ng-container *ngTemplateOutlet="content" />
}

<ng-template #content>
  @if (user !== undefined) {
    <div
      class="w-40 h-40 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400"
    >
      @if (imagePreviewUrl !== null) {
        <img
          alt="{{ user!.username }}"
          class="object-cover object-center h-full w-full rounded-full"
          [src]="imagePreviewUrl"
          loading="lazy"
        />
      } @else if (user.avatar) {
        <img
          alt="{{ user!.username }}"
          class="object-cover object-center h-full w-full rounded-full"
          src="{{ environment.baseUrl }}/api/files/users/{{ user.id }}/{{ user.avatar }}"
          loading="lazy"
        />
      } @else {
        <img
          alt="{{ user!.username }}"
          class="object-cover object-center h-full w-full rounded-full"
          src="https://api.dicebear.com/9.x/adventurer/svg?seed={{ user.username }}"
          loading="lazy"
        />
      }
    </div>
  }

  <label
    for="uploadFile1"
    class="flex bg-gray-800 hover:bg-gray-700 text-white text-base px-5 py-3 outline-none rounded w-max cursor-pointer mx-auto font-[sans-serif]"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="w-4 h-4 mr-2 fill-white inline"
      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"
        data-original="#000000"
      />
      <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"
        data-original="#000000"
      />
    </svg>
    <small class="text-xs">Selectionner une image</small>
    <input
      type="file"
      id="uploadFile1"
      class="hidden"
      accept="image/*"
      (change)="onPictureChange($event)"
    />
  </label>

  @if (file !== null || imagePreviewUrl !== null) {
    <button
      type="button"
      [ngClass]="{ 'bg-purple-600': file !== null || imagePreviewUrl !== null }"
      class="!mt-2 px-6 py-2 w-full bg-[#333] hover:bg-[#444] text-sm text-white mx-auto block"
      (click)="onUserAvatarFormSubmit()"
    >
      Mettre à jour ma photo de profile
    </button>
  }
</ng-template>