<h4 mat-dialog-title>
  {{file.title}}
  <div class="favorite-button">
    <button [disabled]="!initialized || retrieving_file || !write_access" mat-icon-button (click)="editing = !editing"><mat-icon>edit</mat-icon></button>
    <button [disabled]="!initialized || retrieving_file || !write_access" (click)="toggleFavorite()" mat-icon-button ><mat-icon>{{file.favorite ? 'favorite_filled' : 'favorite_outline'}}</mat-icon></button>
  </div>
</h4>

<mat-dialog-content>
  <mat-form-field class="info-field">
    <mat-label i18n="Name">Name</mat-label>
    <input [(ngModel)]="new_file.title" matInput [disabled]="!editing">
  </mat-form-field>
  <mat-form-field class="info-field">
    <mat-label i18n="URL">URL</mat-label>
    <input [(ngModel)]="new_file.url" matInput [disabled]="!editing">
    <button mat-icon-button matSuffix (click)="window.open(new_file.url, '_blank')">
      <mat-icon>link</mat-icon>
    </button>
  </mat-form-field>
  <mat-form-field class="info-field">
    <mat-label i18n="Uploader">Uploader</mat-label>
    <input [(ngModel)]="new_file.uploader" matInput [disabled]="!editing">
  </mat-form-field>
  <mat-form-field class="info-field">
    <mat-label i18n="Upload date">Upload date</mat-label>
    <input [value]="upload_date" matInput [matDatepicker]="picker" (dateChange)="uploadDateChanged($event)" [disabled]="!editing">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <mat-form-field class="info-field">
    <mat-label i18n="Thumbnail path">Thumbnail path</mat-label>
    <input [(ngModel)]="new_file.thumbnailPath" matInput [disabled]="!editing">
  </mat-form-field>
  <mat-form-field class="info-field">
    <mat-label i18n="Thumbnail URL">Thumbnail URL</mat-label>
    <input [(ngModel)]="new_file.thumbnailURL" matInput [disabled]="!editing || new_file.thumbnailPath">
  </mat-form-field>
  @if (initialized && postsService.categories) {
    <mat-form-field class="info-field">
      <mat-label i18n="Category">Category</mat-label>
      <mat-select [value]="category" (selectionChange)="categoryChanged($event)" [compareWith]="categoryComparisonFunction" [disabled]="!editing">
        <mat-option [value]="{}">
          N/A
        </mat-option>
        @for (available_category of postsService.categories | keyvalue; track available_category) {
          <mat-option [value]="available_category.value">
            {{available_category.value['name']}}
          </mat-option>
        }
      </mat-select>
    </mat-form-field>
  }
  <mat-form-field class="info-field">
    <mat-label i18n="View count">View count</mat-label>
    <input type="number" [(ngModel)]="new_file.view_count" matInput [disabled]="!editing">
  </mat-form-field>
  <mat-form-field class="info-field">
    <mat-label i18n="Local view count">Local view count</mat-label>
    <input type="number" [(ngModel)]="new_file.local_view_count" matInput [disabled]="!editing">
  </mat-form-field>

  <mat-divider style="margin-bottom: 16px;"></mat-divider>

  @if (!new_file.isAudio) {
    <div class="info-item">
      <div class="info-item-label"><strong><ng-container i18n="Video resolution property">Resolution:</ng-container>&nbsp;</strong></div>
      <div class="info-item-value">{{new_file.height ? new_file.height + 'p' : 'N/A'}}</div>
    </div>
  }
  <div class="info-item">
    <div class="info-item-label"><strong><ng-container i18n="Video audio bitrate property">Audio bitrate:</ng-container>&nbsp;</strong></div>
    <div class="info-item-value">{{new_file.abr ? new_file.abr + ' Kbps' : 'N/A'}}</div>
  </div>
  <div class="info-item">
    <div class="info-item-label"><strong><ng-container i18n="Video file size property">File size:</ng-container>&nbsp;</strong></div>
    <div class="info-item-value">{{new_file.size ? filesize(new_file.size) : 'N/A'}}</div>
  </div>
  <div class="info-item">
    <div class="info-item-label"><strong><ng-container i18n="Video path property">Path:</ng-container>&nbsp;</strong></div>
    <div class="info-item-value">{{new_file.path ? new_file.path : 'N/A'}}</div>
  </div>

</mat-dialog-content>

<mat-dialog-actions>
  <button mat-button mat-dialog-close><ng-container i18n="Close video info button">Close</ng-container></button>
  <button mat-button [disabled]="!metadataChanged()" (click)="saveChanges()"><ng-container i18n="Save video info button">Save</ng-container></button>
</mat-dialog-actions>