@if (user) {
  <div class="info-row">
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'USER.PAGES.STATE' | translate }}</p>
      @if (user.state) {
        <p
          class="state"
          [ngClass]="{
            active: user.state === UserState.USER_STATE_ACTIVE,
            inactive: user.state === UserState.USER_STATE_INACTIVE,
          }"
        >
          {{ (isV2(user) ? 'USER.STATEV2.' : 'USER.STATE.') + user.state | translate }}
        </p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'USER.ID' | translate }}</p>
      @if (userId) {
        <p class="info-row-desc">{{ userId }}</p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'USER.DETAILS.DATECREATED' | translate }}</p>
      @if (creationDate) {
        <p class="info-row-desc">
          {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
        </p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'USER.DETAILS.DATECHANGED' | translate }}</p>
      @if (changeDate) {
        <p class="info-row-desc">
          {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
        </p>
      }
    </div>
    <div class="info-wrapper width">
      <p class="info-row-title">{{ 'USER.PAGES.LOGINMETHODS' | translate }}</p>
      @for (login of loginMethods; track login) {
        <div class="copy-row">
          <button
            [disabled]="copied === login"
            [matTooltip]="(copied !== login ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
            cnslCopyToClipboard
            [valueToCopy]="login"
            (copiedValue)="copied = $event"
            data-e2e="copy-loginname"
          >
            {{ login }}
          </button>
        </div>
      }
    </div>
  </div>
}

@if (instance) {
  <div class="info-row">
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'IAM.PAGES.STATE' | translate }}</p>
      @if (instance.state) {
        <p
          class="state"
          [ngClass]="{
            active: instance.state === State.STATE_RUNNING,
            inactive: instance.state === State.STATE_STOPPED || instance.state === State.STATE_STOPPING,
          }"
        >
          {{ 'IAM.STATE.' + instance.state | translate }}
        </p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'INSTANCEID' | translate }}</p>
      @if (instance.id) {
        <p class="info-row-desc">{{ instance.id }}</p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'NAME' | translate }}</p>
      @if (instance.name) {
        <p class="info-row-desc">{{ instance.name }}</p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'VERSION' | translate }}</p>
      @if (instance.version) {
        <p class="info-row-desc">{{ instance.version }}</p>
      }
    </div>
    <div class="info-wrapper width">
      <p class="info-row-title">{{ 'IAM.PAGES.DOMAINLIST' | translate }}</p>
      @for (domain of instance.domainsList; track domain) {
        <div class="copy-row">
          <button
            [disabled]="copied === domain.domain"
            [matTooltip]="(copied !== domain.domain ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
            cnslCopyToClipboard
            [valueToCopy]="domain.domain"
            (copiedValue)="copied = $event"
          >
            {{ domain.domain }}
          </button>
        </div>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'ORG.PAGES.CREATIONDATE' | translate }}</p>
      @if (instance.details?.creationDate; as creationDate) {
        <p class="info-row-desc">
          {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
        </p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'ORG.PAGES.DATECHANGED' | translate }}</p>
      @if (instance.details?.changeDate; as changeDate) {
        <p class="info-row-desc">
          {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
        </p>
      }
    </div>
  </div>
}

@if (org) {
  <div class="info-row">
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'ORG.PAGES.STATE' | translate }}</p>
      @if (org.state) {
        <p
          class="state"
          [ngClass]="{
            active: org.state === OrgState.ORG_STATE_ACTIVE,
            inactive: org.state === OrgState.ORG_STATE_INACTIVE,
          }"
        >
          {{ 'ORG.STATE.' + org.state | translate }}
        </p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'ORG.PAGES.ID' | translate }}</p>
      @if (org.id) {
        <p class="info-row-desc">{{ org.id }}</p>
      }
    </div>
    <div class="info-wrapper width">
      <p class="info-row-title">{{ 'ORG.PAGES.PRIMARYDOMAIN' | translate }}</p>
      @if (org.primaryDomain) {
        <div class="copy-row">
          <button
            [disabled]="copied === org.primaryDomain"
            [matTooltip]="(copied !== org.primaryDomain ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
            cnslCopyToClipboard
            [valueToCopy]="org.primaryDomain"
            (copiedValue)="copied = $event"
          >
            {{ org.primaryDomain }}
          </button>
        </div>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'ORG.PAGES.CREATIONDATE' | translate }}</p>
      @if (org.details?.creationDate; as creationDate) {
        <p class="info-row-desc">
          {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
        </p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'ORG.PAGES.DATECHANGED' | translate }}</p>
      @if (org.details?.changeDate; as changeDate) {
        <p class="info-row-desc">
          {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
        </p>
      }
    </div>
  </div>
}

