<h1 mat-dialog-title class="prevent-select">Vinculación de contadores</h1>
<div mat-dialog-content class="prevent-select">
  <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
    <mat-spinner align="center"></mat-spinner>
    <h3>Cargando datos ...</h3>
  </div>
  <div class="has-error animated fadeIn pt-64" *ngIf="!isLoading && hasError">
    <mat-icon class="red_primary_font">error</mat-icon>
    <h2>{{ errorStr }}</h2>
  </div>
  <div class="related-counters-list-group-container animated fadeIn" cdkDropListGroup *ngIf="!isLoading && !hasError">
    <div class="list-container">
      <h2>Contadores no relacionados</h2>
      <div cdkDropList [cdkDropListData]="counters" class="drop-list" (cdkDropListDropped)="drop($event)">
        <div class="drop-box" cdkDrag *ngFor="let counter of counters">
          Contador #{{ counter.ID_CONTADOR }}
        </div>
        <div class="drop-box" *ngIf="counters.length == 0">No hay más contadores registrados</div>
      </div>
    </div>
    <div class="list-container">
      <h2>Contadores relacionados</h2>
      <div cdkDropList [cdkDropListData]="relatedCounters" class="drop-list" (cdkDropListDropped)="drop($event)">
        <div class="drop-box" cdkDrag *ngFor="let counter of relatedCounters">
          Contador #{{ counter.ID_CONTADOR }}
        </div>
        <div class="drop-box" *ngIf="relatedCounters.length == 0">No hay contadores relacionados</div>
      </div>
    </div>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
  <button mat-button (click)="closeRelatedCounters()">Guardar cambios</button>
</div>