{% extends 'layouts/main.django' %}

{% block content %}
  <div class="centered-main">
    <div class="bordered-box">
      <img src="/static/images/25631a9833b39de4053f9eed8b2d3ae6.webp" alt="Login Image" class="q-img" />
      <h1>Login to {{ Appname }}</h1>
      <p>Welcome back! Please enter your credentials to continue.</p>
      <form action="/account/login" method="POST" class="ibform">
        {% if Next %}
          <input type="hidden" name="next" value="{{ Next }}" />
        {% endif %}
        {% if Error %}
          <div class="error">{{ Error|safe }}</div>
        {% endif %}
        <div class="fgroup">
          <div class="fg-main">
            <label for="username">Username</label>
          </div>
          <div class="fg-sub">
            <input type="text" class="itext" id="username" name="username" required value="{{ Username }}" maxlength="72" autocomplete="username" pattern="[a-zA-Z0-9_-]+" />
            <small>3-72 characters, letters, numbers, underscores, and hyphens only</small>
          </div>
        </div>
        <div class="fgroup">
          <div class="fg-main">
            <label for="password">Password</label>
          </div>
          <div class="fg-sub">
            <input type="password" id="password" name="password" required minlength="8" />
          </div>
        </div>
        <div class="fbtngrp">
          <input type="submit" value="Login" />
          <input type="button" value="Clear" onclick="this.form.reset();" />
          <input type="button" value="Forgot Password?" onclick="window.location.href='/account/forgot?mode=password';" />
          <input type="button" value="Forgot Username?" onclick="window.location.href='/account/forgot?mode=username';" />
        </div>
      </form>
      <p class="text-center">
        Don't have an account? <a href="/register">Register here</a>.
      </p>
    </div>
  </div>
{% endblock %}