<div class="viewport-modal">
  <div class="c8y-prompt alert alert-danger">
    <h3 class="m-b-16">
      <i c8y-icon="exclamation-circle"></i>
      {{ 'Delete user' | translate }}
    </h3>

    <p ng-if="!vm.hasSubusers" class="text-break-word p-b-16">
      <span translate>You are about to delete user "{{ vm.user.userName }}".</span>
      {{ 'Do you want to proceed?' | translate }}
    </p>

    <p ng-if="vm.hasSubusers" class="text-break-word p-b-16" translate>
      You are about to delete user "{{ vm.user.userName }}".
    </p>

    <div ng-if="vm.hasSubusers" class="p-t-16 p-b-0 separator-top">
      <p class="text-bold">
        {{ 'How would you like to proceed with sub-users when the owner is deleted?' | translate }}
      </p>

      <div class="m-b-24">
        <label class="c8y-radio">
          <input type="radio" ng-model="vm.subusersAction" value="newOwner" />
          <span></span>
          <span>{{ 'Assign a new owner' | translate }}</span>
          <button
            class="btn-help btn-help--sm"
            type="button"
            aria-label="{{ 'Help' | translate }}"
            uib-popover="{{
              'Assigns a new owner to all direct sub-users of the deleted user.' | translate
            }}"
            popover-trigger="'focus'"
            popover-placement="right"
            popover-append-to-body="true"
          ></button>
        </label>
        <label class="c8y-radio">
          <input type="radio" ng-model="vm.subusersAction" value="removeOwner" />
          <span></span>
          <span>{{ 'Keep without an owner' | translate }}</span>
          <button
            class="btn-help btn-help--sm"
            type="button"
            aria-label="{{ 'Help' | translate }}"
            uib-popover="{{
              'Direct sub-users of the deleted user become independent users.' | translate
            }}"
            popover-trigger="'focus'"
            popover-placement="right"
            popover-append-to-body="true"
          ></button>
        </label>
        <label class="c8y-radio">
          <input type="radio" ng-model="vm.subusersAction" value="deleteAll" />
          <span></span>
          <span>{{ 'Delete along with the owner' | translate }}</span>
          <button
            class="btn-help btn-help--sm"
            type="button"
            aria-label="{{ 'Help' | translate }}"
            uib-popover="{{
              'All direct and indirect sub-users of the deleted user will be deleted.' | translate
            }}"
            popover-trigger="'focus'"
            popover-placement="right"
            popover-append-to-body="true"
          ></button>
        </label>
      </div>
    </div>
    <c8y-ui-user-picker
      ng-show="vm.subusersAction === 'newOwner'"
      hidden-users="vm.resolve.user"
      ng-model="vm.newOwner"
      class="row d-block separator-bottom"
    ></c8y-ui-user-picker>
    <div class="alert-footer">
      <button
        class="btn btn-default"
        type="button"
        title="{{ 'Cancel' | translate }}"
        ng-click="vm.dismiss()"
      >
        {{ 'Cancel' | translate }}
      </button>
      <button
        class="btn btn-primary"
        type="button"
        title="{{ 'Delete' | translate }}"
        ng-disabled="!vm.canConfirm()"
        data-cy="c8y-users--delete-user-button"
        ng-click="vm.confirm()"
      >
        {{ 'Delete' | translate }}
      </button>
    </div>
  </div>
</div>
