<!-- GUIPropertiesViewAndSortCustomizer -->
<!-- TreeViewCustomizer -->
<div>
  <h2 id="page-heading" data-cy="OrganizationHeading">
    <span jhiTranslate="resilientApp.organization.home.title">Organizations</span>

    <div class="d-flex justify-content-end">
      <button class="btn btn-info me-2" (click)="load()" [disabled]="isLoading">
        <fa-icon icon="sync" [spin]="isLoading"></fa-icon>
        <span jhiTranslate="resilientApp.organization.home.refreshListLabel">Refresh list</span>
      </button>

      <button
        id="jh-create-entity"
        data-cy="entityCreateButton"
        class="btn btn-primary jh-create-entity create-organization"
        [routerLink]="['/organization/new']"
      >
        <fa-icon icon="plus"></fa-icon>
        <span jhiTranslate="resilientApp.organization.home.createLabel">Criar novo(a) Organization</span>
      </button>
    </div>
  </h2>

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

  <jhi-alert></jhi-alert>

  @if (organizations?.length === 0) {
    <div class="alert alert-warning" id="no-result">
      <span jhiTranslate="resilientApp.organization.home.notFound">Nenhum Organizations encontrado</span>
    </div>
  }

  @if (organizations && organizations.length > 0) {
  <!-- Treeview - BEGIN -->
  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="tree-view">
    <!-- This is the tree node template for leaf nodes -->
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (mouseenter)="onMouseEnter(node)" (mouseleave)="onMouseLeave(node)" >
      <!-- use a disabled button to provide padding for tree leaf -->
      <button mat-icon-button disabled></button>

      <img 
        *ngIf="getType(node.org) as orgType"
        [src]="'data:' + orgType.iconContentType + ';base64,' + orgType.icon"
        style="max-height: 15px; margin-right:3px;"
        alt="{{ orgType.description }}"
        title="{{ orgType.description }}"
        class="org-type-icon"
      />
      <span class="tree-node-title">{{node.name}}</span>
      
      <organization-tree-actions *ngIf="showTreeActionsId == node.id" [node]="node" (actionDeletedEvent)="handleActionDeletedEvent($event)"></organization-tree-actions>	  
    </mat-tree-node>
     
    <!-- This is the tree node template for expandable nodes -->
    <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding  (mouseenter)="onMouseEnter(node)" (mouseleave)="onMouseLeave(node)">
      <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
        <mat-icon class="mat-icon-rtl-mirror">
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button>
      
      <img 
        *ngIf="getType(node.org) as orgType"
        [src]="'data:' + orgType.iconContentType + ';base64,' + orgType.icon"
        style="max-height: 15px; margin-right:3px;"
        alt="{{ orgType.description }}"
        title="{{ orgType.description }}"
        class="org-type-icon"
      />      
      <span class="tree-node-title">{{node.name}}</span>
      
      <organization-tree-actions *ngIf="showTreeActionsId == node.id" [node]="node" (actionDeletedEvent)="handleActionDeletedEvent($event)"></organization-tree-actions>
    </mat-tree-node>
  </mat-tree>
  <!-- Treeview - END -->
  }
  
  @if (false && organizations && organizations.length > 0) {
    <div class="table-responsive table-entities" id="entities">
      <table class="table table-striped" aria-describedby="page-heading">
        <thead>
          <tr jhiSort [sortState]="sortState" (sortChange)="navigateToWithComponentValues($event)">
            <th scope="col" jhiSortBy="organizationType.name">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.organization.organizationType">Organization Type</span>
                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="code">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.organization.code">Code</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="name">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.organization.name">Name</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="parent.name">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.organization.parent">Parent</span>
                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>

<!-- HIDDEN Columns 
            <th scope="col" jhiSortBy="id">
              <div class="d-flex">
                <span jhiTranslate="global.field.id">Código</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="image">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.organization.image">Image</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="inputInventory">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.organization.inputInventory">Input Inventory</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="outputInventory">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.organization.outputInventory">Output Inventory</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="version">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.organization.version">Version</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="user.login">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.organization.user">User</span>
                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
--> 

            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          @for (organization of organizations; track trackId) {
            <tr data-cy="entityTable">
              <td>
                @if (organization.organizationType) {
                  <div>
                    <a [routerLink]="['/organization-type', organization.organizationType.id, 'view']">{{
                      organization.organizationType.name
                    }}</a>
                  </div>
                }
              </td>
              <td>{{ organization.code }}</td>
              <td>{{ organization.name }}</td>
              <td>
                @if (organization.parent) {
                  <div>
                    <a [routerLink]="['/organization', organization.parent.id, 'view']">{{ organization.parent.name }}</a>
                  </div>
                }
              </td>

<!-- HIDDEN Columns 
              <td>
                <a [routerLink]="['/organization', organization.id, 'view']">{{ organization.id }}</a>
              </td>
              <td>
                @if (organization.image) {
                  <a (click)="openFile(organization.image, organization.imageContentType)">
                    <img
                      [src]="'data:' + organization.imageContentType + ';base64,' + organization.image"
                      style="max-height: 30px"
                      alt="organization"
                    />
                  </a>
                  <span>{{ organization.imageContentType }}, {{ byteSize(organization.image) }}</span>
                }
              </td>
              <td>{{ organization.inputInventory }}</td>
              <td>{{ organization.outputInventory }}</td>
              <td>{{ organization.version }}</td>
              <td>
                {{ organization.user?.login }}
              </td>
--> 

              <td class="text-end">
                <div class="btn-group">
                  <a [routerLink]="['/organization', organization.id, 'view']" class="btn btn-info btn-sm" data-cy="entityDetailsButton">
                    <fa-icon icon="eye"></fa-icon>
                    <span class="d-none d-md-inline" jhiTranslate="entity.action.view">Visualizar</span>
                  </a>

                  <a [routerLink]="['/organization', organization.id, 'edit']" class="btn btn-primary btn-sm" data-cy="entityEditButton">
                    <fa-icon icon="pencil-alt"></fa-icon>
                    <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Editar</span>
                  </a>

                  <button type="submit" (click)="delete(organization)" class="btn btn-danger btn-sm" data-cy="entityDeleteButton">
                    <fa-icon icon="times"></fa-icon>
                    <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Eliminar</span>
                  </button>
                </div>
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }
</div>
