<section>
  <h2>{{ strings['settings_boardAdministration'] }}</h2>

  <div class="row">
    <h3>{{ strings['settings_currentBoards']  }}</h3>

    <div class="small right filters" *ngIf="boards.length">
      <label class="inline right">
        {{ strings['settings_showByUser'] }}:
        <select class="autosize" [(ngModel)]="userFilter"
          (change)="filterBoards()">
          <option value="-1">{{ strings['settings_anyUser'] }}</option>
          <option *ngFor="let user of users"
            [value]="user.id">
            {{ user.username }}
          </option>
        </select>
      </label>

      <label class="inline right">
        {{ strings['settings_filterBy'] }}:
        <select class="autosize" [(ngModel)]="statusFilter"
          (change)="filterBoards()">
          <option value="-1">{{ strings['settings_allBoards'] }}</option>
          <option value="1">{{ strings['settings_active'] }}</option>
          <option value="0">{{ strings['settings_inactive'] }}</option>
        </select>
      </label>

      <label class="inline right">
        {{ strings['sortBy'] }}:
        <select class="autosize" [(ngModel)]="sortFilter"
          (change)="filterBoards()">
          <option value="name-asc">{{ strings['settings_name'] }} (A-Z)</option>
          <option value="name-desc">{{ strings['settings_name'] }} (Z-A)</option>
          <option value="id-desc">{{ strings['settings_creationNew'] }}</option>
          <option value="id-asc">{{ strings['settings_creationOld'] }}</option>
        </select>
      </label>
    </div>

    <table class="alternating">
      <thead>
        <tr>
          <th>{{ strings['settings_name'] }}</th>
          <th>{{ strings['settings_columns'] }}</th>
          <th>{{ strings['settings_categories'] }}</th>
          <th>{{ strings['settings_users'] }}</th>
          <th>{{ strings['settings_actions'] }}</th>
        </tr>
      </thead>

      <tbody *ngIf="!loading">
        <tr *ngIf="boards.length === 0">
          <td colspan="5" class="center"
            [innerHTML]="noBoardsMessage"></td>
        </tr>
        <tr *ngFor="let board of displayBoards">
          <td>
            <a href="javscript:" [routerLink]="['/boards/' +  board.id]">
              {{ board.name }}</a>
          </td>

          <td>
            <ul>
              <li *ngFor="let col of board.columns">
                {{ col.name }}
                <span class="badge" title="Task Count">
                  {{ col.tasks ? col.tasks.length : 0 }}</span>
              </li>
            </ul>
          </td>

          <td>
            <ul *ngIf="board.categories && board.categories.length">
              <li *ngFor="let cat of board.categories">
                {{ cat.name }}
                <span class="badge"
                  [title]="strings['settings_defaultTaskColor']"
                  [style.background-color]="getColor(cat)">
                  &nbsp;
                </span>
              </li>
            </ul>
          </td>

          <td>
            <ul>
              <li *ngFor="let user of board.users">
                {{ user.username }}
              </li>
            </ul>
          </td>

          <td>
            <span *ngIf="activeUser && activeUser.security_level < 3">
              <a class="padded" href="javascript:"
                title="{{ strings['settings_editBoard'] }}"
                (click)="showModal('Edit', board)">
                <i class="icon icon-edit color-primary"></i>
              </a>
              <a class="padded" href="javascript:"
                title="{{ strings['settings_removeBoard'] }}"
                (click)="showConfirmModal(board)">
                <i class="icon icon-trash-empty
                  color-secondary"></i>
              </a>
              <label class="padded">
                <input type="checkbox" class="hidden"
                (change)="toggleBoardStatus(board)"
                [ngModel]="board.is_active">
                <span class="toggle"></span>
                {{ board.is_active
                ? strings['settings_active']
                : strings['settings_inactive'] }}
              </label>
            </span>
          </td>
        </tr>
      </tbody>
    </table>

    <div *ngIf="loading" class="center">
      <div class="spinner"></div>
    </div>

    <button *ngIf="activeUser && activeUser.security_level === 1"
      (click)="showModal('Add')">
      <i class="icon icon-plus"></i> {{ strings['settings_addBoard'] }}
    </button>
  </div>
</section>

<tb-modal modal-title="{{ strings['settings_confirmBoardRemoval'] }}"
  blocking="true" modal-id="{{ MODAL_CONFIRM_ID }}">

  <div class="center">
    {{ strings['settings_removeBoardWarning'] }}<br>{{ strings['settings_continue'] }}
  </div>

  <div class="buttons">
    <button class="flat"
      (click)="removeBoard()"
      [disabled]="saving">{{ strings['yes'] }}</button>
    <button #defaultAction #focusMe
      (click)="modal.close(MODAL_CONFIRM_ID)"
      [disabled]="saving">{{ strings['no'] }}</button>
  </div>
</tb-modal>

