<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    icon="c8y-simulator"
    label="{{ 'Simulators' | translate }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    icon="exchange"
    label="{{ 'Devices' | 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.simulators.length"
      on-list-class-change="vm.listClass = listClass"
    ></c8y-list-display-control>
  </li>

  <c8y-simulator-add on-added="vm.onSimulatorAdded(simulator)"></c8y-simulator-add>

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

<c8y-help
  src="/docs/device-management-application/working-with-simulators/#working-with-simulators"
></c8y-help>

<!-- empty state -->
<c8y-ui-empty-state
  [icon]="'c8y-simulator'"
  [title]="'No simulators to display.' | translate"
  [subtitle]="'Click below to add your first simulator.' | translate"
  ng-if="vm.simulators.length === 0"
>
  <c8y-simulator-add on-added="vm.onSimulatorAdded(simulator)"></c8y-simulator-add>

  <p c8y-guide-docs>
    <small translate>
      Find out more in the
      <a c8y-guide-href="/docs/device-management-application/working-with-simulators">
        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="vm.simulators.length > 0"
  >
    <div class="d-flex">
      <div class="card-actions"></div>
      <div class="card-header card-column-40">
        <span class="card-icon"></span>
        {{ 'Simulator' | translate }}
      </div>
      <div class="card-block card-column-30 m-r-0">
        {{ 'Status' | translate }}
      </div>
      <div class="card-footer card-column-30">
        <div class="d-flex fit-w">
          <div class="card-column-50 flex-grow">
            {{ 'Instances' | translate }}
          </div>
          <div class="card-column-50">
            {{ 'Instructions' | translate }}
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
    ng-repeat="simulator in vm.simulators | orderBy:'name'"
  >
    <div
      class="card"
      ng-click="vm.edit(simulator)"
    >
      <div class="card-actions">
        <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.edit(simulator)"
              >
                <i c8y-icon="edit"></i>
                {{ 'Edit' | translate }}
              </button>
            </li>
            <li>
              <button
                title="{{ 'Duplicate' | translate }}"
                type="button"
                ng-click="$event.stopPropagation();vm.clone(simulator)"
              >
                <i c8y-icon="clone"></i>
                {{ 'Duplicate' | translate }}
              </button>
            </li>
            <li>
              <button
                title="{{ 'Delete' | translate }}"
                type="button"
                ng-click="$event.stopPropagation();vm.remove(simulator)"
              >
                <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-simulator c8y-icon-duocolor"></i>
        </div>
        <div
          class="text-truncate card-title"
          title="{{ simulator.name }}"
        >
          {{ simulator.name }}
        </div>
      </div>

      <div class="card-block card-column-30 m-r-0">
        <div ng-switch="simulator.state">
          <label
            class="c8y-switch c8y-switch--inline"
            title="{{ 'Toggle simulator state' | translate }}"
            ng-click="$event.stopPropagation()"
          >
            <input
              type="checkbox"
              ng-checked="simulator.state === 'RUNNING'"
              ng-click="$event.stopPropagation(); simulator.state === 'RUNNING' ? vm.pause(simulator) : vm.run(simulator);"
            />
            <span></span>
            <span
              class="text-capitalize"
              title="{{ simulator.state | translate | lowercase }}"
              ng-switch-default
            >
              {{ simulator.state | translate | lowercase }}
            </span>
          </label>
        </div>
      </div>

      <div class="card-footer separator card-column-30">
        <div class="d-flex fit-w">
          <div class="card-column-50 flex-grow">
            <span
              class="text-label-small"
              translate
            >
              Instances
            </span>
            <span title=" {{ simulator.instances }} {{ 'Instances' | translate }}">
              <i c8y-icon="{{ vm.icons.simulator }}"></i>
              {{ simulator.instances }}
            </span>
          </div>
          <div class="card-column-50">
            <span
              class="text-label-small"
              translate
            >
              Instructions
            </span>
            <span title="{{ simulator.commandQueue.length }} {{ 'Instructions' | translate }}">
              <i c8y-icon="{{ vm.icons.instruction }}"></i>
              {{ simulator.commandQueue.length }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
