{# vim:set softtabstop=2: -#}
{% set title = 'Wizard Credentials' -%}
{#% set refresh = 15 %#}
{% include "_header.html" %}
{% set active="credentials" %}

<div class="container">
  <div class="row">
      <div class="col-md-12">
          <h1>Credentials Setup</h1>
            <p>Please set the administrator username and password.<br/></p>

            <form method="post" id="form">
            {% set errors = wizard.errors.get('credentials', {}) %}
            <div class="form-group row">
              <label for="username" class="col-sm-2 col-form-label">Username:</label>
              <div class="col-sm-10">
                <input type="text" class="form-control {{ 'is-invalid' if errors.get('username') or errors.get('username_spaces') else '' }}" id="username" name="username" value="{{ wizard.username or '' }}" required>
                <div class="invalid-feedback">
                  {% if errors.get('username_spaces') %}
                    <p>Username cannot contain space at the beginning nor the end</p>
                  {% elif errors.get('username') %}
                    <p>Please provide a username in valid format and with sufficient length.</p>
                  {% endif %}
                </div>
              </div>
            </div>

            {% if wizard.restored_digest %}
              <div>Your password is restored from your configuration file. If you want to set a new one, please fill it into the form below.</div><br/>
              {% set password_placeholder = "Restored from configuration file" %}
            {% endif %}

            <div class="form-group row">
              <label for="password" class="col-sm-2 col-form-label">Password:</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control {{ 'is-invalid' if errors.get('password') or errors.get('password_spaces') else '' }}" id="password" name="password" placeholder="{{ password_placeholder if password_placeholder else '' }}">
                  <div class="invalid-feedback">
                    {% if errors.get('password_spaces') %}
                      <p>Password cannot contain space at the beginning nor the end</p>
                    {% elif errors.get('password') %}
                      <p>Please provide a strong password in correct format and with sufficient length.</p>
                    {% endif %}
                  </div>
                </div>
            </div>

            <div class="form-group row">
              <label for="repassword" class="col-sm-2 col-form-label">Password again:</label>
              <div class="col-sm-10">
                <input type="password" class="form-control {{ 'is-invalid' if errors.get('repassword') else '' }}" id="repassword" name="repassword" placeholder="{{ password_placeholder if password_placeholder else '' }}">
                <div class="invalid-feedback">
                  Passwords must be same.
                </div>
              </div>
            </div>

              <p>PrusaLink will use HTTP Digest authorization. Username length must be at least <i>3 characters</i> long<br />
              Passwords cannot contain spaces at the beginning nor the end, and must meet at least one of these conditions:<br />
              <li>Minimal length 8 characters, including one lowercase letter, one uppercase letter and one number</li>
              <li>Minimal length 8 characters, including one non-alphanumeric character (e.g. @)</li>
              <li>Minimal length 15 characters</li>
              </p>


            <div class="container navigation">
              <div class="row">
                  <div class="col">
                    <a href={{ "/wizard" | prefixed }} class="btn btn-back btn-outline-light full-width"><img src="../img/arrow-left.svg" height="16" /> BACK | Welcome</a>
                  </div>
                  <div class="col-sm-auto">
                    <button onclick="document.getElementById('form').submit();" type="submit" class="btn btn-outline-light full-width">Printer info | NEXT <img src="../img/arrow-right.svg" height="16" /></button>
                  </div>
              </div>
            </div>

          </form>
        </div>{# /col-md-9 so end of content  #}
      </div>{# /row #}
    </div>{# /container #}

    <script>
        function changeIconImage(img) {
            document.getElementById('restore_icon').style.content = `url(${img})`;
        }

        function useIniFile() {
        var checked = document.getElementById("use_ini_file").checked;
        var ini_file = document.getElementById("ini_file");
        if (checked)
        {
          ini_file.style.display = "block";
        } else {
          ini_file.style.display = "none";
        }
        }
    </script>


    {% include "_wizard.html" %}
    {% include "_footer.html" %}