<div class="d-flex justify-content-center">
  <div class="col-8">
    <form name="editForm" novalidate (ngSubmit)="save()" [formGroup]="editForm">
      <h2 id="jhi-dashboard-component-heading" data-cy="DashboardComponentCreateUpdateHeading" jhiTranslate="resilientApp.dashboardComponent.home.createOrEditLabel">
        Criar ou editar Dashboard Component
      </h2>

      <div>
        <jhi-alert-error></jhi-alert-error>
        <div class="mb-3">
          <label
            class="form-label"
            for="field_code"
            [ngbTooltip]="'resilientApp.dashboardComponent.help.code' | translate"
            jhiTranslate="resilientApp.dashboardComponent.code"
            >Code</label
          >
          @if (editForm.controls.id.value == null) {
          <input type="text" class="form-control" name="code" id="field_code" data-cy="code" formControlName="code" />
          } @else {
          <input type="text" class="form-control readonly" name="code" id="field_code" data-cy="code" formControlName="code"  [readonly]="true" />
          }

          @if (editForm.get('code')!.invalid && (editForm.get('code')!.dirty || editForm.get('code')!.touched)) {
            <div>
              @if (editForm.get('code')?.errors?.required) {
                <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
              }
              @if (editForm.get('code')?.errors?.minlength) {
                <small class="form-text text-danger" jhiTranslate="entity.validation.minlength" [translateValues]="{ min: '3' }"
                  >Este campo deve ter pelo menos 3 caracteres.</small
                >
              }
            </div>
          }
        </div>
        <div class="mb-3">
          <label class="form-label" for="field_name" jhiTranslate="resilientApp.dashboardComponent.name">Name</label>
          <input type="text" class="form-control" name="name" id="field_name" data-cy="name" formControlName="name" />
          @if (editForm.get('name')!.invalid && (editForm.get('name')!.dirty || editForm.get('name')!.touched)) {
            <div>
              @if (editForm.get('name')?.errors?.required) {
                <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
              }
            </div>
          }
        </div>
        <div class="mb-3">
          <label class="form-label" for="field_description" jhiTranslate="resilientApp.dashboardComponent.description">Description</label>
          <input
            type="text"
            class="form-control"
            name="description"
            id="field_description"
            data-cy="description"
            formControlName="description"
          />
          @if (editForm.get('description')!.invalid && (editForm.get('description')!.dirty || editForm.get('description')!.touched)) {
            <div>
              @if (editForm.get('description')?.errors?.required) {
                <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
              }
            </div>
          }
        </div>
        
        <div class="mb-3">
          <label
          class="form-label"
          for="field_type"
          [ngbTooltip]="'resilientApp.dashboardComponent.help.type' | translate"
          jhiTranslate="resilientApp.dashboardComponent.type"
          >Type</label
          >
          <select class="form-control" name="type" formControlName="type" id="field_type" data-cy="type">
          <option [ngValue]="null">{{ 'resilientApp.DashboardComponentType.null' | translate }}</option>
          @for (dashboardComponentType of dashboardComponentTypes; track $index) {
            <option [value]="dashboardComponentType">{{ 'resilientApp.DashboardComponentType.' + dashboardComponentType | translate }}</option>
          }
          </select>
          @if (editForm.get('type')!.invalid && (editForm.get('type')!.dirty || editForm.get('type')!.touched)) {
          <div>
            @if (editForm.get('type')?.errors?.required) {
            <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
            }
          </div>
          }
        </div>
        
        <div class="mb-3">
          <label
          class="form-label"
          for="field_type"
          [ngbTooltip]="'resilientApp.dashboardComponent.help.view' | translate"
          jhiTranslate="resilientApp.dashboardComponent.view"
          >Type</label
          >
          <select class="form-control" name="view" formControlName="view" id="field_view" data-cy="view">
          <option [ngValue]="null">{{ 'resilientApp.DashboardComponentView.null' | translate }}</option>
          @for (dashboardComponentView of dashboardComponentViews; track $index) {
            <option [value]="dashboardComponentView">{{ 'resilientApp.DashboardComponentView.' + dashboardComponentView | translate }}</option>
          }
          </select>
        </div>
        
        <div class="mb-3">
          <label
          class="form-label"
          for="field_chartType"
          [ngbTooltip]="'resilientApp.dashboardComponent.help.chartType' | translate"
          jhiTranslate="resilientApp.dashboardComponent.chartType"
          >Chart Type</label
          >
          <select class="form-control" name="chartType" formControlName="chartType" id="field_chartType" data-cy="chartType">
          <option [ngValue]="null">{{ 'resilientApp.DashboardComponentChartType.null' | translate }}</option>
          @for (dashboardComponentChartType of dashboardComponentChartTypes; track $index) {
            <option [value]="dashboardComponentChartType">{{ 'resilientApp.DashboardComponentChartType.' + dashboardComponentChartType | translate }}</option>
          }
          </select>
          @if (editForm.get('chartType')!.invalid && (editForm.get('chartType')!.dirty || editForm.get('chartType')!.touched)) {
          <div>
            @if (editForm.get('chartType')?.errors?.required) {
            <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
            }
          </div>
          }
        </div>
        
        <div class="mb-3">
          <div class="form-check form-switch">
            <input type="checkbox" class="form-check-isActive" name="isActive" id="field_isActive" data-cy="isActive" formControlName="isActive" />
            @if (editForm.get('isActive')!.invalid && (editForm.get('isActive')!.dirty || editForm.get('isActive')!.touched)) {
              <div>
              @if (editForm.get('isActive')?.errors?.required) {
              <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
              }
              </div>
            }

            <label
              class="form-label"
              for="field_isActive"
              [ngbTooltip]="'resilientApp.dashboardComponent.help.isActive' | translate"
              jhiTranslate="resilientApp.dashboardComponent.isActive"
              >Is Active ?</label>
          </div>
        </div>

        <div class="mb-3">
          <div class="form-check form-switch">
            <input type="checkbox" class="form-check-isExportable" name="isExportable" id="field_isExportable" data-cy="isExportable" formControlName="isExportable" />
            @if (editForm.get('isExportable')!.invalid && (editForm.get('isExportable')!.dirty || editForm.get('isExportable')!.touched)) {
              <div>
              @if (editForm.get('isExportable')?.errors?.required) {
              <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
              }
              </div>
            }

            <label
              class="form-label"
              for="field_isExportable"
              [ngbTooltip]="'resilientApp.dashboardComponent.help.isExportable' | translate"
              jhiTranslate="resilientApp.dashboardComponent.isExportable"
              >Is Exportable ?</label>
          </div>
        </div>

        <!-- 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>
          <li class="nav-item" role="presentation">
            <a
              class="nav-link"
              [class.active]="currentTab === 'orgs'"
              (click)="setTab('orgs')"
              jhiTranslate="resilientApp.dashboardComponent.tabOrganizations.title"
              >Organizations</a
            >
          </li>
        </ul>
        <!-- Tabs navs -->

        <!-- Tabs content -->
        <div class="tab-content">
          <div
          class="tab-pane fade"
          [class.active]="currentTab === 'details'"
          [class.show]="currentTab === 'details'"
          >
            <button class="btn btn-primary" type="button" (click)="addDashboardComponentDetail()" jhiTranslate="resilientApp.dashboardComponent.tabDetails.add">Add Output</button>
            
            <table class="table draggable-table" formArrayName="dashboardComponentDetails">
              <thead class="thead bg-info">
                <tr>
                  <th scope="col"></th> <!-- Dragable column header -->
                  <th scope="col" jhiTranslate="resilientApp.dashboardComponent.tabDetails.code">Code</th>
                  <th scope="col" jhiTranslate="resilientApp.dashboardComponent.tabDetails.variable">Output</th>
                  <th scope="col" jhiTranslate="resilientApp.dashboardComponent.tabDetails.targetDashboardComponent">Detail</th>
                  <th scope="col" jhiTranslate="resilientApp.dashboardComponent.tabDetails.color">Color</th>
                  <th scope="col" jhiTranslate="resilientApp.dashboardComponent.tabDetails.help">Help</th>
                  <th scope="col"></th>
                </tr>
              </thead>
              <tbody cdkDropList (cdkDropListDropped)="drop($event)">
                <tr cdkDrag *ngFor="let dashboardComponentDetail of dashboardComponentDetails.controls; let i=index" [formGroupName]="i">
                  <td class="drag-handle">☰</td> <!-- Dragable column row -->
                  <td>
                    <input type="text" class="form-control" placeholder="Name" formControlName="name">
                  </td>
                  <td>
                    <ng-select
                      class="form-control drop-down-panel"
                      formControlName="variable"
                      [items]="outputVariablesSharedCollection"
                      [compareWith]="compareOutputVariable"
                      [clearable]="true"
                      [searchFn]="variableSearchFn"
                    >
                      <ng-template ng-label-tmp let-item="item">
                        {{ item.code }} - {{ item.name }}
                      </ng-template>
                      <ng-template ng-option-tmp let-item="item">
                        {{ item.code }} - {{ item.name }}
                      </ng-template>
                    </ng-select>

                    <!--
                    <select
                      class="form-control"
                      formControlName="variable"
                      [compareWith]="compareOutputVariable"
                    >
                    <option [ngValue]="null"></option>
                    @for (outputVariableOption of outputVariablesSharedCollection; track $index) {
                      <option [ngValue]="outputVariableOption">{{ outputVariableOption.code }} - {{ outputVariableOption.name }}</option>
                    }
                    </select>
                    -->
                  </td>
                  <td>
                    <select
                      class="form-control"
                      formControlName="targetDashboardComponent"
                      [compareWith]="compareDashboardComponent"
                    >
                    <option [ngValue]="null"></option>
                    @for (dashboardComponentOption of dashboardComponentSharedCollection; track $index) {
                      <option [ngValue]="dashboardComponentOption">{{ dashboardComponentOption.code }} - {{ dashboardComponentOption.name }}</option>
                    }
                    </select>
                  </td>
                  <td>
                    {{ '' // https://zefoy.github.io/ngx-color-picker/ }}
                    <input type="text" formControlName="color"  style="max-width: 50px;"
                          [colorPicker]="dashboardComponentDetail.get('color')?.value"
                          (colorPickerChange)="dashboardComponentDetail.get('color')?.setValue($event)" 
                          [style.background]="dashboardComponentDetail.get('color')?.value" 
                    />
                  </td>
                  <td>
                    <input type="text" class="form-control" formControlName="help">
                  </td>
                  <td>
                    <button type="button" (click)="removeDashboardComponentDetail(i)" class="btn btn-danger btn-sm">
                      <fa-icon icon="times"></fa-icon>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div
          class="tab-pane fade"
          [class.active]="currentTab === 'orgs'"
          [class.show]="currentTab === 'orgs'"
          >
            <button class="btn btn-primary" type="button" (click)="addDashboardComponentOrganization()" jhiTranslate="resilientApp.dashboardComponent.tabOrganizations.add">Add Organization</button>
            
            <table class="table" formArrayName="dashboardComponentOrganizations">
              <thead class="thead bg-info">
                <tr>
                  <th scope="col" jhiTranslate="resilientApp.dashboardComponent.tabOrganizations.organization">Organization</th>
                  <th scope="col"></th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let dashboardComponentOrganization of dashboardComponentOrganizations.controls; let i=index" [formGroupName]="i">
                  <td>
                    <select
                      class="form-control"
                      formControlName="organization"
                      [compareWith]="compareOrganization"
                    >
                    <option [ngValue]="null"></option>
                    @for (organizationOption of organizationsSharedCollection; track $index) {
                      <option [ngValue]="organizationOption">{{ organizationOption.code }} - {{ organizationOption.name }}</option>
                    }
                    </select>
                  </td>

                  <td>
                    <button type="button" (click)="removeDashboardComponentOrganization(i)" class="btn btn-danger btn-sm">
                      <fa-icon icon="times"></fa-icon>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- Tabs content -->
      </div>

      <div>
        <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" (click)="previousState()">
          <fa-icon icon="ban"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancelar</span>
        </button>

        <button
          *ngIf="(editForm.controls.id.value!=null && hasUpdatePermission(Resources.DASHBOARD_COMPONENT))
                ||
                (editForm.controls.id.value==null && hasCreatePermission(Resources.DASHBOARD_COMPONENT))"
          type="submit"
          id="save-entity"
          data-cy="entityCreateSaveButton"
          [disabled]="editForm.invalid || isSaving || (editForm.controls.id.value==null && !canCreate()) || (editForm.controls.id.value!=null && !canUpdate(dashboardComponent))"
          class="btn btn-primary"
        >
          <fa-icon icon="save"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Guardar</span>
        </button>
      </div>
    </form>
  </div>
</div>