<div class="modal-header">
  <h3 id="modal-title">{{ vm.title | translate }}</h3>
</div>
<div class="modal-body" id="modal-body">
  <div ng-show="!vm.activationStarted">
    <p translate>You are about to activate a custom domain name.</p>
    <br />
    <p translate>
      After completing the process you will no longer be able to access your tenant with
      <b>{{ vm.resolve.domainName }}</b>
      , instead use your new domain name. If you encounter any problems accessing your tenant,
      please contact support.
    </p>
  </div>
  <div class="alert alert-danger" ng-show="vm.activationStarted && vm.activationException">
    {{ vm.activationException | translate }}
  </div>
  <div class="alert alert-success" ng-show="vm.activationStarted && vm.activationSuccess">
    {{ vm.activationSuccess | translate }}
  </div>
  <div ng-show="vm.redirectUrl">
    <c8y-count-down-redirect redirect-url="vm.redirectUrl"></c8y-count-down-redirect>
  </div>
  <br />
  <div ng-show="vm.activationStarted">
    <ul class="list-unstyled">
      <li ng-repeat="step in vm.activationSteps">
        <i ng-show="!step.status" c8y-icon="circle-o-notch" class="icon-spin"></i>
        <i ng-show="step.status === 'completed'" c8y-icon="check-circle" class="text-success"></i>
        <i ng-show="step.status === 'failure'" c8y-icon="minus-circle" class="text-danger"></i>
        {{ step.title | translate }}
      </li>
    </ul>
  </div>
</div>
<div class="modal-footer">
  <button
    title="{{ 'Cancel' | translate }}"
    class="btn btn-default"
    ng-click="vm.modalInstance.close()"
    ng-show="!vm.activationStarted || vm.activationException"
  >
    {{ 'Cancel' | translate }}
  </button>
  <button
    title="{{ 'Activate' | translate }}"
    class="btn btn-primary"
    ng-click="vm.startActivation()"
    ng-show="!vm.activationStarted"
  >
    {{ 'Activate' | translate }}
  </button>
</div>