<tb-modal modal-title="{{ modalProps.title === 'Add' ?
  strings['settings_addBoard'] : strings['settings_editBoard'] }}"
  modal-id="{{ MODAL_ID }}" wide="true">
  <label>
    {{ strings['settings_boardName'] }}
    <input #focusMe type="text" name="board-name"
    placeholder="Board Name" [(ngModel)]="modalProps.name">
  </label>

  <div class="half-modal">
    <label>{{ strings['settings_columns'] }}</label>
    <ul class="modal-list" [hidden]="!modalProps.columns.length"
      cdkDropList [cdkDropListData]="modalProps.columns"
      (cdkDropListDropped)="dropColumns($event)">
      <li class="drag-item" cdkDrag
        *ngFor="let column of modalProps.columns; let i = index">
        <i class="icon icon-resize-vertical" cdkDragHandle></i>
        <tb-inline-edit [text]="getPropertyValue('columns', 'name', i)"
          (edit)="onPropertyEdit('columns', 'name', i, $event)"></tb-inline-edit>
        <span class="actions">
          <i class="icon icon-trash-empty color-secondary"
            title="{{ strings['settings_removeColumn'] }}"
            (click)="modalProps.removeColumn(column)"></i>
        </span>
      </li>
    </ul>

    <div class="quick-add">
      <form>
        <input type="text" name="new-column"
        placeholder="{{ strings['settings_columnName'] }}"
        (keyup.enter)="cancelEnterKey($event)"
        [(ngModel)]="modalProps.newColumnName">
        <button type="submit" class="flat"
          title="{{ strings['settings_addColumn'] }}"
          (click)="modalProps.addColumn()">
          <i class="icon icon-plus"></i>
        </button>
      </form>
    </div>
  </div>

  <div class="half-modal">
    <label>{{ strings['settings_categories'] }}</label>
    <ul *ngIf="modalProps.categories.length" class="modal-list category-list">
      <li *ngFor="let category of modalProps.categories; let i = index">
        <input type="color" [title]="strings['settings_defaultTaskColor']"
        [ngModel]="getColor(category)"
        (ngModelChange)="setCategoryColor($event, i)">
        <tb-inline-edit [text]="getPropertyValue('categories', 'name', i)"
          (edit)="onPropertyEdit('categories', 'name', i, $event)"></tb-inline-edit>
        <span class="actions">
          <i class="icon icon-trash-empty color-secondary"
            title="{{ strings['settings_removeCategory'] }}"
            (click)="modalProps.removeCategory(category)"></i>
        </span>
      </li>
    </ul>

    <div class="quick-add categories">
      <form>
        <input type="text" name="new-category"
        placeholder="{{ strings['settings_categoryName'] }}"
        (keyup.enter)="cancelEnterKey($event)"
        [(ngModel)]="modalProps.newCategoryName">
        <input type="color" name="category-default-color"
        [title]="strings['settings_defaultTaskColor']"
        [(ngModel)]="modalProps.categoryDefaultColor">
        <button type="submit" class="flat" [title]="strings['settings_addCategory']"
          (click)="modalProps.addCategory()">
          <i class="icon icon-plus"></i>
        </button>
      </form>
    </div>
  </div>

  <div class="clearfix"></div>

  <div class="issue-trackers">
    <label>
      {{ strings['settings_issueTrackers'] }}
      <i class="icon icon-help-circled"
        [attr.data-help]="strings['settings_issueTrackersHelp']"></i>
    </label>

    <ul *ngIf="modalProps.issue_trackers.length" class="modal-list">
      <li class="double-edit"
        *ngFor="let tracker of modalProps.issue_trackers; let i = index">
        <tb-inline-edit class="first"
          [text]="getPropertyValue('issue_trackers', 'url', i)"
          (edit)="onPropertyEdit('issue_trackers', 'url', i, $event)">
        </tb-inline-edit>
        <tb-inline-edit class="last"
          [text]="getPropertyValue('issue_trackers', 'regex', i)"
          (edit)="onPropertyEdit('issue_trackers', 'regex', i, $event)">
        </tb-inline-edit>
        <span class="actions">
          <i class="icon icon-trash-empty color-secondary"
            (click)="modalProps.removeIssueTracker(tracker)"></i>
        </span>
      </li>
    </ul>

    <div>
      <form>
        <input type="text" name="issue-tracker"
        placeholder="{{ strings['settings_issueTrakcerUrl'] }}"
        (keyup.enter)="cancelEnterKey($event)"
        [(ngModel)]="modalProps.issueTrackerUrl">
        <input type="text" name="issue-tracker-bug-id"
        placeholder="{{ strings['settings_issueTrackerRegExp'] }}"
        (keyup.enter)="cancelEnterKey($event)"
        [(ngModel)]="modalProps.issueTrackerBugId">
        <button type="submit" class="flat" [title]="strings['settings_addIssueTracker']"
          (click)="modalProps.addIssueTracker()">
          <i class="icon icon-plus"></i>
        </button>
      </form>
    </div>
  </div>

  <div class="users">
    <label>{{ strings['settings_selectUsers'] }}</label>
    <div class="clearfix"></div>
    <label class="user-select" *ngFor="let user of users; let i = index">
      <input type="checkbox" [(ngModel)]="users[i].selected">
      {{ user.username }}
      <span *ngIf="user.security_level === 2">*</span>
    </label>

    <div>
      <em *ngIf="hasBAUsers"><strong>*</strong>
        {{ strings['settings_boardAdminMessage'] }}<br></em>
      <em>{{ strings['settings_adminAccessMessage'] }}</em>
    </div>
  </div>

  <div class="buttons">
    <button #defaultAction (click)="addEditBoard()" [disabled]="saving">
      <i class="icon"
        [ngClass]="{ 'icon-plus': modalProps.title === 'Add', 'icon-floppy': modalProps.title !== 'Add' }"></i>
      {{ modalProps.title === 'Add'
      ? strings['settings_addBoard']
      : strings['settings_saveBoard'] }}
    </button>
    <button class="flat" (click)="modal.close(MODAL_ID)">
      {{ strings['cancel'] }}
    </button>
  </div>
</tb-modal>

