<!-- GUIPropertiesViewAndSortCustomizer -->
<div class="d-flex justify-content-center">
  <div class="col-8">
    @if (variableClassType()) {
      <div>
        <h2 data-cy="variableClassTypeDetailsHeading"><span jhiTranslate="resilientApp.variableClassType.detail.title">Variable Class Type</span></h2>

        <hr />

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

        <jhi-alert></jhi-alert>

        <dl class="row-md jh-entity-details">
          <dt><span jhiTranslate="resilientApp.variableClassType.name">Name</span></dt>
          <dd>
            <span>{{ variableClassType()!.name }}</span>
          </dd>
          <dt><span jhiTranslate="resilientApp.variableClassType.description">Description</span></dt>
          <dd>
            <span>{{ variableClassType()!.description }}</span>
          </dd>
          <dt><span jhiTranslate="resilientApp.variableClassType.label">Label</span></dt>
          <dd>
            <span>{{ variableClassType()!.label }}</span>
          </dd>
        </dl>

        <!-- Tabs navs -->
        <ul class="nav nav-tabs mb-3"role="tablist">
          <li class="nav-item" role="presentation">
            <a
              class="nav-link active"
              jhiTranslate="resilientApp.variableClassType.tabClasses.title"
              >Classes</a
            >
          </li>
        </ul>
        <!-- Tabs navs -->
        
        <!-- Tabs content -->
        <div class="tab-content">
          <div
            class="tab-pane fade active show"
          >
            <table class="table">
              <thead class="thead bg-info">
                <tr>
                  <th scope="col"></th>
                  <th scope="col" jhiTranslate="resilientApp.variableClassType.tabClasses.code">Code</th>
                  <th scope="col" jhiTranslate="resilientApp.variableClassType.tabClasses.name">Name</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let variableClass of variableClassType()!.variableClasses; let i=index">
                  <td>{{i+1}}</td>
                  <td>
                    {{ variableClass.code }}
                  </td>
                  <td>
                    {{ variableClass.name }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- Tabs content -->
          
        <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]="['/variable-class-type', variableClassType()!.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>
