@if (['org.write$'] | hasRole; as canwrite$) {
  <div class="domain-top-view">
    <div>
      <div class="domain-title-row">
        <h2>{{ 'ORG.DOMAINS.TITLE' | translate }}</h2>
        <a
          mat-icon-button
          href="https://zitadel.com/docs/guides/manage/console/organizations-overview#usernames-and-domains"
          rel="noreferrer"
          target="_blank"
        >
          <mat-icon class="icon">info_outline</mat-icon>
        </a>
      </div>
      <p class="domain-desc cnsl-secondary-text">{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}</p>
    </div>
    <span class="fill-space"></span>
    <button
      [disabled]="(canwrite$ | async) === false"
      matTooltip="Add domain"
      mat-raised-button
      color="primary"
      class="cnsl-action-button"
      (click)="addNewDomain()"
    >
      <div class="cnsl-action-button">
        <mat-icon>add</mat-icon>
        <span>{{ 'ACTIONS.NEW' | translate }}</span>
        <cnsl-action-keys (actionTriggered)="addNewDomain()"> </cnsl-action-keys>
      </div>
    </button>
  </div>
  @for (domain of domains; track domain) {
    <cnsl-card class="domain-card">
      <div class="domain">
        <span class="title">{{ domain.domainName }}</span>
        @if (domain.isVerified) {
          <i matTooltip="verified" class="verified las la-check-circle"></i>
        }
        @if (domain.isPrimary) {
          <i matTooltip="primary" class="primary las la-star"></i>
        }
        @if (domain.isVerified && !domain.isPrimary && (canwrite$ | async)) {
          <a class="primaryset" (click)="setPrimary(domain)">{{ 'ORG.DOMAINS.SETPRIMARY' | translate }}</a>
        }
        <span class="fill-space"></span>
        @if (verifyOrgDomains) {
          <button
            mat-icon-button
            [disabled]="(canwrite$ | async) === false || domain.isVerified"
            (click)="verifyDomain(domain)"
          >
            <i class="las la-pen"></i>
          </button>
        }
        <button
          class="domain-rem-button"
          [disabled]="(canwrite$ | async) === false || domain.isPrimary"
          matTooltip="Remove domain"
          color="warn"
          mat-icon-button
          (click)="removeDomain(domain.domainName)"
        >
          <i class="las la-trash"></i>
        </button>
      </div>
    </cnsl-card>
  }
}