<div ng-controller="deviceDetailIdentityCtrl">
  <c8y-ui-action-bar-set>
    <li c8y-if-allowed any-role="['ROLE_IDENTITY_ADMIN']">
      <div class="dropdown" uib-dropdown auto-close="outsideClick" is-open="isOpen">
        <button
          class="dropdown-toggle c8y-dropdown"
          type="button"
          title="{{ 'Add external ID' | translate }}"
          uib-dropdown-toggle
          aria-haspopup="true"
        >
          <span>
            <i c8y-icon="plus-circle"></i>
            {{ 'Add external ID' | translate }}
          </span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
          <li class="dropdown-form">
            <form name="newIdForm" class="panel-body" novalidate>
              <p class="legend form-block m-t-8 m-b-16 hidden-sm hidden-md hidden-lg">
                {{ 'Add external ID' | translate }}
              </p>
              <div class="form-group">
                <label translate>Type</label>
                <input
                  type="text"
                  class="form-control"
                  ng-model="newId.type"
                  placeholder="{{ 'e.g.' | translate }} c8y_Serial"
                  required
                />
              </div>
              <div class="form-group">
                <label translate>External ID</label>
                <input
                  type="text"
                  class="form-control"
                  ng-model="newId.externalId"
                  ng-maxlength="680"
                  placeholder="{{ 'e.g.' | translate }} 4AB0123D0F"
                  required
                />
              </div>
              <button
                class="btn btn-primary"
                type="submit"
                title="{{ 'Save' | translate }}"
                ng-click="create(newId)"
                ng-disabled="newIdForm.$invalid"
                translate
              >
                Save
              </button>
            </form>
          </li>
        </ul>
      </div>
    </li>

    <c8y-refresh-btn></c8y-refresh-btn>
  </c8y-ui-action-bar-set>

  <div class="row">
    <div class="col-md-12">
      <c8y-ui-empty-state
        ng-if="ids.length === 0"
        [icon]="'barcode'"
        [title]="'No external IDs added yet.' | translate"
      ></c8y-ui-empty-state>

      <div class="page-sticky-header hidden-xs hidden-sm c8y-list__item" ng-if="ids.length > 0">
        <div class="c8y-list__item__block">
          <div class="c8y-list__item__body">
            <div class="row">
              <div class="col-md-4">
                <p class="text-medium" translate>Type</p>
              </div>
              <div class="col-md-6">
                <p class="text-medium" translate>External ID</p>
              </div>
              <div class="col-md-2"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="c8y-list__group">
        <div class="c8y-list__item" ng-repeat="id in ids">
          <div class="c8y-list__item__block">
            <div class="c8y-list__item__body">
              <div class="row">
                <div class="col-md-4">{{ id.type }}</div>
                <div class="col-md-6">
                  {{ id.externalId }}
                </div>
                <div class="col-sm-2 showOnHover">
                  <c8y-if-allowed any-role="['ROLE_IDENTITY_ADMIN']" class="d-contents">
                    <button
                      class="m-l-auto btn btn-dot btn-dot--danger"
                      type="button"
                      aria-label="{{ 'Remove' | translate }}"
                      uib-tooltip="{{ 'Remove' | translate }}"
                      tooltip-popup-delay="500"
                      tooltip-trigger="'mouseenter'"
                      ng-click="onClickDelete(id)"
                    >
                      <i c8y-icon="minus-circle"></i>
                    </button>
                  </c8y-if-allowed>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
