<c8y-ui-title-set title="'Data connectors' | translate"></c8y-ui-title-set>

<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    icon="c8y-data-broker"
    label="{{ 'Data connectors' | translate }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    icon="c8y-data-broker"
    label="{{ 'Data broker' | translate }}"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<c8y-ui-action-bar-set>
  <li
    class="navbar-form hidden-xs"
    action-bar-position="left"
  >
    <c8y-list-display-control
      list-length="vm.connectors.length"
      on-list-class-change="vm.listClass = listClass"
    ></c8y-list-display-control>
  </li>

  <li
    class="navbar-form"
    action-bar-position="left"
  >
    <div class="input-group input-group-search">
      <input
        class="form-control"
        title="{{ 'Filter connectors' | translate }}"
        id="filter"
        placeholder="{{ 'Filter' | translate }}…"
        type="search"
        ng-model="vm.searchString"
      />
      <span class="input-group-addon">
        <i
          c8y-icon="search"
          ng-if="vm.searchString.length === 0 || !vm.searchString"
        ></i>
        <i
          class="text-muted"
          c8y-icon="times"
          ng-if="vm.searchString.length > 0"
          ng-click="vm.searchString = ''"
        ></i>
      </span>
      <span
        class="sr-only"
        for="filter"
        translate
      >
        Filter connectors
      </span>
    </div>
  </li>

  <a
    class="btn btn-link"
    title="{{ 'Add data connector' | translate }}"
    type="button"
    ng-href="#{{ vm.ROUTE_NEW_CONNECTOR }}"
  >
    <i c8y-icon="plus-circle"></i>
    {{ 'Add data connector' | translate }}
  </a>
  <button
    class="btn btn-link"
    title="{{ 'Reload' | translate }}"
    type="button"
    ng-click="vm.reload()"
  >
    <i c8y-icon="refresh"></i>
    {{ 'Reload' | translate }}
  </button>
</c8y-ui-action-bar-set>

<c8y-help src="/docs/data-broker/data-broker-application/#data-connectors"></c8y-help>

<!-- Empty state -->
<c8y-ui-empty-state
  [icon]="'c8y-connector-out'"
  [title]="'No data connectors to display.' | translate"
  [subtitle]="'Click below to add your first data connector.' | translate"
  ng-if="vm.connectors.length === 0"
>
  <a
    class="btn btn-primary"
    title="{{ 'Add data connector' | translate }}"
    ng-href="#{{ vm.ROUTE_NEW_CONNECTOR }}"
  >
    {{ 'Add data connector' | translate }}
  </a>
</c8y-ui-empty-state>

<!-- list -->
<div
  class="card-group"
  ng-class="vm.listClass"
