<c8y-ui-title-set
  ng-if="!vm.inSearchMode"
  title="vm.getTitle()"
  subtitle="vm.getSubtitle()"
></c8y-ui-title-set>

<div>
  <div ng-if="vm.isDeviceListViewEnabled()">
    <c8y-device-list dynamic-group-id="currentGroup.id" set-titles="true"></c8y-device-list>
  </div>

  <div ng-if="!vm.isDeviceListViewEnabled()">
    <c8y-ui-action-bar-set>
      <li class="navbar-form hidden-xs" ng-show="vm.items.length > 0" action-bar-position="left">
        <c8y-list-display-control
          list-length="vm.items.length"
          on-list-class-change="vm.listClass = listClass"
        >
        </c8y-list-display-control>
      </li>

      <li>
        <div c8y-if-allowed admin-mos="[vm.currentGroup]">
          <div class="dropdown hidden-xs" uib-dropdown>
            <button
              title="{{ 'Add group' | translate }}"
              class="dropdown-toggle c8y-dropdown"
              ng-click="addNewGroup()"
              uib-dropdown-toggle
              aria-haspopup="true"
            >
              <i c8y-icon="plus-circle"></i>
              <span>{{ 'Add group' | translate }}</span>
            </button>
            <ul class="dropdown-menu" uib-dropdown-menu>
              <li class="dropdown-form">
                <form name="newGroupForm">
                  <div class="form-group" ng-show="vm.newGroup">
                    <input
                      type="text"
                      class="form-control no-cursor"
                      placeholder="{{ 'Group name' | translate }}"
                      ng-model="vm.newGroup.name"
                      maxlength="{{ vm.c8yConfig.validation.groupName.maxlength }}"
                      placeholder-no-required-hint
                      required
                      ng-click="$event.stopPropagation()"
                    />
                  </div>
                  <button
                    title="{{ 'Add group' | translate }}"
                    class="btn btn-primary btn-block"
                    ng-show="vm.newGroup"
                    ng-click="saveNewGroup(vm.newGroup)"
                    ng-disabled="newGroupForm.$invalid"
                  >
                    {{ 'Add group' | translate }}
                  </button>
                </form>
              </li>
            </ul>
          </div>
        </div>
      </li>

      <li>
        <div c8y-if-allowed admin-mos="[vm.currentGroup]">
          <button
            title="{{ 'Assign devices' | translate }}"
            class="btn btn-link"
            ng-show="currentGroup"
            ng-click="assignDevices()"
          >
            <i c8y-icon="c8y-device-connect"></i>
            <span>{{ 'Assign devices' | translate }}</span>
          </button>
        </div>
      </li>
      <li ng-hide="vm.inSearchMode">
        <c8y-refresh-btn></c8y-refresh-btn>
      </li>
    </c8y-ui-action-bar-set>

    <div class="card-group" ng-class="vm.listClass || 'interact-list'">
      <!-- empty state -->
      <div class="c8y-empty-state text-center" ng-show="items.length == 0">
        <h1 class="c8y-icon c8y-icon-group-add c8y-icon-duocolor"></h1>
        <h3 translate>No items to display.</h3>
        <p translate>Add your first group or assign devices using the buttons on the action bar.</p>
      </div>
      <!-- /.empty state -->

      <!-- filter: isGroup -->
      <div
        class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
        ng-repeat="i in items|filter:isGroupOrDynamicGroup|orderBy:'name'"
        ng-mouseenter="vm.fetchChildCount(i)"
      >
        <div class="card" ng-click="drillDown(i)">
          <div class="card-actions" ng-click="$event.stopPropagation();">
            <c8y-if-allowed admin-mos="[vm.currentGroup]">
              <div class="settings pull-right" is-open="menuOpen" uib-dropdown>
                <button
                  title="{{ 'Actions' | translate }}"
                  type="button"
                  class="dropdown-toggle c8y-dropdown"
                  aria-haspopup="true"
                  uib-dropdown-toggle
                >
                  <i c8y-icon="ellipsis-v"></i>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu>
                  <li>
                    <a
                      title="{{ 'Delete group' | translate }}"
                      href=""
                      ng-click="onClickDeleteGroup(i)"
                    >
                      <i c8y-icon="times"></i>
                      {{ 'Delete' | translate }}
                    </a>
                  </li>
                </ul>
              </div>
            </c8y-if-allowed>
          </div>

          <div class="card-header separator">
            <div class="card-icon">
              <i c8y-icon="{{ getIconForGroup(i) }}" class="c8y-icon-duocolor"></i>
            </div>

            <div class="card-title text-truncate" title="{{ i.name }}">
              {{ i.name }}
            </div>
          </div>
          <!-- ./card-header -->

          <div class="card-block">
            <div class="col-xs-12 text-truncate" ng-show="vm.hasChildCount(i)">
              <label class="small" translate>Number of children</label>
              {{ ::vm.childCount(i) }}
            </div>
          </div>
        </div>
      </div>
      <!-- /.filter:isGroup -->

      <!-- filter: isDeviceOrChildDevice -->
      <div
        class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
        ng-repeat="i in items|filter:isDeviceOrChildDevice|orderBy:'name'"
      >
        <div class="card" ng-click="goToDeviceDetails(i)">
          <div class="card-actions" ng-click="$event.stopPropagation()">
            <c8y-if-allowed admin-mos="[vm.currentGroup]">
              <div class="settings pull-right" uib-dropdown is-open="menuOpen">
                <button
                  title="{{ 'Actions' | translate }}"
                  type="button"
                  class="dropdown-toggle c8y-dropdown"
                  aria-haspopup="true"
                  uib-dropdown-toggle
                >
                  <i c8y-icon="ellipsis-v"></i>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu>
                  <li ng-if="getLinkToDM(i)">
                    <c8y-if-allowed any-app="['devicemanagement']">
                      <a
                        title="{{ 'Open in Device Management' | translate }}"
                        target="_blank"
                        rel="noopener noreferrer"
                        ng-href="{{ getLinkToDM(i) }}"
                      >
                        <i c8y-icon="external-link"></i>
                        {{ 'Device Management' | translate }}
                      </a>
                    </c8y-if-allowed>
                  </li>
                  <li>
                    <a
                      title="{{ 'Unassign' | translate }}"
                      href=""
                      ng-hide="inSearchMode"
                      ng-click="onClickUnassignDevice(i)"
                    >
                      <i c8y-icon="chain-broken"></i>
                      {{ 'Unassign' | translate }}
                    </a>
                  </li>
                  <li>
                    <a href="" title="{{ 'Delete' | translate }}" ng-click="onClickDeleteDevice(i)">
                      <i c8y-icon="times"></i>
                      {{ 'Delete' | translate }}
                    </a>
                  </li>
                </ul>
              </div>
            </c8y-if-allowed>
          </div>

          <div class="card-header separator card-column-40">
            <div class="card-icon">
              <c8y-device-status-display device="i"></c8y-device-status-display>
            </div>

            <div class="card-title text-truncate" title="{{ getDeviceTitle(i) }}">
              {{ getDeviceTitle(i) }}
            </div>
          </div>
          <!-- /.card-header -->

          <div class="card-block ">
            <div
              class="col-xs-12 col-sm-5 text-truncate"
              title="{{ deviceModel(i) }}"
              ng-if="deviceModel(i)"
            >
              <label class="small">{{ 'Model' | translate }}</label> {{ deviceModel(i) }}
            </div>

            <div
              class="col-xs-12 col-sm-4 text-truncate"
              title="{{ deviceSerial(i) }}"
              ng-if="deviceSerial(i)"
            >
              <label class="small">{{ 'S/N' | translate }}</label> {{ deviceSerial(i) }}
            </div>

            <div class="alarm-status m-l-auto" ng-click="goToDeviceAlarms(i)">
              <small
                class="status critical text-nowrap"
                title="{{ 'Critical alarms' | translate }}"
                ng-if="i.c8y_ActiveAlarmsStatus.critical"
              >
                {{ i.c8y_ActiveAlarmsStatus.critical }}<i c8y-icon="warning"></i>
              </small>
              <small
                class="status major text-nowrap"
                title="{{ 'Major alarms' | translate }}"
                ng-if="i.c8y_ActiveAlarmsStatus.major"
              >
                {{ i.c8y_ActiveAlarmsStatus.major }}<i c8y-icon="exclamation-circle"></i>
              </small>
              <small
                class="status minor text-nowrap"
                title="{{ 'Minor alarms' | translate }}"
                ng-if="i.c8y_ActiveAlarmsStatus.minor"
              >
                {{ i.c8y_ActiveAlarmsStatus.minor }}<i c8y-icon="exclamation-circle"></i>
              </small>
              <small
                class="status warning text-nowrap"
                title="{{ 'Warning alarms' | translate }}"
                ng-if="i.c8y_ActiveAlarmsStatus.warning"
              >
                {{ i.c8y_ActiveAlarmsStatus.warning }}<i c8y-icon="circle"></i>
              </small>
            </div>
          </div>
          <!-- ./card-block -->
        </div>
      </div>
      <!-- /filter: isDeviceOrChildDevice -->

      <!-- filter: isOtherItem -->
      <div
        class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
        ng-repeat="i in items|filter:isOtherItem|orderBy:'name'"
      >
        <div class="card" ng-click="goToDeviceDetails(i)">
          <div class="card-actions" ng-click="$event.stopPropagation()">
            <c8y-if-allowed admin-mos="[vm.currentGroup]">
              <div
                class="settings pull-right"
                title="{{ 'Actions' | translate }}"
                uib-dropdown
                is-open="menuOpen"
              >
                <button
                  title="{{ 'Actions' | translate }}"
                  type="button"
                  class="dropdown-toggle c8y-dropdown"
                  aria-haspopup="true"
                  uib-dropdown-toggle
                >
                  <i c8y-icon="ellipsis-v"></i>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu>
                  <li>
                    <a
                      title="{{ 'Unassign' | translate }}"
                      href=""
                      ng-hide="inSearchMode"
                      ng-click="onClickUnassignDevice(i)"
                    >
                      <i c8y-icon="chain-broken"></i>
                      {{ 'Unassign' | translate }}
                    </a>
                  </li>
                  <li>
                    <a href="" title="{{ 'Delete' | translate }}" ng-click="onClickDeleteDevice(i)">
                      <i c8y-icon="times"></i>
                      {{ 'Delete' | translate }}
                    </a>
                  </li>
                </ul>
              </div>
            </c8y-if-allowed>
          </div>

          <div class="card-header separator">
            <div class="card-icon">
              <i c8y-icon="circle text-muted"></i>
            </div>
            <div class="card-title text-truncate" title="{{ getDeviceTitle(i) }}">
              {{ getDeviceTitle(i) }}
            </div>
          </div>
          <div class="card-block">
            <div class="col-xs-12 col-sm-4 text-truncate" ng-if="deviceModel(i)">
              <label class="small">{{ 'Model' | translate }}</label> {{ deviceModel(i) }}
            </div>

            <div class="col-xs-12 col-sm-4 text-truncate" ng-if="deviceSerial(i)">
              <label class="small">{{ 'S/N' | translate }}</label> {{ deviceSerial(i) }}
            </div>
          </div>
          <!-- ./card-block -->
        </div>
      </div>
      <!-- /filter: isOtherItem -->
    </div>
    <!-- /.card-group -->
    <c8y-load-more></c8y-load-more>
  </div>
</div>
