<base-detail-layout [activityDomain]="period()" [title.translate]="'resilientApp.period.detail.title'">

        <dl class="row-md jh-entity-details">
          <dt><span [ngbTooltip]="'resilientApp.period.help.name' | translate" jhiTranslate="resilientApp.period.name">Name</span></dt>
          <dd>
            <span>{{ period()!.name }}</span>
          </dd>
          <dt>
            <span [ngbTooltip]="'resilientApp.period.help.description' | translate" jhiTranslate="resilientApp.period.description"
              >Description</span
            >
          </dt>
          <dd>
            <span>{{ period()!.description }}</span>
          </dd>
          <dt>
            <span [ngbTooltip]="'resilientApp.period.help.beginDate' | translate" jhiTranslate="resilientApp.period.beginDate"
              >Begin Date</span
            >
          </dt>
          <dd>
            <span>{{ period()!.beginDate | formatMediumDate }}</span>
          </dd>
          <dt>
            <span [ngbTooltip]="'resilientApp.period.help.endDate' | translate" jhiTranslate="resilientApp.period.endDate">End Date</span>
          </dt>
          <dd>
            <span>{{ period()!.endDate | formatMediumDate }}</span>
          </dd>
          <dt><span [ngbTooltip]="'resilientApp.period.help.state' | translate" jhiTranslate="resilientApp.period.state">State</span></dt>
          <dd>
            <span [jhiTranslate]="'resilientApp.PeriodStatus.' + (period()!.state ?? 'null')">{{
              { null: '', CREATED: 'CREATED',OPENED: 'OPENED', CLOSED: 'CLOSED', PROCESSING: 'PROCESSING', ENDED: 'ENDED' }[period()!.state ?? 'null']
            }}</span>
          </dd>

      </dl>

      @if(period()!.periodVersions!.length>0) {
      <!-- Tabs navs -->
      <ul class="nav nav-tabs mb-3"role="tablist">
        <li class="nav-item" role="presentation">
        <a
          class="nav-link"
          [class.active]="currentTab === 'versions'"
          (click)="setTab('versions')"
          jhiTranslate="resilientApp.period.tabVersions.title"
          >Versions</a
        >
        </li>
      </ul>
      <!-- Tabs navs -->

      <!-- Tabs content -->
      <div class="tab-content">
        <div
        class="tab-pane fade"
        [class.active]="currentTab === 'versions'"
        [class.show]="currentTab === 'versions'"
        >
        <table class="nested-table table">
          <thead class="thead bg-info">
            <tr>
            <th scope="col"></th>
            <th scope="col" jhiTranslate="resilientApp.period.tabVersions.name">Name</th>
            <th scope="col" jhiTranslate="resilientApp.period.tabVersions.description">Description</th>
            <th scope="col" jhiTranslate="resilientApp.period.tabVersions.periodVersion">Period Version</th>
            <th scope="col" jhiTranslate="resilientApp.period.tabVersions.state">State</th>
            <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let periodVersion of period()!.periodVersions; let i=index">
              <td>{{i+1}}</td>
              <td>
                {{ periodVersion!.name }}
              </td>
              <td>
                {{ periodVersion!.description }}
              </td>
              <td>
                {{ periodVersion!.periodVersion }}
              </td>
              <td>
                <span [jhiTranslate]="'resilientApp.PeriodVersionStatus.' + (periodVersion!.state ?? 'null')">{{
                  { null: '', PROCESSING: 'PROCESSING', ENDED: 'ENDED', ERROR: 'ERROR' }[periodVersion!.state ?? 'null']
                }}</span>
              </td>
              <td>
                <!-- [routerLink]="['/dashboard', period()!.id, periodVersion!.id, 'preview']"  -->
                <button 
                  type="button"   
                  class="btn p-0"
                  (click)="openDashboard(period()!.id, periodVersion!.id)"
                >
                  <fa-icon icon="tachometer-alt"></fa-icon>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        </div>
      </div>
      }
      
        <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(period())"
          type="button" 
          [routerLink]="!canUpdate(period()) ? null : ['/period', period()!.id, 'edit']" 
          class="btn btn-primary"
          [class.disabled]="!canUpdate(period())"
        >
          <fa-icon icon="pencil-alt"></fa-icon>&nbsp;<span jhiTranslate="entity.action.edit">Editar</span>
        </button>
        
        <button type="button" (click)="showLogs()" class="btn btn-danger" *ngIf="true">
          <fa-icon icon="pencil-alt"></fa-icon>&nbsp;<span jhiTranslate="resilientApp.period.action.showLogs">Logs</span>
        </button>

        <!-- ACTIVITY Actions -->
        <resilient-activity-actions-button [activityDomain]="period()" (activityInvoked)="handleActivityInvoked($event)"></resilient-activity-actions-button>

</base-detail-layout>