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

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

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


{% block body %}

{% load static %}
{% load crispy_forms_tags %}

<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 mt-0 fw-bold">Free Sign Up</h4>
                        </div>

                        <form id="signup_form" method="post" action="{% url 'account_signup' %}" novalidate>
                            {% csrf_token %}
                            {{ form | crispy }}
                            {% if next %}
                            <input type="hidden" name="next" value="{{ next }}" />
                            {% endif %}

                            <div class="mb-3 mt-3 text-center">
                                <button class="btn btn-primary" type="submit">Sign Up</button>
                            </div>
                        </form>

                    </div> <!-- end card-body -->
                </div>
                <!-- end card -->

                <div class="row mt-3">
                    <div class="col-12 text-center">
                        <p class="text-muted">Already have account? <a href="{% url 'account_login' %}"
                                class="text-muted ms-1"><b>Log
                                    In</b></a></p>
                    </div> <!-- end col-->
                </div>
                <!-- end row -->

            </div> <!-- end col -->
        </div>
        <!-- end row -->
    </div>
    <!-- end container -->
</div>
<!-- end page -->

{% endblock %}