<ng-container *transloco="let t; prefix:'manage-devices'">

  <!-- Email Devices -->
  <ng-container>
    <div class="position-relative">
      <button class="btn btn-outline-primary position-absolute custom-position" [disabled]="isReadOnly()" (click)="addDevice()">
        <i class="fa fa-plus" aria-hidden="true"></i><span class="phone-hidden ms-1">{{t('add')}}</span>
      </button>
    </div>

    <h3 class="my-3">{{t('sendto-device-header')}}</h3>

    <p>{{t('description')}}</p>

    @if (!hasEmailSetup()) {
      <div class="alert alert-warning" role="alert">
        <strong>{{t('warning')}}</strong> {{t('email-setup-alert')}}
      </div>
    }

    <app-responsive-table [rows]="devices()" [trackByFn]="trackBy">
      <ng-template #tableTemplate>
        <ngx-datatable
          class="bootstrap"
          [rows]="devices()"
          [columnMode]="'flex'"
          rowHeight="auto"
          [footerHeight]="50"
          [limit]="15"
        >

          <ngx-datatable-column prop="name" [sortable]="true" [draggable]="false" [resizeable]="false" [flexGrow]="3">
            <ng-template let-column="column" ngx-datatable-header-template>
              {{t('name-label')}}
            </ng-template>
            <ng-template let-item="row" ngx-datatable-cell-template>
              {{ item.name }}
            </ng-template>
          </ngx-datatable-column>


          <ngx-datatable-column prop="emailAddress" [sortable]="true" [draggable]="false" [resizeable]="false" [flexGrow]="1">
            <ng-template let-column="column" ngx-datatable-header-template>
              {{t('email-label')}}
            </ng-template>
            <ng-template let-item="row" ngx-datatable-cell-template>
              {{ item.emailAddress }}
            </ng-template>
          </ngx-datatable-column>

          <ngx-datatable-column prop="platform" [sortable]="false" [draggable]="false" [resizeable]="false" [flexGrow]="1">
            <ng-template let-column="column" ngx-datatable-header-template>
              {{t('platform-label')}}
            </ng-template>
            <ng-template let-item="row" ngx-datatable-cell-template>
              {{ item.platform | devicePlatform }}
            </ng-template>
          </ngx-datatable-column>

          <ngx-datatable-column name="actions" [sortable]="false" [draggable]="false" [resizeable]="false" [flexGrow]="1">
            <ng-template let-column="column" ngx-datatable-header-template />
            <ng-template let-item="row" ngx-datatable-cell-template>
              <div class="float-end">
                <button class="btn btn-danger  me-2" (click)="deleteDevice(item)">
                  <i class="fa fa-trash" aria-hidden="true"></i>
                  <span class="visually-hidden">{{t('delete')}}</span>
                </button>

                <button class="btn btn-primary" (click)="editDevice(item)">
                  <i class="fa fa-pen" aria-hidden="true"></i>
                  <span class="visually-hidden">{{t('edit')}}</span>
                </button>
              </div>
            </ng-template>
          </ngx-datatable-column>
        </ngx-datatable>
      </ng-template>

      <ng-template #cardTemplate let-item let-idx="index">
        <div class="card mb-3">
          <div class="card-body">
            <div class="d-flex justify-content-between align-items-start mb-3">
              <h5 class="card-title mb-0">{{item.name}}</h5>

              <div>
                <button class="btn btn-primary btn-sm me-2" (click)="editDevice(item)">
                  <i class="fa fa-pen" aria-hidden="true"></i>
                  <span class="visually-hidden">{{t('edit')}}</span>
                </button>
                <button class="btn btn-danger btn-sm" (click)="deleteDevice(item)">
                  <i class="fa fa-trash" aria-hidden="true"></i>
                  <span class="visually-hidden">{{t('delete')}}</span>
                </button>
              </div>
            </div>

            <div class="row g-2">
              <div class="col-12">
                <div class="text-muted small">{{t('email-label')}}</div>
                <div class="text-break">{{item.emailAddress}}</div>
              </div>

              <div class="col-12">
                <div class="text-muted small">{{t('platform-label')}}</div>
                <div>{{item.platform | devicePlatform}}</div>
              </div>
            </div>
          </div>
        </div>
      </ng-template>

    </app-responsive-table>
  </ng-container>

  <div class="setting-section-break"></div>

  <!-- Client Devices -->
  <ng-container>
    <h3 class="my-3">{{t('client-devices-header')}}</h3>
    <div class="row">
      @for(clientDevice of clientDevices(); track clientDevice.id) {
        <div class="col-md-6 col-xs-12 mb-4">
          <app-client-device-card [clientDevice]="clientDevice" (deviceDeleted)="loadClientDevices()" (refresh)="loadClientDevices()" />
        </div>
      } @empty {
        <app-loading/>
      }
    </div>


  </ng-container>

</ng-container>
