{# Password prompt page #}
{% extends "base.html" %}
{% block title %}
  Choose Password
{% endblock title %}
{% block main %}
  <section class="py-5 bg-gray-50 dark:bg-gray-900">
    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto max-w-md animate__animated animate__fadeIn">
      <a class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
        {{ _("Complete your access") }}
      </a>
      <div class="w-full bg-white rounded-lg shadow dark:border dark:bg-gray-800 dark:border-gray-700">
        <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
          <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
            {{ _("Choose a password for the remaining servers") }}
          </h1>
          {% if error %}<div class="text-red-500 text-sm">{{ error }}</div>{% endif %}
          <form class="space-y-4 md:space-y-6" method="post">
            <input type="hidden" name="code" value="{{ code }}" />
            <div>
              <label for="password"
                     class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ _("Password") }}</label>
              <input type="password"
                     name="password"
                     id="password"
                     minlength="8"
                     class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
                     required>
            </div>
            <div>
              <label for="confirm"
                     class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                {{ _("Confirm Password") }}
              </label>
              <input type="password"
                     name="confirm"
                     id="confirm"
                     minlength="8"
                     class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
                     required>
            </div>
            <div class="flex items-center">
              <input id="generate"
                     name="generate"
                     type="checkbox"
                     value="true"
                     class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500">
              <label for="generate"
                     class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                {{ _("Generate a strong random password instead") }}
              </label>
            </div>
            <button type="submit"
                    class="w-full text-white bg-primary hover:bg-primary-dark focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center">
              {{ _("Continue") }}
            </button>
          </form>
        </div>
      </div>
    </div>
  </section>
{% endblock main %}