{% extends "core_components/site_base.html" %}

{% block tabtitle %}
Simmate | Login
{% endblock %}

{% block banner %}
{% include "core_components/header.html"%}
{% endblock %}

{% block body %}

{% load crispy_forms_tags %}
{% load static %}
{% load account socialaccount %}

<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">

                    <!-- Logo -->
                    <div class="card-header pt-3 pb-3 text-center bg-light">
                        <a href="#">
                            <span><img src="{% static 'images/simmate-geometries.svg' %}" height="60"></span>
                        </a>
                    </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-2">
                                {% 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 %}
                                Please login to access extra features.
                                {% endif %}
                            </p>
                        </div>

                        <!-- Third-party sign-in buttons -->
                        {% get_providers as socialaccount_providers %}
                        {% if socialaccount_providers %}
                        <div class="text-center pb-2">
                            {% for provider in socialaccount_providers %}
                            <div class="m-1">
                                {% if provider.id == "google" %}

                                <a class="btn btn-outline-danger"
                                    href="{% provider_login_url provider.id process='login' scope=scope auth_params=auth_params %}"><i
                                        class="mdi mdi-google"></i> Log in using Google</a>
                                {% endif %}
                                {% if provider.id == "github" %}
                                <a class="btn btn-outline-secondary"
                                    href="{% provider_login_url provider.id process='login' scope=scope auth_params=auth_params %}"><i
                                        class="mdi mdi-github"></i> Log in using Github</a>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}

                        <!-- Regular sign-in -->
                        <form method="POST" action="{% url 'account_login' %}" novalidate>
                            {% csrf_token %}
                            {{ form | crispy }}
                            {% if next %}
                            <input type="hidden" name="next" value="{{ next }}" />
                            {% endif %}
                            <div class="mt-3 mb-2 mb-0 text-center">
                                <a href="#" class="text-muted mt-1"><small>Forgot your
                                        password?</small></a>
                            </div>
                            <div class="mb-3 mb-0 text-center">
                                <button class="primaryAction btn btn-primary" type="submit"> Log In </button>
                            </div>
                        </form>

                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-12 text-center">
                        <p class="text-muted">Don't have an account?
                            <a href="{% url 'account_signup' %}" class="text-muted ms-1"><b>Sign Up</b></a>
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
{% endblock %}