{% extends "core/site_base.html" %}
{% block tabtitle %}Login - Simmate{% endblock %}
{% block body %}
    {% load static %}
    {% load account socialaccount %}
    {% simmate_setting "website.require_login_internal" as REQUIRE_LOGIN_INTERNAL %}
    {% simmate_setting "website.login_message" as LOGIN_MESSAGE %}
    <div class="account-pages pt-2 pt-sm-5 pb-4 pb-sm-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xxl-4 col-lg-5">
                    <div class="card border border-dark">
                        <div class="card-header pt-3 pb-3 text-center bg-dark border-0">
                            <img src="{% static 'images/simmate-geometries-dark.svg' %}" height="60">
                        </div>
                        <div class="card-body p-4">
                            <div class="text-center w-75 m-auto">
                                <h4 class="text-dark-50 text-center pb-0 fw-bold">Sign In</h4>
                                <p class="text-muted mb-3">
                                    {% if next %}
                                        {% if user.is_authenticated %}
                                            Your account doesn't have access to this page. To proceed,
                                            please login with an account that has access.
                                        {% else %}
                                            Please login to see this page.
                                        {% endif %}
                                    {% else %}
                                        {% if LOGIN_MESSAGE %}
                                            {{ LOGIN_MESSAGE }}
                                        {% else %}
                                            Please login to access extra features.
                                        {% endif %}
                                    {% endif %}
                                </p>
                            </div>
                            <!-- Third-party sign-in buttons -->
                            {% get_providers as socialaccount_providers %}
                            {% if socialaccount_providers %}
                                <div class="d-grid gap-2 mx-auto" style="max-width: 250px;">
                                    {% for provider in socialaccount_providers %}
                                        {% if provider.id == "google" %}
                                            <a class="btn btn-danger"
                                               href="{% provider_login_url provider.id process='login' scope=scope auth_params=auth_params %}"><i class="bi bi-google"></i> Log in using Google</a>
                                        {% elif provider.id == "github" %}
                                            <a class="btn btn-secondary"
                                               href="{% provider_login_url provider.id process='login' scope=scope auth_params=auth_params %}"><i class="bi bi-github"></i> Log in using Github</a>
                                        {% elif provider.id == "microsoft" %}
                                            <a class="btn btn-info"
                                               href="{% provider_login_url provider.id process='login' scope=scope auth_params=auth_params %}"><i class="bi bi-microsoft"></i> Log in using Microsoft</a>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            {% endif %}
                            {% if socialaccount_providers and not REQUIRE_LOGIN_INTERNAL %}
                                <div class="text-center py-4">
                                    <div class="position-relative my-3"
                                         style="max-width: 250px;
                                                margin: 1rem auto">
                                        <hr>
                                        <span class="position-absolute top-50 start-50 translate-middle bg-body px-2">OR</span>
                                    </div>
                                </div>
                            {% endif %}
                            {% if not REQUIRE_LOGIN_INTERNAL %}
                                {% if form.errors %}
                                    <div class="alert alert-danger">
                                        <ul class="mb-0">
                                            {% for field, errors in form.errors.items %}
                                                {% for error in errors %}<li>{{ error|escape }}</li>{% endfor %}
                                            {% endfor %}
                                        </ul>
                                    </div>
                                {% endif %}
                                <form method="POST" action="{% url 'account_login' %}" novalidate>
                                    {% csrf_token %}
                                    <div class="form-floating">
                                        <input type="text"
                                               name="login"
                                               placeholder="Username"
                                               autocomplete="username"
                                               maxlength="150"
                                               required=""
                                               id="id_login"
                                               class="form-control mb-3">
                                        <label for="id_login">Username</label>
                                    </div>
                                    <div class="form-floating">
                                        <input type="password"
                                               name="password"
                                               placeholder="Password"
                                               autocomplete="current-password"
                                               required=""
                                               id="id_password"
                                               class="form-control mb-2">
                                        <label for="id_password">Password</label>
                                    </div>
                                    {% comment %}
                                    <label for="id_remember" class="mb-3">
                                        <small>Remember Me</small>
                                    </label>
                                    <input type="checkbox" name="remember" id="id_remember">
                                    {% endcomment %}
                                    {% if next %}
                                        <input type="hidden" name="next" value="{{ next }}" />
                                    {% endif %}
                                    <div class="mb-3 mb-0 text-center">
                                        <button class="primaryAction btn btn-success" type="submit">Log In</button>
                                    </div>
                                    <div class="mt-3 mb-2 mb-0 text-center">
                                        <a href="#" class="text-muted mt-1"><small>Forgot your password?</small></a>
                                    </div>
                                </form>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}