<c8y-title>{{ brandingName$ | async }}</c8y-title>

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

<div class="card card--fullpage content-fullpage">
  <div class="card-header separator">
    <div class="card-title">{{ brandingName$ | async }} — {{ tabName$ | async | translate }}</div>
  </div>
  <router-outlet
    class="d-contents"
    (activate)="routeActivated($event)"
  ></router-outlet>

  <div class="card-footer separator">
    <!-- footer content -->
    <button
      class="btn btn-default"
      data-cy="branding-cancel"
      (click)="cancel()"
      translate
    >
      Cancel
    </button>
    <button
      class="btn btn-primary"
      data-cy="branding-save"
      [disabled]="formControl.invalid"
      (click)="saveBranding()"
      translate
    >
      Save
    </button>
    <button
      class="btn btn-default"
      data-cy="branding-save-as"
      [disabled]="formControl.invalid"
      (click)="openPreview()"
      translate
    >
      Open preview
    </button>
    <button
      class="btn btn-default"
      data-cy="branding-set-as-latest"
      (click)="markAsActive()"
      [disabled]="isGlobalBranding$ | async"
      translate
    >
      Set as global
    </button>
  </div>
</div>