{% 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 %}
