<div class="d-flex justify-content-center">
  <div class="col-8">
    @if (organizationType()) {
      <div>
        <h2 data-cy="organizationTypeDetailsHeading">
          <span jhiTranslate="resilientApp.organizationType.detail.title">Organization Type</span>
        </h2>

        <hr />

        <jhi-alert-error></jhi-alert-error>

        <jhi-alert></jhi-alert>

        <dl class="row-md jh-entity-details">
          <dt><span jhiTranslate="global.field.id">Código</span></dt>
          <dd>
            <span>{{ organizationType()!.id }}</span>
          </dd>
          <dt>
            <span [ngbTooltip]="'resilientApp.organizationType.help.code' | translate" jhiTranslate="resilientApp.organizationType.code"
              >Code</span
            >
          </dt>
          <dd>
            <span>{{ organizationType()!.code }}</span>
          </dd>
          <dt>
            <span [ngbTooltip]="'resilientApp.organizationType.help.name' | translate" jhiTranslate="resilientApp.organizationType.name"
              >Name</span
            >
          </dt>
          <dd>
            <span>{{ organizationType()!.name }}</span>
          </dd>
          <dt>
            <span
              [ngbTooltip]="'resilientApp.organizationType.help.description' | translate"
              jhiTranslate="resilientApp.organizationType.description"
              >Description</span
            >
          </dt>
          <dd>
            <span>{{ organizationType()!.description }}</span>
          </dd>
          <dt>
            <span [ngbTooltip]="'resilientApp.organizationType.help.nature' | translate" jhiTranslate="resilientApp.organizationType.nature"
              >Nature</span
            >
          </dt>
          <dd>
            <span [jhiTranslate]="'resilientApp.OrganizationNature.' + (organizationType()!.nature ?? 'null')">{{
              { null: '', ORGANIZATION: 'ORGANIZATION', PERSON: 'PERSON', FACILITY: 'FACILITY', LEVEL: 'LEVEL' }[
                organizationType()!.nature ?? 'null'
              ]
            }}</span>
          </dd>
          <dt>
            <span [ngbTooltip]="'resilientApp.organizationType.help.icon' | translate" jhiTranslate="resilientApp.organizationType.icon"
              >Icon</span
            >
          </dt>
          <dd>
            @if (organizationType()!.icon) {
              <div>
                <a (click)="openFile(organizationType()!.icon ?? '', organizationType()!.iconContentType)">
                  <img
                    [src]="'data:' + organizationType()!.iconContentType + ';base64,' + organizationType()!.icon"
                    style="max-width: 100%"
                    alt="organizationType"
                  />
                </a>
                {{ organizationType()!.iconContentType }}, {{ byteSize(organizationType()!.icon ?? '') }}
              </div>
            }
          </dd>
          <dt>
            <span
              [ngbTooltip]="'resilientApp.organizationType.help.version' | translate"
              jhiTranslate="resilientApp.organizationType.version"
              >Version</span
            >
          </dt>
          <dd>
            <span>{{ organizationType()!.version }}</span>
          </dd>
          <dt><span jhiTranslate="resilientApp.organizationType.metadataProperties">Metadata Properties</span></dt>
          <dd>
            @for (metadataProperties of organizationType()!.metadataProperties; track $index; let last = $last) {
              <span>
                <a [routerLink]="['/metadata-property', metadataProperties.id, 'view']">{{ metadataProperties?.name }}</a
                >{{ last ? '' : ', ' }}
              </span>
            }
          </dd>
        </dl>

        <button type="submit" (click)="previousState()" class="btn btn-info" data-cy="entityDetailsBackButton">
          <fa-icon icon="arrow-left"></fa-icon>&nbsp;<span jhiTranslate="entity.action.back">Voltar</span>
        </button>

        <button type="button" [routerLink]="['/organization-type', organizationType()!.id, 'edit']" class="btn btn-primary">
          <fa-icon icon="pencil-alt"></fa-icon>&nbsp;<span jhiTranslate="entity.action.edit">Editar</span>
        </button>
      </div>
    }
  </div>
</div>
