{% extends "base.html" %}
{% load static %}
{% block title %}
  Sign in to Continue
{% endblock title %}
{% block content %}
  <div class="flex justify-center min-h-screen w-100 place-items-center bg-gradient">
    <div class="p-8 mx-4 space-y-3 shadow-lg bg-background rounded-4 w-100" style="max-width:30rem">
      {% if app.app_logo %}
        <div class="mb-5 text-center">
          <img src="{{ app.app_logo }}" alt="{{ app.app_name }} Logo" style="height:3.25rem"/>
        </div>
      {% endif %}
      {% if success is None or success is False %}
        <h1 class="text-3xl font-bold tracking-tight text-center text-black">Sign in with email</h1>
        <p class="mb-5 font-medium text-center text-gray-500 text-md">Please authenticate yourself to
          continue.</p>
        {% if error and error is not NONE %}
          <div class="bg-danger bg-opacity-10 p-3.5 rounded-2 text-danger">
            <h2 class="mb-1 font-semibold">Authentication Error</h2>
            <p class="text-md">{{ error }}</p>
          </div>
        {% endif %}
        <form method="post" class="mt-6 mb-4 space-y-3 login-form">
          {% csrf_token %}
          {% if totp %}
            <div class="bg-warning bg-opacity-10 p-3.5 rounded-2 text-gray-900">
              <h2 class="mb-1 font-semibold">2FA Code Required</h2>
              <p class="text-md">Please use your authenticator app and enter the code below.</p>
            </div>
            <div class="space-y-1">
              {{ form.email.label_tag }}
              <input type="email" name="email" value="{{ form.email.value }}" readonly>
            </div>
            <div class="space-y-1">
              {{ form.password.label_tag }}
              {{ form.password }}
            </div>
            <div class="space-y-1">
              {{ form.code.label_tag }}
              {{ form.code }}
            </div>
          {% else %}
            <div class="space-y-1">
              {{ form.email.label_tag }}
              {{ form.email }}
            </div>
            {% if not passwordless %}
              <div class="space-y-1">
                {{ form.password.label_tag }}
                {{ form.password }}
              </div>
              <div class="text-right">
                <a href="{% url 'forgot_password' %}?redirect={{ redirect }}" class="text-sm font-medium text-gray-600">Forgot
                  password?</a>
              </div>
            {% endif %}
          {% endif %}
          <button type="submit" class="w-full mt-5 btn-primary">
            {% if not passwordless %}
              Sign In
            {% else %}
              Send Me a Magic Link
            {% endif %}
          </button>
        </form>
        <div class="my-4 text-xs text-center text-gray-400">OR CONTINUE WITH</div>
        {% if passwordless %}
          <div>
            <a class="w-full text-gray-600 btn" href="?method=&redirect={{ redirect }}">Sign In Using Password</a>
          </div>
        {% else %}
          <div>
            <a class="w-full text-gray-600 btn" href="?method=passwordless&redirect={{ redirect }}">Request Magic
              Link</a>
          </div>
        {% endif %}
        {% if registration_enabled %}
          <p class="mt-6 text-gray-700">
            Don't have an account? <a href="{% url 'register' %}?redirect={{ redirect }}"
                                      class="text-primary">Register</a>
          </p>
        {% endif %}
        <div class="mt-6 text-xs text-center text-gray-500">
          {% if app.app_name %}{{ app.app_name }}.{% endif %}
          Secure session established.
        </div>
      {% else %}
        {% if success and not passwordless %}
          <h1 class="text-3xl font-bold tracking-tight text-center text-black">Successfully Signed In!</h1>
          {% if redirect %}
            <p class="font-medium leading-normal text-center text-gray-500 text-md">Please wait while you are
              being redirected.</p>
            <div class="text-center truncate">
              <a class="text-center text-sm" href="{{ redirect }}">{{ redirect }}</a>
            </div>
          {% else %}
            <p class="font-medium leading-normal text-center text-gray-500 text-md">You can close this window now.</p>
          {% endif %}
        {% elif success and passwordless %}
          <div class="flex justify-center gap-2 text-3xl font-bold tracking-tight text-center text-black place-items-center">
            <div class="leading-none text-warning">
              <svg xmlns="http://www.w3.org/2000/svg"
                   width="28"
                   height="28"
                   viewBox="0 0 24 24"
                   fill="currentColor"
                   stroke="currentColor"
                   stroke-width="2"
                   stroke-linecap="round"
                   stroke-linejoin="round">
                <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/>
                <path d="M20 3v4"/>
                <path d="M22 5h-4"/>
                <path d="M4 17v2"/>
                <path d="M5 18H3"/>
              </svg>
            </div>
            <span>Magic Link Sent!</span>
          </div>
          <p class="font-medium leading-normal text-center text-gray-500 text-md">
            Please check your inbox for our email. If it is not there, then check your spam or junk folder.
          </p>
          <div class="mt-6 mb-4 text-sm text-center text-gray-500">OR</div>
          <a class="w-full btn" href="?method=&redirect={{ redirect }}">Sign In Using Password</a>
        {% endif %}
      {% endif %}
    </div>
  </div>
  {% if success and not passwordless and redirect %}
    <script>
        setTimeout(() => {
            window.location.href = "{{ redirect }}";
        }, 2000);
    </script>
  {% endif %}
{% endblock content %}
