<c8y-title>{{ 'Branding' | 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]="'palette'"
    [label]="'Variants' | translate"
    [path]="'/branding-editor/variants'"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

@let brandingVariant = availableBrandingVariants$ | async;
@if (!brandingVariant) {
  <c8y-loading></c8y-loading>
} @else {
  @if (brandingVariant.publicOptions) {
    <c8y-action-bar-item
      [placement]="'right'"
      [priority]="30"
    >
      <button
        class="btn btn-link"
        (click)="addNewVersion()"
        data-cy="branding-add-branding-variant"
      >
        <i c8yIcon="plus-circle"></i>
        <span translate>Add variant</span>
      </button>
    </c8y-action-bar-item>
  }
  <c8y-action-bar-item
    [placement]="'right'"
    [priority]="20"
  >
    <button
      class="btn btn-link"
      data-cy="branding-import-branding"
      (click)="importBranding()"
    >
      <i [c8yIcon]="'data-import'"></i>
      <span translate>Import variant</span>
    </button>
  </c8y-action-bar-item>

  @if (brandingVariant.publicOptions) {
    <c8y-action-bar-item
      [placement]="'right'"
      [priority]="10"
    >
      <button
        class="btn btn-link"
        (click)="deleteAllBrandings(brandingVariant.publicOptions)"
        data-cy="branding-remove-all-brandings"
      >
        <i [c8yIcon]="'trash-o'"></i>
        <span translate>Delete all variants</span>
      </button>
    </c8y-action-bar-item>
  }

  <c8y-help
    [src]="'/docs/enterprise-tenant/customization/#to-configure-branding-settings'"
  ></c8y-help>

  <div class="content-fullpage d-flex d-col border-top">
    <c8y-data-grid
      [title]="'Branding variants' | translate"
      [columns]="columns"
      [actionControls]="actionControls"
      [pagination]="pagination"
      [displayOptions]="displayOptions"
      (onReload)="refresh()"
      [rows]="brandingVariant.variants"
    >
      @if (!brandingVariant.publicOptions) {
        <c8y-ui-empty-state
          [icon]="'palette'"
          [title]="'No branding variants' | translate"
          [subtitle]="
            'Personalize your experience with a theme-able interface. Create a unique look that aligns with your brand identity.'
              | translate
          "
          [horizontal]="false"
        >
          <button
            class="btn btn-default"
            data-cy="branding-get-started-using-branding"
            (click)="getStartedUsingBranding()"
            translate
          >
            Add branding variant
          </button>
        </c8y-ui-empty-state>
      }
    </c8y-data-grid>
  </div>
}