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

        <hr />

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

        <jhi-alert></jhi-alert>

        <dl class="row-md jh-entity-details">
          <dt>
            <span [ngbTooltip]="'resilientApp.document.help.title' | translate" jhiTranslate="resilientApp.document.title"
              >Title</span
            >
          </dt>
          <dd>
            <span>{{ document()!.title }}</span>
          </dd>
          <dt>
            <span [ngbTooltip]="'resilientApp.document.help.description' | translate" jhiTranslate="resilientApp.document.description"
              >Description</span
            >
          </dt>
          <dd>
            <span>{{ document()!.description }}</span>
          </dd>
          <dt>
            <span
              [ngbTooltip]="'resilientApp.document.help.dataFile' | translate"
              jhiTranslate="resilientApp.document.dataFile"
              >Data File</span
            >
          </dt>
          <dd>
            @if (document()!.dataFile) {
              <div>
                <a
                  (click)="openFile(document()!.dataFile ?? '', document()!.dataFileContentType)"
                  jhiTranslate="entity.action.open"
                  >Abrir</a
                >
                {{ document()!.dataFileContentType }}, {{ byteSize(document()!.dataFile ?? '') }}
              </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 
          *ngIf="canUpdate(document())"
          type="button" 
          [routerLink]="!canUpdate(document()) ? null : ['/document', document()!.id, 'edit']" 
          class="btn btn-primary" 
          [class.disabled]="!canUpdate(document())"
        >
          <fa-icon icon="pencil-alt"></fa-icon>&nbsp;<span jhiTranslate="entity.action.edit">Editar</span>
        </button>
      </div>
    }
  </div>
</div>
