<!-- GUIPropertiesViewAndSortCustomizer -->
<div class="d-flex justify-content-center">
  <div class="col-8">
    @if (dashboardComponent()) {
      <div>
        <h2 data-cy="dashboardComponentDetailsHeading"><span jhiTranslate="resilientApp.dashboardComponent.detail.title">Dashboard Component</span></h2>

        <hr />

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

        <jhi-alert></jhi-alert>
        
        <dl class="row-md jh-entity-details">
          <dt><span jhiTranslate="resilientApp.dashboardComponent.code">Code</span></dt>
          <dd>
            <span>{{ dashboardComponent()!.code }}</span>
          </dd>
          <dt><span jhiTranslate="resilientApp.dashboardComponent.name">Name</span></dt>
          <dd>
            <span>{{ dashboardComponent()!.name }}</span>
          </dd>
          <dt><span jhiTranslate="resilientApp.dashboardComponent.description">Description</span></dt>
          <dd>
            <span>{{ dashboardComponent()!.description }}</span>
          </dd>
          <dt><span jhiTranslate="resilientApp.dashboardComponent.isActive">Is Active ?</span></dt>
          <dd>
            <span>{{ dashboardComponent()!.isActive }}</span>
          </dd>
        </dl>

        <!-- Tabs navs -->
        <ul class="nav nav-tabs mb-3"role="tablist">
          <li class="nav-item" role="presentation">
            <a
              class="nav-link"
              [class.active]="currentTab === 'details'"
              (click)="setTab('details')"
              jhiTranslate="resilientApp.dashboardComponent.tabDetails.title"
              >Details</a
            >
          </li>
        </ul>
        <!-- Tabs navs -->
        
        <!-- Tabs content -->
        <div class="tab-content">
          <div
            class="tab-pane fade show"
            [class.active]="currentTab === 'details'"
            [class.show]="currentTab === 'details'"
          >
            <table class="table">
              <thead class="thead bg-info">
                <tr>
                  <th scope="col"></th>
                  <th scope="col" jhiTranslate="resilientApp.dashboardComponent.tabDetails.name">Name</th>
                  <th scope="col" jhiTranslate="resilientApp.dashboardComponent.tabDetails.variable">Output</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let dashboardComponentDetail of dashboardComponent()!.dashboardComponentDetails; let i=index">
                  <td>{{i+1}}</td>
                  <td>
                    {{ dashboardComponentDetail.name }}
                  </td>
                  <td>
                    {{dashboardComponentDetail!.variable!.name}}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- Tabs content -->
        
        <ng-container #dashboardContainer></ng-container>
        <!--
        <dashboard-component-chart [dashboardComponent]="dashboardComponent()"></dashboard-component-chart>
        -->
        
        <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]="['/dashboard-component', dashboardComponent()!.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>
