<div (mouseenter)="onMouseOver()" (mouseleave)="onMouseOut()" (contextmenu)="onRightClick($event)" style="position: relative; width: fit-content;">
  @if (!loading) {
    <div class="download-time">
      <mat-icon class="audio-video-icon">{{(file_obj.type === 'audio' || file_obj.isAudio) ? 'audiotrack' : 'movie'}}</mat-icon>
      &nbsp;&nbsp;
      @if (file_obj.auto) {
        <ng-container i18n="Auto-generated label">Auto-generated</ng-container>
      }
      @if (!file_obj.auto) {
        {{file_obj.registered | date:'shortDate' : undefined : locale.ngID}}
      }
    </div>
  }
  @if (loading) {
    <div class="download-time" style="width: 75%; margin-top: 5px;"><content-loader [backgroundColor]="theme.ghost_primary" [foregroundColor]="theme.ghost_secondary" viewBox="0 0 250 30"><svg:rect x="0" y="0" rx="3" ry="3" width="250" height="30" /></content-loader></div>
  }
  <!-- The context menu trigger must be kept above the "more info" menu -->
  <div style="visibility: hidden; position: fixed"
    [style.left]="contextMenuPosition.x"
    [style.top]="contextMenuPosition.y"
    [matMenuTriggerFor]="context_menu">
  </div>
  @if (!file_obj || !file_obj.auto) {
    <button [disabled]="loading" [matMenuTriggerFor]="action_menu" class="menuButton" mat-icon-button><mat-icon>more_vert</mat-icon></button>
  }
  <mat-menu #context_menu>
    @if (!loading) {
      <button (click)="navigateToFile($event)" mat-menu-item><mat-icon>open_in_browser</mat-icon><ng-container i18n="Open file button">Open file</ng-container></button>
      <button (click)="navigateToFile({ctrlKey: true})" mat-menu-item><mat-icon>open_in_new</mat-icon><ng-container i18n="Open file in new tab">Open file in new tab</ng-container></button>
    }
  </mat-menu>
  <mat-menu #action_menu="matMenu">
    @if (!is_playlist && !loading) {
      <button (click)="emitToggleFavorite()" mat-menu-item>
        <mat-icon>{{file_obj.favorite ? 'favorite_filled' : 'favorite_outline'}}</mat-icon>
        @if (!file_obj.favorite) {
          <ng-container i18n="Favorite button">Favorite</ng-container>
        }
        @if (file_obj.favorite) {
          <ng-container i18n="Unfavorite button">Unfavorite</ng-container>
        }
      </button>
      <button (click)="openFileInfoDialog()" mat-menu-item><mat-icon>info</mat-icon><ng-container i18n="Video info button">Info</ng-container></button>
      @if (file_obj.sub_id) {
        <button (click)="navigateToSubscription()" mat-menu-item><mat-icon>{{file_obj.isAudio ? 'library_music' : 'video_library'}}</mat-icon>&nbsp;<ng-container i18n="Go to subscription menu item">Go to subscription</ng-container></button>
      }
      <button [disabled]="!availablePlaylists || availablePlaylists.length === 0" [matMenuTriggerFor]="addtoplaylist" mat-menu-item><mat-icon>playlist_add</mat-icon>&nbsp;<ng-container i18n="Add to playlist menu item">Add to playlist</ng-container></button>
      <mat-menu #addtoplaylist="matMenu">
        @for (playlist of availablePlaylists; track playlist.id) {
          @if ((playlist.type === 'audio') === file_obj.isAudio) {
            <button [disabled]="playlist.uids?.includes(file_obj.uid)" (click)="emitAddFileToPlaylist(playlist.id)" mat-menu-item>{{playlist.name}}</button>
          }
        }
      </mat-menu>
      <mat-divider></mat-divider>
      @if (file_obj.sub_id) {
        <button (click)="emitDeleteFile()" mat-menu-item><mat-icon>restore</mat-icon><ng-container i18n="Delete and redownload subscription video button">Delete and redownload</ng-container></button>
      }
      @if (!file_obj.sub_id) {
        <button (click)="emitDeleteFile()" mat-menu-item><mat-icon>delete</mat-icon><ng-container i18n="Delete video button">Delete</ng-container></button>
      }
      @if (file_obj.sub_id || use_youtubedl_archive) {
        <button (click)="emitDeleteFile(true)" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete and don't download again">Delete and don't download again</ng-container></button>
      }
    }
    @if (is_playlist && !loading) {
      <button (click)="emitEditPlaylist()" mat-menu-item><mat-icon>edit</mat-icon><ng-container i18n="Playlist edit button">Edit</ng-container></button>
      <mat-divider></mat-divider>
      <button (click)="emitDeleteFile()" mat-menu-item><mat-icon>delete_forever</mat-icon><ng-container i18n="Delete playlist">Delete</ng-container></button>
    }
    @if (loading) {
      <button mat-menu-item>Placeholder</button>
    }
  </mat-menu>
  <mat-card [matTooltip]="null" (click)="navigateToFile($event)" matRipple class="file-mat-card" [ngClass]="{'small-mat-card': card_size === 'small', 'file-mat-card': card_size === 'medium', 'large-mat-card': card_size === 'large', 'mat-elevation-z4': !elevated, 'mat-elevation-z8': elevated}">
    <div style="padding:5px">
      @if (!loading && file_obj.thumbnailURL) {
        <div class="img-div">
          <div [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" style="position: relative">
            @if (!hide_image || is_playlist || (file_obj.type === 'audio' || file_obj.isAudio)) {
              <img [ngClass]="{'image-small': card_size === 'small', 'image': card_size === 'medium', 'image-large': card_size === 'large'}" [src]="file_obj.thumbnailPath ? thumbnailBlobURL : file_obj.thumbnailURL" alt="Thumbnail">
            }
            @if (hide_image && elevated && !is_playlist && !(file_obj.type === 'audio' || file_obj.isAudio)) {
              <video autoplay loop muted preload="none" [muted]="true" [ngClass]="{'video-small': card_size === 'small', 'video': card_size === 'medium', 'video-large': card_size === 'large'}" [src]="streamURL">
              </video>
            }
            <div class="duration-time">
              {{file_length}}
            </div>
          </div>
        </div>
      }

      @if (loading) {
        <div class="img-div">
          <content-loader [backgroundColor]="theme.ghost_primary" [foregroundColor]="theme.ghost_secondary" viewBox="0 0 100 55"><svg:rect x="0" y="0" rx="0" ry="0" width="100" height="55" /></content-loader>
        </div>
      }

      @if (!loading) {
        <span [ngClass]="{'max-two-lines': card_size !== 'small', 'max-one-line': card_size === 'small' }">{{card_size === 'large' && file_obj.uploader ? file_obj.uploader + ' - ' : ''}}<strong>{{!is_playlist ? file_obj.title : file_obj.name}}</strong></span>
      }
      @if (loading) {
        <span class="title-loading"><content-loader [backgroundColor]="theme.ghost_primary" [foregroundColor]="theme.ghost_secondary" viewBox="0 0 250 30"><svg:rect x="0" y="0" rx="3" ry="3" width="250" height="30" /></content-loader></span>
      }
    </div>
  </mat-card>
</div>
