<div
  class="c8y-list__item collapsible"
  ng-class="{ expanded: vm.isDetailOpen }"
>
  <div class="c8y-list__item__block">
    <div class="c8y-list__item__icon">
      <i c8y-icon="c8y-data-points"></i>
    </div>
    <div class="c8y-list__item__body">
      <div class="content-flex-70">
        <div
          class="col-4"
          ng-click="vm.toggleDetail()"
        >
          <small class="text-muted">{{ vm.resource.id }}</small>
          {{ vm.resource.name }}
        </div>
        <div class="col-3">
          <div class="list-functionalities d-flex a-i-center">
            <span class="text-label-small visible-xs m-r-4">
              {{ 'Functionalities' | translate }}:
            </span>
            <c8y-object-mapping-status-icons
              mapping="vm.serverMapping"
            ></c8y-object-mapping-status-icons>
          </div>
        </div>
        <div class="col-3">
          <div class="d-flex a-i-center">
            <div class="list-item-switch m-r-4">
              <label class="c8y-switch c8y-switch--inline">
                <input
                  type="checkbox"
                  ng-model="vm.mapping.skipIfEmpty"
                  ng-change="vm.updateSkipIfEmptyValues()"
                />
                <span></span>
                <span class="visible-xs">{{ 'Ignore empty values' | translate }}</span>
                <span class="sr-only">{{ 'Ignore empty values' | translate }}</span>
              </label>
            </div>
          </div>
        </div>
        <div class="col-2 m-t-xs-4 d-flex a-i-center">
          <span
            class="m-r-xs-4 text-label-small visible-xs"
            ng-show="vm.showValidation()"
          >
            {{ 'Validation rules' | translate }}:
          </span>
          <div
            class="dot small"
            ng-class="{
              'dot-default': !vm.validationAvailable(),
              'dot-success': vm.validationAvailable()
            }"
            ng-show="vm.showValidation()"
          >
            <i
              c8y-icon="list-ul"
              uib-tooltip="{{ 'Validation rules set' | translate }}."
              tooltip-popup-delay="500"
              tooltip-append-to-body="true"
              ng-show="vm.validationAvailable()"
            ></i>
            <i
              c8y-icon="list-ul"
              uib-tooltip="{{ 'No validation rules defined' | translate }}."
              tooltip-popup-delay="500"
              tooltip-append-to-body="true"
              ng-show="!vm.validationAvailable()"
            ></i>
          </div>
        </div>
      </div>
    </div>
    <div class="c8y-list__item__actions">
      <button
        class="collapse-btn"
        ng-class="{ active: vm.isDetailOpen }"
        title="{{ 'Expand' | translate }}"
        type="button"
        ng-click="vm.toggleDetail()"
      >
        <i c8y-icon="chevron-down"></i>
      </button>
    </div>
  </div>
  <div
    class="collapse"
    uib-collapse="!vm.isDetailOpen"
  >
    <div class="c8y-list__item__collapse--container">
      <div class="row">
        <div class="col-md-3">
          <div ng-show="vm.resource.description">
            <p class="m-b-24">{{ vm.resource.description }}</p>
          </div>
          <div
            class="text-muted"
            ng-hide="vm.resource.description"
          >
            <p class="m-b-24"><em translate>No description available.</em></p>
          </div>
          <ul class="list-unstyled small">
            <li class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap">
              <label
                class="small m-b-0 m-r-8"
                translate
              >
                Range
              </label>
              <span class="m-l-auto">{{ vm.resource.rangeEnumeration || '--' }}</span>
            </li>
            <li class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap">
              <label
                class="small m-b-0 m-r-8"
                translate
              >
                Mandatory
              </label>
              <span
                class="m-l-auto"
                ng-show="vm.resource.mandatory"
              >
                <span translate>Yes</span>
              </span>
              <span
                class="m-l-auto"
                ng-hide="vm.resource.mandatory"
              >
                <span translate>No</span>
              </span>
            </li>
            <li class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap">
              <label
                class="small m-b-0 m-r-8"
                translate
              >
                Operations
              </label>
              <span class="m-l-auto">{{ vm.resource.operations }}</span>
            </li>
            <li class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap">
              <label
                class="small m-b-0 m-r-8"
                translate
              >
                Type
              </label>
              <span class="m-l-auto">{{ vm.resource.dataType }}</span>
            </li>
            <li class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap">
              <label
                class="small m-b-0 m-r-8"
                translate
              >
                Units
              </label>
              <span class="m-l-auto">{{ vm.resource.units || '--' }}</span>
            </li>
            <li class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap">
              <label
                class="small m-b-0 m-r-8"
                translate
              >
                Instance type
              </label>
              <span
                class="m-l-auto"
                ng-hide="vm.resource.multiple"
              >
                <span translate>Single</span>
              </span>
              <span
                class="m-l-auto"
                ng-show="vm.resource.multiple"
              >
                <span translate>Multiple</span>
              </span>
            </li>
          </ul>
        </div>
        <div class="col-md-9">
          <form
            class="form"
            name="vm.mappingForm"
            novalidate
          >
            <c8y-object-mapping
              mapping="vm.mapping"
              auto-observe-params="true"
              custom-actions="vm.customActions"
            ></c8y-object-mapping>

            <c8y-lwm2m-validation-rules
              ng-if="vm.showValidation()"
              mapping="vm.mapping"
              resource="vm.resource"
            ></c8y-lwm2m-validation-rules>
            <button
              class="btn btn-default"
              title="{{ 'Cancel' | translate }}"
              type="button"
              ng-click="vm.cancel(); vm.mappingForm.$pristine = true"
            >
              {{ 'Cancel' | translate }}
            </button>
            <button
              class="btn btn-primary"
              title="{{ 'Save' | translate }}"
              type="submit"
              ng-click="vm.save()"
              ng-disabled="vm.mappingForm.$invalid || vm.mappingForm.$pristine"
            >
              {{ 'Save' | translate }}
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
