{% extends "base.html" %}

{% block content %}
<div id="page-data"
     data-url-fido2-begin="{{ url_for('fido2_auth_begin', _external=True, _scheme='https') }}"
     data-url-fido2-complete="{{ url_for('fido2_auth_complete', _external=True, _scheme='https') }}"></div>
<div id="page-i18n"
     data-label-need-username="{{ gettext('Please enter your username first.') }}"
     data-label-https-required="{{ gettext('WebAuthn requires HTTPS. Please access this page via HTTPS.') }}"
     data-label-webauthn-unsupported="{{ gettext('WebAuthn is not supported in this browser.') }}"
     data-label-requesting-challenge="{{ gettext('Requesting authentication challenge...') }}"
     data-label-failed-start="{{ gettext('Failed to start authentication.') }}"
     data-label-touch-key="{{ gettext('Please touch your security key...') }}"
     data-label-verifying="{{ gettext('Verifying...') }}"
     data-label-auth-failed="{{ gettext('Authentication failed.') }}"
     data-label-login-success="{{ gettext('Login successful! Redirecting...') }}"
     class="is-hidden"></div>
<div class="login-wrapper">
  <div class="login-card">
    <h1>{% if reauth %}{{ gettext("Re-authenticate") }}{% else %}{{ gettext("Sign In") }}{% endif %}</h1>
    {% if reauth %}
      <p>{{ gettext("Please verify your identity to continue.") }}</p>
    {% endif %}
    <form action="" method="post" name="login" id="loginForm">
        {{ form.hidden_tag() }}
        <label for="username">{{ gettext("Username") }}</label>
        {% if reauth %}
          {{ form.username(size=80, id="username", class="", readonly=true, value=reauth_username) }}
        {% else %}
          {{ form.username(size=80, id="username", class="") }}
        {% endif %}
        {% for error in form.username.errors %}
          <span class="error-msg">[{{ error }}]</span>
        {% endfor %}

        {% if not reauth %}
          <label for="password">{{ gettext("Password") }}</label>
          {{ form.password(size=80, id="password", class="") }}
          {% for error in form.password.errors %}
            <span class="error-msg">[{{ error }}]</span>
          {% endfor %}
        {% endif %}

        <div class="login-buttons">
          {% if not reauth %}
            <input type="submit" value="{{ gettext('Sign In') }}" class="btn btn-primary">
          {% endif %}
          <button type="button" id="fido2LoginBtn" class="btn btn-secondary">{{ gettext("Security Key") }}</button>
        </div>
    </form>
    <div class="status-msg" id="fido2Status"></div>
    <div class="error-msg" id="fido2Error"></div>
    <div class="logo-container">
      <img src="{{ url_for('static', filename='otpme.png') }}" alt="OTPme Logo" class="logo">
    </div>
  </div>
</div>

<script src="{{ url_for('static', filename='login.js') }}"></script>
{% endblock %}