<div id="medias" class="page-layout carded fullwidth inner-scroll">
  <!-- TOP BACKGROUND -->
  <div class="top-bg accent"></div>
  <!-- / TOP BACKGROUND -->

  <!-- CENTER -->
  <div class="center">
    <!-- HEADER -->
    <div
      class="header accent"
      fxLayout="column"
      fxLayoutAlign="center center"
      fxLayout.gt-sm="row"
      fxLayoutAlign.gt-sm="space-between center"
    >
      <!-- APP TITLE -->
      <div
        class="logo mb-24 mb-md-0"
        fxLayout="row"
        fxLayoutAlign="start center"
      >
        <mat-icon
          class="logo-icon s-32 mr-16"
          [@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
        >
          music_video
        </mat-icon>
        <span
          class="logo-text h1"
          [@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
        >
          Medias
        </span>
      </div>
      <!-- / APP TITLE -->

      <!-- SEARCH -->
      <div class="search-wrapper mx-32 mx-md-0">
        <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
          <mat-icon>search</mat-icon>
          <input #filter placeholder="Search for a media" />
        </div>
      </div>
      <!-- / SEARCH -->

      <!-- ADD BUTTON -->
      <button
        mat-raised-button
        [routerLink]="'/media/medias/0'"
        class="add-media-button fuse-white mt-24 mt-md-0"
      >
        <span>ADD NEW MEDIA</span>
      </button>
      <!-- / ADD BUTTON -->
    </div>
    <!-- / HEADER -->

    <!-- CONTENT CARD -->
    <div class="content-card">
      <mat-table
        class="medias-table"
        #table
        [dataSource]="dataSource"
        matSort
        [@animateStagger]="{ value: '50' }"
        fusePerfectScrollbar
      >
        <!-- ID Column -->
        <ng-container matColumnDef="id">
          <mat-header-cell *matHeaderCellDef mat-sort-header
            >ID</mat-header-cell
          >
          <mat-cell *matCellDef="let media">
            <p class="text-truncate">{{ media.id }}</p>
          </mat-cell>
        </ng-container>

        <!-- Image Column -->
        <ng-container matColumnDef="image">
          <mat-header-cell *matHeaderCellDef></mat-header-cell>
          <mat-cell *matCellDef="let media">
            <img
              class="media-image"
              *ngIf="media.featuredImageId"
              [alt]="media.name"
              [src]="media.images[media.featuredImageId].url"
            />
            <img
              *ngIf="!media.featuredImageId"
              [src]="'assets/images/ecommerce/product-image-placeholder.png'"
            />
          </mat-cell>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef mat-sort-header
            >Name</mat-header-cell
          >
          <mat-cell *matCellDef="let media">
            <p class="text-truncate">{{ media.name }}</p>
          </mat-cell>
        </ng-container>

        <!-- Category Column -->
        <ng-container matColumnDef="category">
          <mat-header-cell *matHeaderCellDef fxHide mat-sort-header fxShow.gt-md
            >Category</mat-header-cell
          >
          <mat-cell *matCellDef="let media" fxHide fxShow.gt-md>
            <p class="category text-truncate">
              {{ media.categories[0] }}
            </p>
          </mat-cell>
        </ng-container>

        <!-- Price Column -->
        <ng-container matColumnDef="price">
          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs
            >Price</mat-header-cell
          >
          <mat-cell *matCellDef="let media" fxHide fxShow.gt-xs>
            <p class="price text-truncate">
              {{ media.priceTaxIncl | currency: 'USD':'symbol' }}
            </p>
          </mat-cell>
        </ng-container>

        <!-- Quantity Column -->
        <ng-container matColumnDef="quantity">
          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
            >Quantity</mat-header-cell
          >
          <mat-cell *matCellDef="let media" fxHide fxShow.gt-sm>
            <span
              class="quantity-indicator text-truncate"
              [ngClass]="{
                'red-500': media.quantity <= 5,
                'amber-500': media.quantity > 5 && media.quantity <= 25,
                'green-600': media.quantity > 25
              }"
            >
            </span>
            <span>
              {{ media.quantity }}
            </span>
          </mat-cell>
        </ng-container>

        <!-- Active Column -->
        <ng-container matColumnDef="active">
          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs
            >Active</mat-header-cell
          >
          <mat-cell *matCellDef="let media" fxHide fxShow.gt-xs>
            <mat-icon *ngIf="media.active" class="active-icon green-600 s-16"
              >check</mat-icon
            >
            <mat-icon *ngIf="!media.active" class="active-icon red-500 s-16"
              >close</mat-icon
            >
          </mat-cell>
        </ng-container>

        <mat-header-row
          *matHeaderRowDef="displayedColumns; sticky: true"
        ></mat-header-row>

        <mat-row
          *matRowDef="let media; columns: displayedColumns"
          class="media"
          matRipple
          [routerLink]="
            '/apps/e-commerce/products/' + media.id + '/' + media.handle
          "
        >
        </mat-row>
      </mat-table>

      <mat-paginator
        #paginator
        [length]="10"
        [pageIndex]="0"
        [pageSize]="20"
        [pageSizeOptions]="[5, 10, 20, 50, 100]"
      >
      </mat-paginator>
    </div>
    <!-- / CONTENT CARD -->
  </div>
  <!-- / CENTER -->
</div>
