<div class="d-flex justify-content-center">
  <div class="col-8">
    @if (organization()) {
      <div>
        <h2 data-cy="organizationDetailsHeading"><span jhiTranslate="resilientApp.organization.detail.title">Organization</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>{{ organization()!.id }}</span>
          </dd>
          <dt>
            <span [ngbTooltip]="'resilientApp.organization.help.code' | translate" jhiTranslate="resilientApp.organization.code">Code</span>
          </dt>
          <dd>
            <span>{{ organization()!.code }}</span>
          </dd>
          <dt>
            <span [ngbTooltip]="'resilientApp.organization.help.name' | translate" jhiTranslate="resilientApp.organization.name">Name</span>
          </dt>
          <dd>
            <span>{{ organization()!.name }}</span>
          </dd>
          <dt><span jhiTranslate="resilientApp.organization.image">Image</span></dt>
          <dd>
            @if (organization()!.image) {
              <div>
                <a (click)="openFile(organization()!.image ?? '', organization()!.imageContentType)">
                  <img
                    [src]="'data:' + organization()!.imageContentType + ';base64,' + organization()!.image"
                    style="max-width: 100%"
                    alt="organization"
                  />
                </a>
                {{ organization()!.imageContentType }}, {{ byteSize(organization()!.image ?? '') }}
              </div>
            }
          </dd>
          <dt><span jhiTranslate="resilientApp.organization.inputInventory">Input Inventory</span></dt>
          <dd>
            <span>{{ organization()!.inputInventory }}</span>
          </dd>
          <dt><span jhiTranslate="resilientApp.organization.outputInventory">Output Inventory</span></dt>
          <dd>
            <span>{{ organization()!.outputInventory }}</span>
          </dd>
          <dt>
            <span [ngbTooltip]="'resilientApp.organization.help.version' | translate" jhiTranslate="resilientApp.organization.version"
              >Version</span
            >
          </dt>
          <dd>
            <span>{{ organization()!.version }}</span>
          </dd>
          <dt><span jhiTranslate="resilientApp.organization.user">User</span></dt>
          <dd>
            <span>{{ organization()!.user?.login }}</span>
          </dd>
          <dt><span jhiTranslate="resilientApp.organization.parent">Parent</span></dt>
          <dd>
            @if (organization()!.parent) {
              <div>
                <a [routerLink]="['/organization', organization()!.parent?.id, 'view']">{{ organization()!.parent?.name }}</a>
              </div>
            }
          </dd>
          <dt><span jhiTranslate="resilientApp.organization.organizationType">Organization Type</span></dt>
          <dd>
            @if (organization()!.organizationType) {
              <div>
                <a [routerLink]="['/organization-type', organization()!.organizationType?.id, 'view']">{{
                  organization()!.organizationType?.name
                }}</a>
              </div>
            }
          </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', organization()!.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>
