<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    icon="c8y-smart-rest"
    label="{{ 'SmartREST templates' | translate }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    icon="c8y-device-protocols"
    label="{{ 'Device types' | translate }}"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<div ng-controller="SmartRestListCtrl as $ctrl">
  <c8y-ui-action-bar-set>
    <li
      class="navbar-form hidden-xs"
      action-bar-position="left"
    >
      <c8y-list-display-control
        list-length="vm.simulators.length"
        on-list-class-change="vm.listClass = listClass"
      ></c8y-list-display-control>
    </li>

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

    <c8y-smart-rest-add-template
      on-added="$ctrl.onTemplateAdded(template)"
    ></c8y-smart-rest-add-template>

    <c8y-smart-rest-import-template
      on-imported="$ctrl.onTemplateImported(template)"
    ></c8y-smart-rest-import-template>

    <button
      class="btn btn-link"
      title="{{ 'Reload' | translate }}"
      type="button"
      ng-click="$ctrl.loadList()"
    >
      <i
        ng-class="{ 'icon-spin': $ctrl.loading }"
        c8y-icon="refresh"
      ></i>
      <span translate>Reload</span>
    </button>
  </c8y-ui-action-bar-set>

  <c8y-help
    src="/docs/device-management-application/smartrest-templates/#smartrest-templates"
  ></c8y-help>

  <!-- empty state -->
  <c8y-ui-empty-state
    [icon]="'c8y-smart-rest'"
    [title]="'No SmartREST templates to display.' | translate"
    [subtitle]="'Click below to add your first SmartREST template.' | translate"
    ng-if="$ctrl.templates.length === 0"
  >
    <c8y-smart-rest-add-template
      on-added="$ctrl.onTemplateAdded(template)"
    ></c8y-smart-rest-add-template>
    <c8y-smart-rest-import-template
      on-imported="$ctrl.onTemplateImported(template)"
    ></c8y-smart-rest-import-template>

    <p c8y-guide-docs>
      <small translate>
        Find out more in the
        <a
          c8y-guide-href="/docs/device-management-application/smartrest-templates/#smartrest-templates"
        >
          user documentation
        </a>
        .
      </small>
    </p>
  </c8y-ui-empty-state>

  <div
    class="card-group"
    ng-class="vm.listClass"
  >
    <div
      class="page-sticky-header hidden-xs"
      ng-if="$ctrl.templates.length > 0"
    >
      <div class="d-flex">
        <div class="card-header card-column-40">
          <span class="card-icon"></span>
          <p translate>Template</p>
        </div>
        <div class="card-block card-column-30 m-r-0">
          <div class="card-column-30 max-width-100">
            <div
              class="text-left"
              translate
            >
              ID
            </div>
          </div>
        </div>
        <div class="card-footer card-column-30">
          <div class="d-flex fit-w">
            <div class="card-column-50 flex-grow p-r-16">
              {{ 'Messages' | translate }}
            </div>
            <div class="card-column-50">
              {{ 'Responses' | translate }}
            </div>
          </div>
        </div>
        <div class="card-actions-group"></div>
      </div>
    </div>
    <div
      class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
      ng-repeat="template in $ctrl.templates | orderBy:'name' | filter:vm.searchString as filtered"
    >
      <div
        class="card"
        ng-click="$ctrl.detail(template)"
      >
        <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"
              data-cy="list--smart-rest-actions"
              uib-dropdown-toggle
            >
              <span>
                <i c8y-icon="ellipsis-v"></i>
              </span>
            </button>
            <ul
              class="dropdown-menu dropdown-menu-right"
              uib-dropdown-menu
            >
              <li>
                <button
                  title="{{ 'Edit' | translate }}"
                  ng-click="$ctrl.detail(template)"
                  data-cy="list--edit-btn"
                >
                  <i c8y-icon="pencil"></i>
                  {{ 'Edit' | translate }}
                </button>
              </li>
              <li>
                <button
                  title="{{ 'Export' | translate }}"
                  ng-click="$ctrl.download(template)"
                  data-cy="list--export-btn"
                >
                  <i c8y-icon="export"></i>
                  {{ 'Export' | translate }}
                </button>
              </li>
              <li>
                <button
                  title="{{ 'Delete' | translate }}"
                  ng-click="$ctrl.remove(template)"
                  data-cy="list--delete-btn"
                >
                  <i c8y-icon="delete"></i>
                  {{ 'Delete' | translate }}
                </button>
              </li>
            </ul>
          </div>
        </div>

        <div class="card-header separator card-column-40">
          <div class="card-icon">
            <i c8y-icon="c8y-smart-rest c8y-icon-duocolor"></i>
          </div>
          <div
            class="card-title btn-clean text-truncate"
            title="{{ template.name }}"
          >
            {{ template.name }}
          </div>
        </div>

        <div class="card-block card-column-30 m-r-0">
          <div class="text-truncate max-width-100">
            <span
              class="text-label-small"
              translate
            >
              ID
            </span>
            <span
              title="{{ template.__externalId }}"
              ng-bind="template.__externalId"
              data-cy="list--externalID"
            ></span>
          </div>
        </div>
        <div class="card-footer separator card-column-30">
          <div class="d-flex text-muted fit-w">
            <div class="card-column-50 flex-grow p-r-16 d-flex">
              <span class="text-label-small a-s-center">
                {{ 'Messages' | translate }}
              </span>
              <div
                class="c8y-icon-badge"
                title="{{ $ctrl.countRequestTemplates(template) }} {{ 'Messages' | translate }}"
              >
                <i
                  class="m-r-4"
                  c8y-icon="internal"
                ></i>
                <span
                  class="badge badge-info"
                  ng-bind="$ctrl.countRequestTemplates(template)"
                  data-cy="list--count-request-templates"
                ></span>
              </div>
            </div>
            <div class="card-column-50 d-flex">
              <span class="text-label-small a-s-center">
                {{ 'Responses' | translate }}
              </span>
              <div
                class="c8y-icon-badge"
                title="{{ $ctrl.countResponseTemplates(template) }} {{ 'Responses' | translate }}"
              >
                <i
                  class="m-r-4"
                  c8y-icon="external"
                ></i>
                <span
                  class="badge badge-info"
                  ng-bind="$ctrl.countResponseTemplates(template)"
                  data-cy="list--count-response-templates"
                ></span>
              </div>
            </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>

  <c8y-load-more></c8y-load-more>
</div>
