{% extends "conjunto/app_base.html" %}
{% load i18n static conjunto %}

{% block top_bar %}{% endblock %}
{% block sidebar %}{% endblock %}
{% block header %}{% endblock %}

{% block content %}
    {% block login_brand %}
        <div class="text-center mb-4">
            <a href="/" class="navbar-brand navbar-brand-autodark navbar-brand-centered">
                <img src="{% static 'brand.svg' %}" height="48"
                     alt="{{ site.name|default:globals.project_title }}"
                     class="navbar-brand-image"
                     onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';">
                <span style="display:none;">{{ site.name|default:globals.project_title }}</span>
            </a>
        </div>
    {% endblock login_brand %}

    {% block login_welcome %}{% endblock login_welcome %}

    <div class="card card-md">
        <div class="card-body">
            <h2 class="h2 text-center mb-4">{% block login_title %}{% translate "Login to your account" %}{% endblock login_title %}</h2>
            <form action="{% url 'login' %}" method="post" autocomplete="off" novalidate="">
                {% block login_form_top %}{% endblock login_form_top %}
                {% csrf_token %}
                {% if form.non_field_errors %}
                    <div class="alert alert-danger" role="alert">
                        <div class="d-flex">
                            <div>
                                {% for error in form.non_field_errors %}
                                    <div>{{ error }}</div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endif %}
                <div class="mb-3">
                    <label class="form-label">{% translate "Email address" %}</label>
                    <input type="email" name="username" class="form-control {% if form.username.errors %}is-invalid{% endif %}" placeholder="{% translate 'your@email.com' %}" autocomplete="off" value="{{ form.username.value|default:'' }}">
                    {% if form.username.errors %}
                        <div class="invalid-feedback">
                            {% for error in form.username.errors %}
                                <div>{{ error }}</div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                <div class="mb-2">
                    <label class="form-label">
                        {% translate "Password" %}
                        {% url 'password_reset' as password_reset_url %}
                        {% if password_reset_url %}
                            <span class="form-label-description">
                                <a href="{{ password_reset_url }}">{% translate "I forgot password" %}</a>
                            </span>
                        {% endif %}
                    </label>
                    <div class="input-group input-group-flat">
                        <input type="password" name="password" class="form-control {% if form.password.errors %}is-invalid{% endif %}" placeholder="{% translate 'Your password' %}" autocomplete="off">
                        <span class="input-group-text">
                    <a href="#" class="link-secondary" data-bs-toggle="tooltip" aria-label="{% translate 'Show password' %}" data-bs-original-title="{% translate 'Show password' %}">
                        <i class="ti ti-eye fs-2"></i>
                    </a>
                  </span>
                        {% if form.password.errors %}
                            <div class="invalid-feedback">
                                {% for error in form.password.errors %}
                                    <div>{{ error }}</div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
                <div class="mb-2">
                    <label class="form-check">
                        <input type="checkbox" name="remember_me" class="form-check-input"{% if form.remember_me.value %} checked{% endif %}>
                        <span class="form-check-label">{% translate "Remember me on this device" %}</span>
                    </label>
                </div>
                <div class="form-footer">
                    <button type="submit" class="btn btn-primary w-100">{% translate "Sign in" %}</button>
                </div>
            </form>
        </div>
    </div>

    {% block login_alternative_methods %}
        {% login_methods as methods %}
        {% if methods %}
            <div class="hr-text hr-text-center mt-4">{% translate "Or sign in with" %}</div>
            <div class="row g-2 mt-2">
                {% for method in methods %}
                    <div class="col">
                        {% if method.rendered %}
                            {{ method.rendered|safe }}
                        {% else %}
                            <a href="{{ method.url }}" class="btn btn-outline-secondary w-100" data-login-method="{{ method.name }}">
                                {% if method.icon %}<i class="ti ti-{{ method.icon }} me-1"></i>{% endif %}
                                {{ method.label }}
                            </a>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    {% endblock login_alternative_methods %}

    {% block login_extensions %}{% endblock login_extensions %}

    {% block login_footer %}{% endblock login_footer %}
{% endblock %}