<c8y-title>{{ 'Branding assets' | translate }}</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'cog'"
    [label]="'Settings' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'palette'"
    [label]="'Branding' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'files'"
    [label]="'Branding assets' | translate"
    [path]="'/branding-editor/assets'"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item [placement]="'left'">
  <div class="c8y-select-wrapper">
    <select
      class="form-control"
      [(ngModel)]="supportedFileExtensions"
    >
      @for (filterOption of filterOptions; track $index) {
        <option [ngValue]="filterOption.value">
          {{ filterOption.label | translate }}
        </option>
      }
    </select>
  </div>
</c8y-action-bar-item>

<div class="card content-fullpage inner-scroll">
  <c8y-static-assets-file-list
    [supportedFileExtensions]="supportedFileExtensions"
    (itemSelected)="onItemSelected($event)"
  ></c8y-static-assets-file-list>
</div>