<div
  class="d-flex a-i-center separator-top"
  style="min-height: 36px"
>
  <div
    class="text-12 d-flex a-i-center p-r-4 text-medium flex-no-shrink"
    ng-hide="vm.isEditMode"
  >
    <p translate>Owner</p>
  </div>
  <div
    class="p-l-4 p-r-0 min-width-0 m-l-auto d-inline-flex a-i-center"
    ng-hide="vm.isEditMode"
  >
    <div
      class="flex-no-shrink p-l-4 d-flex a-i-center"
      ng-if="vm.shouldShowToggle()"
    >
      <label
        class="c8y-switch c8y-switch--inline"
        aria-label="{{ vm.getTooltip() | translate }}"
        uib-tooltip="{{ vm.getTooltip() | translate }}"
        tooltip-popup-delay="500"
        tooltip-trigger="'mouseenter'"
        tooltip-append-to-body="true"
      >
        <input
          type="checkbox"
          ng-click="vm.toggleOwner($event)"
          data-cy="ownerStatus-toogle-owner"
          ng-model="vm.owner.enabled"
          ng-disabled="!(vm.canAdminDevice && vm.owner)"
        />
        <span></span>
      </label>
    </div>
    <span
      class="text-truncate"
      title="{{ vm.device.owner }}"
      ng-show="!vm.isEditMode"
    >
      {{ vm.device.owner }}
    </span>
    <button
      class="btn btn-dot m-l-auto"
      aria-label="{{ 'Edit' | translate }}"
      uib-tooltip="{{ 'Edit' | translate }}"
      tooltip-popup-delay="500"
      tooltip-trigger="'mouseenter'"
      type="button"
      ng-show="!vm.isEditMode && vm.canAdminDevice"
      ng-click="vm.toggleEdit()"
    >
      <i c8y-icon="pencil"></i>
    </button>
  </div>
  <div
    class="fit-w"
    ng-show="vm.isEditMode"
  >
    <div class="input-group">
      <input
        class="form-control"
        placeholder="{{ 'e.g.' | translate }} device_{{ 'exampleUser' | translate }}"
        ng-model="vm.device.owner"
        ng-keyup="vm.keyPressHandler($event)"
      />
      <div class="input-group-btn">
        <button
          class="btn btn-dot"
          title="{{ 'Save' | translate }}"
          type="button"
          ng-click="vm.save()"
        >
          <i
            class="text-success"
            c8y-icon="check"
          ></i>
        </button>
      </div>
      <div class="input-group-btn">
        <button
          class="btn btn-dot btn-dot--danger"
          title="{{ 'Cancel' | translate }}"
          type="button"
          ng-click="vm.cancel()"
        >
          <i c8y-icon="times"></i>
        </button>
      </div>
    </div>
  </div>
</div>
