<div ng-if="vm.shouldShowSection()">
  <div class="row">
    <div class="col-lg-12 col-lg-max">
      <div class="card">
        <div class="card-header separator">
          <div class="card-title">{{ vm.mode }}</div>
        </div>
        <div class="card-block">
          <div class="c8y-list__group">
            <div class="c8y-list__item hidden-xs hidden-sm" ng-if="filtered.length > 0">
              <div class="c8y-list__item__block">
                <div class="c8y-list__item__body">
                  <div class="content-flex-60">
                    <div class="col-3" ng-if="vm.mode !== 'CAN'">
                      <label class="small" translate>Name</label>
                    </div>
                    <div class="col-3">
                      <label class="small" translate>Device type</label>
                    </div>
                    <div
                      class="col-2"
                      ng-if="vm.mode !== 'CAN' && vm.mode !== 'Profibus' && vm.mode !== 'CANopen'"
                    >
                      <label class="small" translate>Address</label>
                    </div>
                    <div class="col-2" ng-if="vm.mode === 'CANopen'">
                      <label class="small" translate>Node ID</label>
                    </div>
                    <div class="col-3" ng-if="vm.mode === 'TCP'">
                      <label class="small" translate>IP address</label>
                    </div>
                  </div>
                </div>
                <div class="c8y-list__item--empty-actions"></div>
              </div>
            </div>

            <div
              class="c8y-list__item"
              ng-repeat="device in vm.devices | orderBy:'name' | filter:vm.filterByMode() as filtered"
            >
              <div class="c8y-list__item__block">
                <div class="c8y-list__item__body">
                  <div class="content-flex-60">
                    <div
                      class="col-3 interact"
                      ng-if="vm.mode !== 'CAN'"
                      ng-click="vm.navigateToDetail(device)"
                    >
                      <span class="text-label-small m-r-4 visible-xs-inline-block" translate>
                        Name
                      </span>
                      {{ device.name }}
                    </div>
                    <div class="col-3">
                      <span class="text-label-small m-r-4 visible-xs-inline-block" translate>
                        Device type
                      </span>
                      {{ device.deviceType }}
                    </div>
                    <div
                      class="col-2"
                      ng-if="vm.mode !== 'CAN' && vm.mode !== 'Profibus' && vm.mode !== 'CANopen'"
                    >
                      <span class="text-label-small m-r-4 visible-xs-inline-block" translate>
                        Address
                      </span>
                      {{ device.address }}
                    </div>
                    <div class="col-2" ng-if="vm.mode === 'CANopen'">
                      <span class="text-label-small m-r-4 visible-xs-inline-block" translate>
                        Node ID
                      </span>
                      {{ device.nodeId }}
                    </div>
                    <div class="col-3" ng-if="vm.mode === 'TCP'">
                      <span class="text-label-small visible-xs-inline-block m-r-4" translate>
                        IP address
                      </span>
                      {{ device.ipAddress }}
                    </div>
                    <div class="flex-grow">
                      <div class="d-flex">
                        <button
                          class="m-l-auto-sm btn btn-dot btn-dot--danger showOnHover"
                          type="button"
                          uib-tooltip="{{ 'Remove' | translate }}"
                          tooltip-popup-delay="500"
                          tooltip-append-to-body="true"
                          aria-label="{{ 'Remove' | translate }}"
                          ng-click="vm.onClickDelete(device)"
                        >
                          <i c8y-icon="minus-circle"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- empty state -->
            <div ng-if="vm.devices.length < 1">
              <c8y-ui-empty-state
                [icon]="'c8y-device-management'"
                [title]="'No devices to display.' | translate"
                [subtitle]="'Click below to add a TCP device.' | translate"
                [horizontal]="true"
              ></c8y-ui-empty-state>
            </div>
          </div>

          <c8y-load-more ng-repeat-end change-page-size></c8y-load-more>
        </div>
        <form
          ng-if="vm.newDevice"
          class="bg-level-2"
          name="vm.new{{ vm.mode }}DeviceForm"
          novalidate
        >
          <div class="card-block">
            <div class="row">
              <div class="col-md-6">
                <div
                  ng-if="vm.mode !== 'CAN'"
                  class="form-group"
                  ng-class="{ 'has-error': vm.invalid('name') }"
                >
                  <input
                    class="form-control"
                    name="name"
                    placeholder="{{ 'Name' | translate }}"
                    ng-model="vm.newDevice.name"
                    data-cy="fieldbus-device-list--name"
                    ng-disabled="vm.newDevice.adding"
                    required
                  />
                  <c8y-messages>
                    <c8y-message class="form-control-feedback-message" ng-if="vm.invalid('name')">
                      {{ vm.getFieldValidationHints('name') }}
                    </c8y-message>
                  </c8y-messages>
                </div>

                <div
                  ng-if="vm.mode !== 'CAN' && vm.mode !== 'Profibus' && vm.mode !== 'CANopen'"
                  class="form-group"
                  ng-class="{ 'has-error': vm.invalid('address') }"
                >
                  <input
                    class="form-control"
                    type="number"
                    name="address"
                    placeholder="{{ 'Address' | translate }}"
                    ng-model="vm.newDevice.address"
                    ng-min="0"
                    ng-max="255"
                    step="1"
                    required
                    ng-disabled="vm.newDevice.adding"
                  />
                  <c8y-messages>
                    <c8y-message
                      class="form-control-feedback-message"
                      ng-if="vm.invalid('address')"
                    >
                      {{ vm.getFieldValidationHints('address') }}
                    </c8y-message>
                  </c8y-messages>
                </div>
              </div>
              <div class="col-md-6">
                <div
                  class="form-group"
                  ng-if="vm.mode === 'TCP'"
                  ng-class="{ 'has-error': vm.invalid('ipAddress') }"
                >
                  <input
                    class="form-control"
                    id="ipAddress"
                    name="ipAddress"
                    ng-model="vm.newDevice.ipAddress"
                    placeholder="{{ 'IP address' | translate }}"
                    validate-ip
                    maxlength="15"
                    required
                    ng-disabled="vm.newDevice.adding"
                  />
                  <c8y-messages>
                    <c8y-message
                      class="form-control-feedback-message"
                      ng-if="vm.invalid('ipAddress')"
                    >
                      {{ vm.getFieldValidationHints('ipAddress') }}
                    </c8y-message>
                  </c8y-messages>
                </div>
                <div
                  ng-if="vm.mode === 'CANopen'"
                  class="form-group"
                  ng-class="{ 'has-error': vm.invalid('nodeId') }"
                >
                  <input
                    class="form-control"
                    type="number"
                    name="nodeId"
                    placeholder="{{ 'Node ID' | translate }}"
                    ng-model="vm.newDevice.nodeId"
                    step="1"
                    required
                    ng-disabled="vm.newDevice.adding"
                  />
                  <c8y-messages>
                    <c8y-message class="form-control-feedback-message" ng-if="vm.invalid('nodeId')">
                      {{ vm.getFieldValidationHints('nodeId') }}
                    </c8y-message>
                  </c8y-messages>
                </div>
                <div class="form-group" ng-class="{ 'has-error': vm.invalid('deviceType') }">
                  <ui-select
                    class="form-control"
                    name="deviceType"
                    append-to-body="true"
                    ng-model="vm.newDevice.deviceType"
                    ng-disabled="vm.newDevice.adding"
                    required
                  >
                    <ui-select-match
                      placeholder="{{ 'Select a device protocol…' | translate }}"
                      title="{{ $select.selected.name }}"
                      ng-bind="$select.selected.name"
                    ></ui-select-match>
                    <ui-select-choices
                      repeat="type in vm.deviceConfigurationOptions.types | orderBy:'name' | filter:$select.search"
                    >
                      <span title="{{ type.name }}">{{ type.name }}</span>
                    </ui-select-choices>
                  </ui-select>
                  <c8y-messages>
                    <c8y-message
                      class="form-control-feedback-message"
                      ng-if="vm.invalid('deviceType')"
                    >
                      {{ vm.getFieldValidationHints('deviceType') }}
                    </c8y-message>
                  </c8y-messages>
                </div>
              </div>
            </div>

            <button
              class="btn btn-default"
              type="button"
              title="{{ 'Cancel' | translate }}"
              ng-click="vm.clearNewDevice()"
              ng-disabled="vm.newDevice.adding"
            >
              {{ 'Cancel' | translate }}
            </button>

            <button
              class="btn btn-primary"
              type="submit"
              ng-class="{ 'btn-pending': vm.newDevice.adding }"
              ng-click="vm.addNewDevice()"
              data-cy="fieldbus-device-list--add-new-device"
              ng-disabled="vm.isFormInvalid() || vm.newDevice.adding"
            >
              <span title="{{ 'Add' | translate }}" ng-if="!vm.newDevice.adding">
                {{ 'Add' | translate }}
              </span>
              <span ng-if="vm.newDevice.adding">{{ 'Adding' | translate }}…</span>
            </button>
          </div>
        </form>
        <div class="card-footer separator">
          <button
            class="btn btn-default m-b-0"
            type="button"
            title="{{ 'Add device' | translate }}"
            ng-click="vm.startAddingNewDevice()"
            data-cy="fieldbus-device-list--add-device"
          >
            <i c8y-icon="plus-circle"></i>
            <span translate>Add {{ vm.mode }} device</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div ng-if="vm.isOPCUATab()">
  <div class="col-lg-12 col-lg-max">
    <div class="card">
      <div class="card-header separator">
        <div class="h4" translate>OPC UA devices</div>
      </div>
      <div class="card-block">
        <div class="c8y-list__group">
          <div class="c8y-list__item hidden-xs hidden-sm">
            <div class="c8y-list__item__block">
              <div class="c8y-list__item__body">
                <div class="content-flex-60">
                  <div class="col-6">
                    <label class="small" translate>Name</label>
                  </div>
                  <div class="col-3">
                    <label class="small" translate>Directory path</label>
                  </div>
                  <div class="col-3">
                    <label class="small" translate>Device type</label>
                  </div>
                </div>
              </div>
              <div class="c8y-list__item--empty-actions"></div>
            </div>
          </div>

          <div
            class="c8y-list__item"
            ng-repeat="device in vm.devices | filter:vm.filterByMode() | orderBy:'-'"
          >
            <div class="c8y-list__item__block">
              <div class="c8y-list__item__body">
                <div class="content-flex-60">
                  <div class="col-6 text-truncate">
                    <label class="small hidden-md hidden-lg" translate>Name</label>
                    <a title="{{ device.name }}" href="" ng-click="vm.navigateToDetail(device)">
                      {{ device.name }}
                    </a>
                  </div>
                  <div class="col-3 m-l-sm-4">
                    <label class="small hidden-md hidden-lg" translate>Directory path</label>
                    <small class="text-muted">{{ device.directoryPath }}</small>
                  </div>
                  <div class="col-3">
                    <div class="d-flex">
                      <span class="text-label-small hidden-md hidden-lg" translate>
                        Device type
                      </span>
                      <small>{{ device.deviceType }}</small>
                      <button
                        class="m-l-auto btn btn-dot"
                        type="button"
                        aria-label="{{ 'Remove' | translate }}"
                        uib-tooltip="{{ 'Remove' | translate }}"
                        tooltip-popup-delay="500"
                        tooltip-append-to-body="true"
                        ng-click="vm.onClickDelete(device)"
                      >
                        <i c8y-icon="minus-circle" class="text-danger"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- empty state -->
          <div class="card bg-level-1">
            <c8y-ui-empty-state
              ng-if="vm.devices.length < 1"
              [icon]="'c8y-device-management'"
              [title]="'No devices to display.' | translate"
              [subtitle]="'Click below to add a device.' | translate"
            ></c8y-ui-empty-state>
          </div>
        </div>

        <c8y-load-more ng-repeat-end change-page-size></c8y-load-more>
      </div>
      <form ng-if="vm.newDevice" class="bg-level-2" name="vm.newOPCUADeviceForm" novalidate>
        <div class="card-block">
          <div class="row">
            <div class="form-group col-md-4" ng-class="{ 'has-error': vm.invalid('name') }">
              <input
                class="form-control input-border"
                placeholder="{{ 'Name' | translate }}"
                name="name"
                ng-model="vm.newDevice.name"
                required
                ng-disabled="vm.newDevice.adding"
              />
              <c8y-messages>
                <c8y-message class="form-control-feedback-message" ng-if="vm.invalid('name')">
                  {{ vm.getFieldValidationHints('name') }}
                </c8y-message>
              </c8y-messages>
            </div>
            <div
              class="form-group col-md-4"
              ng-class="{ 'has-error': vm.invalid('directoryPath') }"
            >
              <input
                class="form-control input-border"
                placeholder="{{ 'Directory path' | translate }}"
                name="directoryPath"
                ng-model="vm.newDevice.directoryPath"
                required
                ng-disabled="vm.newDevice.adding"
              />
              <c8y-messages>
                <c8y-message
                  class="form-control-feedback-message"
                  ng-if="vm.invalid('directoryPath')"
                >
                  {{ vm.getFieldValidationHints('directoryPath') }}
                </c8y-message>
              </c8y-messages>
            </div>
            <div class="form-group col-md-4" ng-class="{ 'has-error': vm.invalid('deviceType') }">
              <ui-select
                class="form-control"
                name="deviceType"
                append-to-body="true"
                ng-model="vm.newDevice.deviceType"
                required
                ng-disabled="vm.newDevice.adding"
              >
                <ui-select-match
                  placeholder="{{ 'Select device type' | translate }}"
                  title="{{ $select.selected.name }}"
                  ng-bind="$select.selected.name"
                ></ui-select-match>
                <ui-select-choices
                  repeat="type in vm.deviceConfigurationOptions.types | orderBy:'name' | filter:$select.search"
                >
                  <span title="{{ type.name }}">{{ type.name }}</span>
                </ui-select-choices>
              </ui-select>
              <c8y-messages>
                <c8y-message
                  class="form-control-feedback-message"
                  ng-if="vm.getFieldValidationHints('deviceType')"
                >
                  {{ vm.getFieldValidationHints('deviceType') }}
                </c8y-message>
              </c8y-messages>
            </div>
          </div>
          <button
            class="btn btn-default"
            type="button"
            title="{{ 'Cancel' | translate }}"
            ng-click="vm.clearNewDevice()"
            ng-disabled="vm.newDevice.adding"
          >
            {{ 'Cancel' | translate }}
          </button>

          <button
            class="btn btn-primary"
            type="button"
            ng-class="{ 'btn-pending': vm.newDevice.adding }"
            ng-click="vm.addNewDevice()"
            ng-disabled="vm.isFormInvalid() || vm.newDevice.adding"
          >
            <span title="{{ 'Add' | translate }}" ng-if="!vm.newDevice.adding">
              {{ 'Add' | translate }}
            </span>
            <span ng-if="vm.newDevice.adding">{{ 'Adding' | translate }}…</span>
          </button>
        </div>
      </form>
      <div class="card-footer separator">
        <button
          class="btn-add-block m-b-0"
          type="button"
          title="{{ 'Add OPC UA device' | translate }}"
          ng-click="vm.startAddingNewDevice()"
        >
          <i c8y-icon="plus-circle"></i>
          {{ 'Add OPC UA device' | translate }}
        </button>
      </div>
    </div>
  </div>
</div>
