<form name="wizardForm" novalidate>
  <div data-ng-show="step == 1" data-ng-form="wizardFormStep1" class="clearfix">
    <div class="row wizard-block">
      <div class="col-md-12">
        <div class="title" data-translate>Welcome!</div>
        <div data-translate>The following step-by-step procedure will guide you through creating your whistleblowing platform.</div>
      </div>
    </div>
    <div class="pager float-left">
      <button class="ButtonNext btn btn-primary" data-ng-click="step = 2">
        <span data-translate>Next</span>
        <i class="fa-solid fa-arrow-circle-right"></i>
      </button>
    </div>
  </div>
  <div data-ng-show="step == 2" data-ng-form="wizardFormStep2" data-ng-class="{'was-validated': validated2}" class="clearfix">
    <div class="row wizard-block">
      <div class="col-md-6">
        <div class="row form-group">
          <label class="col-md-4">
            <span data-translate>Project name</span>
            <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
          </label>
          <div class="col-md-8">
            <input name="node_name" class="form-control" data-ng-model="wizard.node_name" data-ng-attr-placeholder="{{'Project name' | translate}}" type="text" required>
          </div>
        </div>
      </div>
    </div>
    <div class="pager float-left">
      <button class="ButtonPrevious btn btn-primary" data-ng-click="step = 1">
        <i class="fa-solid fa-arrow-circle-left"></i>
        <span data-translate>Previous</span>
      </button>
      <button class="ButtonNext btn btn-primary" data-ng-click="(validated2 = true) && !wizardFormStep2.$invalid && (step = 4)">
        <span data-translate>Next</span>
        <i class="fa-solid fa-arrow-circle-right"></i>
      </button>
    </div>
  </div>
  <div data-ng-show="step == 3" data-ng-form="wizardFormStep3" data-ng-class="{'was-validated': validated3}" class="clearfix">
    <div class="row wizard-block">
      <div class="title" data-translate>Please choose a configuration profile:</div>
      <div class="col-md-6">
        <div data-ng-include="'views/wizard/profiles.html'"></div>
      </div>
    </div>
    <div class="pager float-left">
      <button class="ButtonPrevious btn btn-primary" data-ng-click="step = 2">
        <i class="fa-solid fa-arrow-circle-left"></i>
        <span data-translate>Previous</span>
      </button>
      <button class="ButtonNext btn btn-primary" data-ng-click="(validated3 = true) && !wizardFormStep3.$invalid && (step = 5)">
        <span data-translate>Next</span>
        <i class="fa-solid fa-arrow-circle-right"></i>
      </button>
    </div>
  </div>
  <div data-ng-show="step == 4" data-ng-form="wizardFormStep4" data-ng-class="{'was-validated': validated4}" class="clearfix">
    <div class="row wizard-block">
      <div class="col-md-12 title" data-translate>Admin</div>
      <div class="col-md-6">
        <div class="row form-group">
          <label class="col-md-4">
            <span data-translate>Username</span>
            <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
          </label>
          <div class="col-md-8">
            <input name="admin_name" class="form-control" data-ng-model="wizard.admin_username" type="text" data-ng-attr-placeholder="{{'Username' | translate}}" required>
          </div>
        </div>
        <div class="row form-group">
          <label class="col-md-4">
            <span data-translate>Name</span>
            <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
          </label>
          <div class="col-md-8">
            <input name="admin_name" class="form-control" data-ng-model="wizard.admin_name" type="text" data-ng-attr-placeholder="{{'Name' | translate}}" required>
          </div>
        </div>
        <div class="row form-group">
          <label class="col-md-4">
            <span data-translate>Email address</span>
            <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
          </label>
          <div class="col-md-8">
            <input name="admin_email" class="form-control" data-ng-model="wizard.admin_mail_address" data-ng-attr-placeholder="{{'Email address' | translate}}" data-ng-pattern="CONSTANTS.email_regexp" type="text" data-ng-class="{'is-invalid': validated4 && (wizardFormStep4.admin_email.$error.required || wizardFormStep4.admin_email.$error.pattern)}" required>
            <div class="text-danger" data-ng-show="wizardFormStep4.admin_email.$error.pattern">
              <span data-translate>Invalid email address</span>
            </div>
          </div>
        </div>
        <div class="row form-group">
          <label class="col-md-4">
            <span data-translate>Password</span>
            <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
          </label>
          <div class="col-md-8">
            <input name="password" class="form-control" data-ng-model="wizard.admin_password" type="password" data-ng-attr-placeholder="{{'Password' | translate}}" autocomplete="off" data-password-strength-validator data-ng-class="{'is-invalid': validated4 && (wizardFormStep4.password.$error.required || (wizardFormStep4.password.$error.passwordStrength))}" required />
            <password-meter data-ng-show="passwordStrengthScore" value="passwordStrengthScore"></password-meter>
            <div class="text-danger" data-ng-show="!wizardFormStep4.password.$error.required && wizardFormStep4.password.$error.passwordStrengthValidator">
              <p data-translate>The chosen password is too weak. A valid password should be at least 12 characters long and contain a variety of characters including at least a lowercase character, a capital character, a number and a special character.</p>
            </div>
          </div>
        </div>
        <div class="row form-group">
          <label class="col-md-4">
            <span data-translate>Password</span> (<span data-translate>Confirm</span>)
            <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
          </label>
          <div class="col-md-8">
            <input name="checkpassword" class="form-control" data-ng-model="admin_check_password" type="password" data-ng-attr-placeholder="{{'Password' | translate}}" autocomplete="off" data-ng-class="{'is-invalid': validated4 && (!wizardFormStep4.password.$error.passwordStrengthValidator && wizard.admin_password && (wizard.admin_password !== admin_check_password))}" required />
            <div class="text-danger" data-ng-show="validated4  && (!wizardFormStep4.password.$error.passwordStrengthValidator && wizard.admin_password && (wizard.admin_password !== admin_check_password))" data-translate>The two passwords do not match</div>
          </div>
        </div>
        <div class="row form-group">
          <div class="col-md-12">
            <div class="form-check">
              <input class="form-check-input inputelem" type="checkbox" data-ng-model="wizard.admin_escrow">
              <span class="form-check-label" data-translate>Make it possible for this admin to reset user passwords.</span>
            </div>
            <div data-translate>We advise selecting this option if you would like to protect data from being lost in the situation where recipients lose their passwords. On the other hand, we would not advise using this feature if you want to setup a system where only recipients are able to access submissions.</div>
          </div>
        </div>
      </div>
    </div>
    <div class="pager float-left">
      <button class="ButtonPrevious btn btn-primary" data-ng-click="step = 2">
        <i class="fa-solid fa-arrow-circle-left"></i>
        <span data-translate>Previous</span>
      </button>
      <button class="ButtonNext btn btn-primary" data-ng-click="(validated4 = true) && !(wizardFormStep4.$invalid || (wizard.admin_password !== admin_check_password)) && (step = 5)">
        <span data-translate>Next</span>
        <i class="fa-solid fa-arrow-circle-right"></i>
      </button>
    </div>
  </div>
  <div data-ng-show="step == 5" data-ng-form="wizardFormStep5" data-ng-class="{'was-validated': validated5}" class="clearfix">
    <div class="row wizard-block">
      <div class="col-md-12 title" data-translate>Recipient</div>
      <div class="col-md-6">
        <div data-ng-if="!wizard.skip_recipient_account_creation">
          <div class="row form-group">
            <label class="col-md-4">
              <span data-translate>Username</span>
              <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
            </label>
            <div class="col-md-8">
              <input name="admin_name" class="form-control" data-ng-model="wizard.receiver_username" type="text" data-ng-attr-placeholder="{{'Username' | translate}}"  data-ng-class="{'is-invalid': wizard.receiver_username === wizard.admin_username}" required>
              <div class="text-danger" data-ng-show="wizard.receiver_username === wizard.admin_username">
                <span data-translate>Please choose a different username.</span>
              </div>
            </div>
          </div>
          <div class="row form-group">
            <label class="col-md-4">
              <span data-translate>Name</span>
              <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
            </label>
            <div class="col-md-8">
              <input name="receiver_name" class="form-control" data-ng-model="wizard.receiver_name" type="text" data-ng-attr-placeholder="{{'Name' | translate}}" data-ng-disabled="wizard.skip_recipient_account_creation" required>
            </div>
          </div>
          <div class="row form-group">
            <label class="col-md-4">
              <span data-translate>Email address</span>
              <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
            </label>
            <div class="col-md-8">
              <input name="receiver_email" class="form-control" data-ng-model="wizard.receiver_mail_address" data-ng-pattern="email_regexp" type="text" data-ng-attr-placeholder="{{'Email address' | translate}}" data-ng-class="{'is-invalid': validated5 && wizardFormStep5.receiver_email.$error.required || wizardFormStep5.receiver_email.$error.pattern}" data-ng-disabled="wizard.skip_recipient_account_creation" required>
              <div class="text-danger" data-ng-show="wizardFormStep5.receiver_email.$error.pattern">
                <span data-translate>Invalid email address</span>
              </div>
            </div>
          </div>
          <div class="row form-group">
            <label class="col-md-4">
              <span data-translate>Password</span>
              <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
            </label>
            <div class="col-md-8">
              <input name="password" class="form-control" data-ng-model="wizard.receiver_password" type="password" data-ng-attr-placeholder="{{'Password' | translate}}" autocomplete="off" data-password-strength-validator data-ng-class="{'is-invalid': validated5 && (wizardFormStep5.password.$error.required || (wizardFormStep5.password.$error.passwordStrength))}" required />
              <password-meter data-ng-show="passwordStrengthScore" value="passwordStrengthScore"></password-meter>
              <div class="text-danger" data-ng-show="!wizardFormStep5.password.$error.required && wizardFormStep5.password.$error.passwordStrengthValidator">
                <p data-translate>The chosen password is too weak. A valid password should be at least 12 characters long and contain a variety of characters including at least a lowercase character, a capital character, a number and a special character.</p>
              </div>
            </div>
          </div>
          <div class="row form-group">
            <label class="col-md-4">
              <span data-translate>Password</span> (<span data-translate>Confirm</span>)
              <span class="text-danger" data-uib-tooltip="{{'This field is mandatory' | translate}}">*</span>
            </label>
            <div class="col-md-8">
              <input name="checkpassword" class="form-control" data-ng-model="recipient_check_password" type="password" data-ng-attr-placeholder="{{'Password' | translate}}" autocomplete="off" data-ng-class="{'is-invalid': validated4 && (!wizardFormStep5.password.$error.passwordStrengthValidator && wizard.receiver_password && (wizard.receiver_password !== recipient_check_password))}" required />
              <div class="text-danger" data-ng-show="validated4  && (!wizardFormStep5.password.$error.passwordStrengthValidator && wizard.receiver_password && (wizard.receiver_password !== recipient_check_password))" data-translate>The two passwords do not match</div>
            </div>
          </div>
        </div>
        <div class="row form-group">
          <div class="col-md-12">
            <div class="form-check">
              <input class="form-check-input inputelem" type="checkbox" data-ng-model="wizard.skip_recipient_account_creation">
              <span class="form-check-label" data-translate>Skip the recipient account creation.</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pager float-left">
      <button class="ButtonPrevious btn btn-primary" data-ng-click="step = 4">
        <i class="fa-solid fa-arrow-circle-left"></i>
        <span data-translate>Previous</span>
      </button>
      <button class="ButtonNext btn btn-primary" data-ng-click="(validated5 = true) && !(wizardFormStep5.$invalid || (wizard.receiver_username === wizard.admin_username)) && (step = 6)">
        <span data-translate>Next</span>
        <i class="fa-solid fa-arrow-circle-right"></i>
      </button>
    </div>
  </div>
  <div data-ng-show="step == 6" data-ng-form="wizardFormStep6" data-ng-class="{'was-validated': validated6}" class="clearfix">
    <div class="row wizard-block">
      <div class="col-md-12">
        <div class="form-group">
          <div class="title" data-translate>License</div>
          <div id='wizardLicense' class="tos-text" data-ng-include="'license.txt'"></div>
          <div class="form-check">
            <input name="tosAccept" class="tos-agreement-input form-check-input inputelem" type="checkbox" data-ng-model="tosAccept" required>
            <span class="tos-agreement-label form-check-label" data-translate>I have read and agree to the terms of the license.</span>
          </div>
          <div class="form-check" data-ng-if="public.node.root_tenant">
            <input class="form-check-input inputelem" data-ng-model="wizard.enable_developers_exception_notification" type="checkbox">
            <span data-translate>Notify developers of software problems</span>
            <div data-translate>By enabling this feature, you will contribute to the development and security of the platform.</div>
          </div>
        </div>
      </div>
    </div>
    <div class="pager float-left">
      <button class="ButtonPrevious btn btn-primary" data-ng-click="step = 5">
        <i class="fa-solid fa-arrow-circle-left"></i>
        <span data-translate>Previous</span>
      </button>
      <button class="ButtonNext btn btn-primary" data-ng-click="(validated6 = true) && !wizardFormStep6.$invalid && complete()">
        <span data-translate>Next</span>
        <i class="fa-solid fa-arrow-circle-right"></i>
      </button>
    </div>
  </div>
  <div data-ng-show="step == 7" class="clearfix">
    <div class="row wizard-block">
      <div class="col-md-10">
        <div class="congratulations">
          <div class="title" data-translate>Congratulations!</div>
          <div data-translate>You have completed the platform wizard.</div>
        </div>
      </div>
    </div>
    <div class="pager float-left">
      <button class="ButtonNext btn btn-primary" data-ng-click="goToAdminInterface()" type="submit"><span data-translate>Proceed</span></button>
    </div>
  </div>
</form>
