<ng-container *transloco="let t; prefix: 'file-drag-and-drop-upload'">
  <ngx-file-drop
    (onFileDrop)="dropped.emit($event)"
    [accept]="acceptableExtensions()"
    [directory]="directory()"
    dropZoneClassName="file-upload"
    contentClassName="file-upload-zone">

    <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">

      @switch (uploadMode()) {
        @case (UploadMode.Url) {
          <div class="row g-0 mt-3 pb-3 px-3 w-100 align-items-center">
            <div class="input-group col">
              <label class="input-group-text" for="load-url">{{t('url-label')}}</label>
              <input type="text" [formControl]="urlControl" autofocus autocomplete="off"
                     class="form-control" placeholder="https://" id="load-url"
                     (keyup.enter)="handleUrlUpload()">
              <button class="btn btn-outline-secondary" type="button"
                      (click)="handleUrlUpload()"
                      [disabled]="urlControl.invalid">
                {{t('load')}}
              </button>
            </div>
            <div class="col-auto ms-2">
              <button class="btn btn-secondary" (click)="setMode(showUrlUpload() ? UploadMode.All : UploadMode.Files)">
                <i class="fas fa-share" aria-hidden="true" style="transform: rotateY(180deg)"></i>
                <span class="phone-hidden ms-1">{{t('back')}}</span>
              </button>
            </div>
          </div>
        }
        @default {
          <div class="row g-0 mt-3 pb-3">
            <div class="mx-auto text-center">
              <div class="mb-3">
                <i class="fa fa-file-upload" style="font-size: 1.5rem;" aria-hidden="true"></i>
              </div>

              <div class="d-flex justify-content-center align-items-center gap-1">
                @if (showUrlUpload()) {
                  <a href="javascript:void(0)" (click)="setMode(UploadMode.Url)">
                    <span class="phone-hidden">{{t('enter-an-url-pre-title', {url: urlText() ?? t('url')})}}</span>
                  </a>
                  <span class="text-muted dot-separator"></span>
                }

                <span>{{t('drag-n-drop')}}</span>
                <span class="text-muted dot-separator"></span>

                <a href="javascript:void(0)" (click)="openFileSelector()">
                  {{t('upload')}}
                  <span class="phone-hidden">
                    @if (uploadText(); as text) { {{text}} }
                  </span>
                </a>
              </div>
            </div>
          </div>
        }
      }
    </ng-template>
  </ngx-file-drop>
</ng-container>
