<h2 class="form-title">
  <my-global-icon iconName="upload"></my-global-icon>

  <ng-container i18n>Replace file</ng-container>
</h2>

@if (getUnavailability()) {
  <my-alert type="primary" i18n>{{ getUnavailability() }}</my-alert>
} @else {
  <form class="root" myDragDrop (fileDropped)="onFileDropped($event)" id="video-manage-form">
    @if (videoEdit.getVideoSource()) {
      <div class="current-filename">
        <div class="fs-7" i18n>Current uploaded file:</div>
        <strong class="fs-5">{{ videoEdit.getVideoSource().inputFilename }}</strong>
      </div>
    }

    <div class="mt-3">
      <div class="muted-1">
        <strong>Drag and drop your new video file here</strong> or click on the button below to replace your video:
      </div>

      <div class="muted-2 fs-7">
        <div i18n class="form-group-description">⚠️ Uploading a new version of your video will completely erase the current version</div>
      </div>

      <div class="d-flex flex-wrap mt-4 justify-content-center gap-3">
        <my-reactive-file #reactiveFileInput class="d-inline-block me-3" inputName="videoFile" i18n-inputLabel
          inputLabel="Upload" (fileChanged)="onFileChanged($event)" [extensions]="getVideoExtensions()"
          [displayFilename]="true" [displayReset]="false" placement="right" theme="secondary" icon="upload">
        </my-reactive-file>
      </div>
    </div>
  </form>
}
