<div class="viewport-modal">
<c8y-wizard
  on-dismiss="vm.modalInstance.dismiss()"
  on-close="vm.finishProcess(path)"
  initial-flow="['select']"
>
  <header class="text-white">
    <div style="font-size: 62px;">
      <span c8y-icon="{{ vm.CONFIG.icon }}"></span>
    </div>
    <h4
      class="text-uppercase m-0"
      style="letter-spacing: 0.15em;"
      ng-hide="vm.customTitle"
      translate
      id="modal-title"
    >
      Add device protocol
    </h4>
    <h4 class="text-uppercase m-0" style="letter-spacing: 0.15em;" ng-show="vm.customTitle">
      {{ vm.customTitle | translate }}
    </h4>
  </header>
  <steps id="modal-body">
    <!-- main page with device protocol selection type selection -->
    <c8y-wizard-step step-id="select">
      <c8y-device-protocol-select></c8y-device-protocol-select>
    </c8y-wizard-step>

    <c8y-wizard-step ng-repeat="step in vm.flow" step-id="{{ step }}">
      <c8y-ui-component component-name="step"></c8y-ui-component>
    </c8y-wizard-step>

    <c8y-wizard-step step-id="error">
      <div class="modal-inner-scroll" >
        <div class="p-24">
          <div class="alert alert-danger">
            <span ng-show="vm.wizardCtrl.data.errorMsg">{{
              vm.wizardCtrl.data.errorMsg | translate
            }}</span>
            <span ng-hide="vm.wizardCtrl.data.errorMsg" translate>An error has occurred.</span>
          </div>
        </div>
      </div>

      <div class="c8y-wizard-footer modal-footer">
        <button
          title="{{ 'Cancel' | translate }}"
          class="btn btn-default"
          ng-click="vm.wizardCtrl.dismiss()"
          translate
        >
          Cancel
        </button>
        <button
          title="{{ 'Retry' | translate }}"
          class="btn btn-default"
          ng-show="vm.wizardCtrl.data.backStep !== undefined"
          ng-click="vm.wizardCtrl.goTo(vm.wizardCtrl.data.backStep);vm.wizardCtrl.data.backStep=undefined;"
          translate
        >
          Retry
        </button>
      </div>
    </c8y-wizard-step>
  </steps>
</c8y-wizard>
</div>