{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% load allauth account %}

{% block head_title %}
    {% trans "Sign In" %}
{% endblock head_title %}

{% block content %}
    <!-- Login Start-->
    <div class="auth-main">
        <div class="codex-authbox">
            <div class="auth-header">
                <div class="codex-brand">
                    <a href="{% url 'main:home' %}">
                        <img class="img-fluid light-logo" src="{% static 'main/assets/images/logo/logo.png' %}" alt="logo">
                        <img class="img-fluid dark-logo" src="{% static 'main/assets/images/logo/logo.png' %}" alt="logo">
                    </a>
                </div>
                <h3>{% trans "Welcome to Creative School" %}</h3>
                <h6>{% trans "Don't have an account?" %} <a class="font-primary" href="{{ signup_url }}">{% trans "Create an account" %}</a></h6>
            </div>
            {% if not SOCIALACCOUNT_ONLY %}
                {% url 'account_login' as login_url %}
                <form method="post" action="{{ login_url }}">
                    {% csrf_token %}
                    <div class="form-group">
                        <label class="form-label" for="id_login">{% trans "Email" %}</label>
                        <input class="form-control" type="email" name="login" id="id_login" placeholder="{% trans 'Enter Your Email' %}" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="id_password">{% trans "Password" %}</label>
                        <div class="input-group group-input">
                            <input class="form-control showhide-password" type="password" name="password" id="id_password" placeholder="{% trans 'Enter Your Password' %}" required>
                            <span class="input-group-text toggle-show bi bi-eye"></span>
                        </div>
                    </div>
                    <div class="form-group mb-0">
                        <div class="auth-remember">
                            <div class="form-check custom-chek">
                                <input class="form-check-input" id="remember" type="checkbox" name="remember">
                                <label class="form-check-label" for="remember">{% trans "Remember Me" %}</label>
                            </div>
                            <a class="font-primary f-pwd" href="{% url 'account_reset_password' %}">{% trans "Forgot your password?" %}</a>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary" type="submit">
                            <i class="bi bi-sign-in"></i> {% trans "Login" %}
                        </button>
                    </div>
                    {{ redirect_field }}
                </form>
            {% endif %}
        </div>
    </div>
    <!-- Login End -->
{% endblock content %}

{% block extra_body %}
    {{ block.super }}
    {% if PASSKEY_LOGIN_ENABLED %}
        {% include "mfa/webauthn/snippets/login_script.html" with button_id="passkey_login" %}
    {% endif %}
{% endblock %}