@if (project) {
  <div class="info-row">
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'PROJECT.STATE.TITLE' | translate }}</p>
      @if (project.state) {
        <p
          class="state"
          [ngClass]="{
            active: project.state === ProjectState.PROJECT_STATE_ACTIVE,
            inactive: project.state === ProjectState.PROJECT_STATE_INACTIVE,
          }"
        >
          {{ 'PROJECT.STATE.' + project.state | translate }}
        </p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'PROJECT.PAGES.ID' | translate }}</p>
      @if (project.id) {
        <p class="info-row-desc">{{ project.id }}</p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'PROJECT.PAGES.CREATEDON' | translate }}</p>
      @if (project.details?.creationDate; as creationDate) {
        <p class="info-row-desc">
          {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
        </p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'PROJECT.PAGES.LASTMODIFIED' | translate }}</p>
      @if (project.details?.changeDate; as changeDate) {
        <p class="info-row-desc">
          {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
        </p>
      }
    </div>
  </div>
}

@if (grantedProject) {
  <div class="info-row">
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'PROJECT.STATE.TITLE' | translate }}</p>
      @if (grantedProject.state) {
        <p
          class="state"
          [ngClass]="{
            active: grantedProject.state === ProjectGrantState.PROJECT_GRANT_STATE_ACTIVE,
            inactive: grantedProject.state === ProjectGrantState.PROJECT_GRANT_STATE_INACTIVE,
          }"
        >
          {{ 'PROJECT.STATE.' + grantedProject.state | translate }}
        </p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'PROJECT.PAGES.ID' | translate }}</p>
      @if (grantedProject.projectId) {
        <p class="info-row-desc">{{ grantedProject.projectId }}</p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'PROJECT.GRANT.GRANTID' | translate }}</p>
      @if (grantedProject.grantId) {
        <p class="info-row-desc">{{ grantedProject.grantId }}</p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'PROJECT.PAGES.CREATEDON' | translate }}</p>
      @if (grantedProject.details?.creationDate; as creationDate) {
        <p class="info-row-desc">
          {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
        </p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'PROJECT.PAGES.LASTMODIFIED' | translate }}</p>
      @if (grantedProject.details?.changeDate; as changeDate) {
        <p class="info-row-desc">
          {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
        </p>
      }
    </div>
  </div>
}

@if (app) {
  <div class="info-row">
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'APP.PAGES.STATE' | translate }}</p>
      @if (app.state) {
        <p
          class="state"
          [ngClass]="{
            active: app.state === AppState.APP_STATE_ACTIVE,
            inactive: app.state === AppState.APP_STATE_INACTIVE,
          }"
        >
          {{ 'APP.PAGES.DETAIL.STATE.' + app.state | translate }}
        </p>
      }
    </div>
    @if (app.apiConfig?.authMethodType; as authMethodType) {
      <div class="info-wrapper">
        <p class="info-row-title">{{ 'APP.AUTHMETHOD' | translate }}</p>
        <p class="info-row-desc">
          {{ 'APP.API.AUTHMETHOD.' + authMethodType | translate }}
        </p>
      </div>
    }
    @if (app.oidcConfig?.authMethodType; as authMethodType) {
      <div class="info-wrapper">
        <p class="info-row-title">{{ 'APP.AUTHMETHOD' | translate }}</p>
        <p class="info-row-desc">
          {{ 'APP.OIDC.AUTHMETHOD.' + authMethodType | translate }}
        </p>
      </div>
    }
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'APP.PAGES.ID' | translate }}</p>
      @if (app.id) {
        <p class="info-row-desc">{{ app.id }}</p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'APP.PAGES.DATECREATED' | translate }}</p>
      @if (app.details?.creationDate; as creationDate) {
        <p class="info-row-desc">
          {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
        </p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'APP.PAGES.DATECHANGED' | translate }}</p>
      @if (app.details?.changeDate; as changeDate) {
        <p class="info-row-desc">
          {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
        </p>
      }
    </div>
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'APP.OIDC.INFO.CLIENTID' | translate }}</p>
      @if (app.oidcConfig?.clientId) {
        <div class="copy-row">
          @if (app.oidcConfig?.clientId; as clientId) {
            <button
              [disabled]="copied === clientId"
              [matTooltip]="(copied !== clientId ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
              cnslCopyToClipboard
              [valueToCopy]="clientId"
              (copiedValue)="copied = $event"
            >
              {{ clientId }}
            </button>
          }
        </div>
      }
      @if (app.apiConfig?.clientId) {
        <div class="copy-row">
          @if (app.apiConfig?.clientId; as clientId) {
            <button
              [disabled]="copied === clientId"
              [matTooltip]="(copied !== clientId ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
              cnslCopyToClipboard
              [valueToCopy]="clientId"
              (copiedValue)="copied = $event"
            >
              {{ clientId }}
            </button>
          }
        </div>
      }
    </div>
  </div>
}