<ng-container *transloco="let t; prefix: 'cover-image-chooser'">
  <div class="container-fluid" style="padding-left: 0; padding-right: 0">
    <app-file-drag-and-drop-upload
      (dropped)="dropped($event)"
      (urlSubmitted)="loadImage($event)"
      [showUrlUpload]="true"
      [acceptableExtensions]="acceptableExtensions"
      [uploadText]="t('upload-continued')"
    />

    <div class="row g-0 chooser" style="padding-top: 0.625rem">
      @if (showReset()) {
        <div class="clickable col-auto" tabindex="0" (click)="reset()"
             [class.selected]="!showApplyButton() && selectedIndex() === -1">
          <app-image class="card-img-top" [title]="t('reset-cover-tooltip')" height="232.91px" width="160px" [imageUrl]="imageService.resetCoverImage" />
          @if (showApplyButton()) {
            <br>
            <button style="width: 100%;" class="btn btn-secondary" (click)="resetImage()">{{t('reset')}}</button>
          }
        </div>
      }

      @for (url of imageUrls(); track url; let idx = $index) {
        <div class="clickable col-auto" tabindex="0" [attr.aria-label]="t('image-num', {num: idx + 1})" (click)="selectImage(idx)"
             [class.selected]="!showApplyButton() && selectedIndex() === idx">
          <app-image class="card-img-top" height="232.91px" width="160px" [imageUrl]="url" [processEvents]="idx > 0" />
          @if (showApplyButton()) {
            <br>
            <button class="btn btn-primary w-100" (click)="applyImage(idx)">
              {{appliedIndex() === idx ? t('applied') : t('apply')}}
            </button>
          }
        </div>
      }
    </div>
  </div>
</ng-container>
