<div ng-controller="GlobalRoleSaveConfirmCtrl as vm">
  <div class="c8y-prompt alert alert-warning">
    <h3 class="m-b-16">
      <i c8y-icon="exclamation-triangle"></i>
      <span>{{ (vm.action === 'update' ? vm.saveTitle : vm.deleteTitle) | translate }}</span>
    </h3>
    <p class="text-break-word">
      <span translate ng-if="vm.action === 'update'">
        You are about to save changes in the global role which might affect security. To apply these changes immediately, you'll need to terminate the sessions of all users with this role.
      </span>
      <span translate ng-if="vm.action === 'delete'">
        You are about to delete the global role. To apply these changes immediately, you'll need to terminate the sessions of all users with this role.
      </span>
      <span
        ng-if="vm.devicesWarning"
        translate
      >
        Before modifying permissions for the "Device User`role`" role, please be aware that such changes can significantly impact platform security.
        When defining permissions for the "Device User`role`", please consider that individual devices might get compromised.
      </span>
    </p>
    <p class="text-break-word">
      <span translate>
        Enter the following code
        <code>{{ vm.code }}</code>
        to proceed:
      </span>
    </p>
    <form
      class="form-inline m-t-24"
      ng-submit="vm.canConfirm() && vm.$close()"
    >
      <div class="form-group">
        <label for="confirmString">{{ 'Confirm' | translate }}:&nbsp;</label>
        <input
          class="form-control"
          id="confirmString"
          placeholder="{{ 'Type here' | translate }}"
          type="text"
          ng-model="vm.confirmString"
          c8y-autofocus
        />
      </div>
    </form>
    <div class="alert-footer">
      <button
        class="btn btn-default"
        title="{{ 'Cancel' | translate }}"
        ng-click="vm.$dismiss()"
        translate
      >
        Cancel
      </button>
      <button
        class="btn btn-primary"
        title="{{ (vm.action === 'update' ? vm.saveLabel : vm.deleteLabel) | translate }}"
        ng-click="vm.$close({logout: false})"
        ng-disabled="!vm.canConfirm()"
      >
        {{ (vm.action === 'update' ? vm.saveLabel : vm.deleteLabel) | translate }}
      </button>
      <button
        title="{{ (vm.action === 'update' ? vm.saveAndLogoutUserLabel : vm.deleteAndLogoutUserLabel) | translate }}"
        class="btn btn-primary"
        ng-click="vm.$close({logout: true})"
        ng-disabled="!vm.canConfirm()"
      >
        {{ (vm.action === 'update' ? vm.saveAndLogoutUserLabel : vm.deleteAndLogoutUserLabel) | translate }}
      </button>
    </div>
  </div>
</div>