>
  <div
    class="page-sticky-header hidden-xs"
    ng-if="vm.connectors.length > 0"
  >
    <div class="d-flex">
      <div class="card-header">
        <div class="card-icon"></div>
        <span translate>Data connector</span>
      </div>
      <div class="card-block card-column-70">
        <div class="card-column-40">
          <span translate>Target URL</span>
        </div>
        <div class="card-column-60">
          <span translate>Description</span>
        </div>
      </div>

      <div class="card-footer card-column-30">
        <div class="d-flex flex-grow">
          <div class="card-column-80 flex-grow">
            <span translate>Status</span>
          </div>
          <div class="card-column-20">
            <span translate>Filters</span>
          </div>
        </div>
      </div>

      <div class="card-actions-group m-r-8"></div>
    </div>
  </div>

  <div
    class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
    ng-repeat="connector in vm.connectors | orderBy:'name' | filter:vm.searchString as filtered"
  >
    <div class="card card--d-col">
      <div
        class="card-actions"
        ng-click="$event.stopPropagation();"
      >
        <div
          class="dropdown settings"
          uib-dropdown
        >
          <button
            class="dropdown-toggle c8y-dropdown"
            title="{{ 'Actions' | translate }}"
            aria-haspopup="true"
            type="button"
            uib-dropdown-toggle
            ng-click="::$event.stopPropagation()"
          >
            <span>
              <i c8y-icon="ellipsis-v"></i>
            </span>
          </button>
          <ul
            class="dropdown-menu dropdown-menu-right"
            uib-dropdown-menu
          >
            <li>
              <button
                title="{{ 'Edit' | translate }}"
                type="button"
                ng-click="::$event.stopPropagation();vm.editConnector(connector.id)"
              >
                <i c8y-icon="edit"></i>
                {{ 'Edit' | translate }}
              </button>
            </li>
            <li>
              <button
                title="{{ 'Duplicate' | translate }}"
                type="button"
                ng-click="::$event.stopPropagation();vm.duplicateConnector(connector)"
              >
                <i c8y-icon="clone"></i>
                {{ 'Duplicate' | translate }}
              </button>
            </li>
            <li>
              <button
                title="{{ 'Delete' | translate }}"
                type="button"
                ng-click="::$event.stopPropagation();vm.deleteConnector(connector)"
              >
                <i c8y-icon="delete"></i>
                {{ 'Delete' | translate }}
              </button>
            </li>
          </ul>
        </div>
      </div>

      <div
        class="card-header separator"
        ng-click="vm.editConnector(connector.id)"
        ng-init="waitingStatus = vm.MAPPED_STATUS.WAITING; activatingStatus = vm.MAPPED_STATUS.ACTIVATING;"
      >
        <div class="card-icon">
          <i c8y-icon="c8y-connector-out c8y-icon-duocolor"></i>
        </div>
        <div
          class="text-truncate card-title"
          title="{{ connector.name }}"
        >
          {{ connector.name }}
        </div>
      </div>

      <div class="card-block card-column-70 m-r-0">
        <div class="card-column-40 text-truncate">
          <span
            class="text-label-small"
            title="{{ connector.instanceUrl }}"
            translate
          >
            Target URL
          </span>
          <span>
            <small title="{{ connector.instanceUrl }}">
              {{ connector.instanceUrl }}
            </small>
          </span>
        </div>
        <div class="card-column-60 text-truncate-wrap">
          <span
            class="text-label-small"
            title="{{ connector.description }}"
            translate
          >
            Description
          </span>
          <span ng-if="!connector.description">
            <small>
              <em
                class="text-muted"
                title="{{ 'None' | translate }}"
              >
                {{ 'None' | translate }}
              </em>
            </small>
          </span>
          <small>
            {{ connector.description }}
          </small>
        </div>
      </div>

      <div class="card-footer separator card-column-30">
        <!-- status -->
        <div class="d-flex flex-grow a-i-center">
          <div class="card-column-80 flex-grow">
            <div ng-if="connector.visibleStatus.value === waitingStatus.value">
              <i
                class="icon-spin text-warning"
                c8y-icon="circle-o-notch"
              ></i>
              <span>
                {{ waitingStatus.label | translate }}
              </span>
              <button
                class="btn-help btn-help--sm"
                aria-label="{{ 'Help' | translate }}"
                type="button"
                uib-popover="{{ 'The target URL did not accept the connection yet.' | translate }}"
                popover-placement="right"
                popover-trigger="'focus'"
                popover-append-to-body="true"
              ></button>
            </div>
            <div ng-if="connector.visibleStatus.value === activatingStatus.value">
              <i
                class="icon-spin text-warning"
                c8y-icon="circle-o-notch"
              ></i>
              <span class="text-warning">
                {{ activatingStatus.label | translate }}
              </span>
              <button
                class="btn-help btn-help--sm"
                aria-label="{{ 'Help' | translate }}"
                type="button"
                uib-popover="{{ vm.getStatusTooltip(connector) | translate }}"
                popover-placement="right"
                popover-trigger="'focus'"
                popover-append-to-body="true"
              ></button>
            </div>
            <div
              class="d-flex a-i-center"
              ng-if="
                connector.visibleStatus.value !== waitingStatus.value &&
                connector.visibleStatus.value !== activatingStatus.value
              "
            >
              <label class="c8y-switch c8y-switch--inline" ng-click="vm.toggleConnectorStatus($event, connector)"
              >
                <input
                  type="checkbox"
                  ng-checked="connector.visibleStatus.value === vm.MAPPED_STATUS.ACTIVE.value || connector.visibleStatus.value === vm.MAPPED_STATUS.PENDING.value"
                />
                <span></span>
                <span>
                  {{ connector.visibleStatus.label | translate }}
                </span>
              </label>
              <button
                class="btn-help btn-help--sm"
                aria-label="{{ 'Help' | translate }}"
                type="button"
                uib-popover="{{ vm.getStatusTooltip(connector) | translate }}"
                popover-placement="right"
                popover-trigger="'focus'"
                popover-append-to-body="true"
                ng-click="$event.stopPropagation();"
              ></button>
            </div>
          </div>

          <div class="card-column-20">
            <span
              class="text-label-small"
              translate
            >
              Filters
            </span>
            <span
              class="badge badge-info"
              ng-bind="::(connector.filters && connector.filters.length || 0)"
              data-cy="connectors--filterLength"
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- no results empty state -->
<c8y-ui-empty-state
  [icon]="'search'"
  [title]="'No results to display.' | translate"
  [subtitle]="'Refine your search terms or check your spelling.' | translate"
  ng-if="filtered.length === 0 && vm.searchString.length > 0"
></c8y-ui-empty-state>
