{% extends "core/site_base.html" %}
{% block tabtitle %}Login - Simmate{% endblock %}
{% block body %}
    {% load static %}
    {% simmate_setting "website.require_login_internal" as REQUIRE_LOGIN_INTERNAL %}
    {% if not REQUIRE_LOGIN_INTERNAL %}
        <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 mt-0 mb-3 fw-bold">Free Sign Up</h4>
                                </div>
                                <form id="signup_form"
                                      method="post"
                                      action="{% url 'account_signup' %}"
                                      novalidate>
                                    {% csrf_token %}
                                    {% 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 %}
                                    <div class="form-floating mb-3">
                                        <input type="text"
                                               name="username"
                                               placeholder="Username"
                                               autocomplete="username"
                                               minlength="1"
                                               maxlength="150"
                                               required
                                               id="id_username"
                                               class="form-control">
                                        <label for="id_username">Username</label>
                                    </div>
                                    <div class="form-floating mb-3">
                                        <input type="email"
                                               name="email"
                                               placeholder="Email address"
                                               autocomplete="email"
                                               maxlength="320"
                                               id="id_email"
                                               class="form-control">
                                        <label for="id_email">Email (optional)</label>
                                    </div>
                                    <div class="form-floating mb-3">
                                        <input type="password"
                                               name="password1"
                                               placeholder="Password"
                                               autocomplete="new-password"
                                               required
                                               id="id_password1"
                                               class="form-control">
                                        <label for="id_password1">Password</label>
                                    </div>
                                    <div class="form-floating mb-3">
                                        <input type="password"
                                               name="password2"
                                               placeholder="Password (again)"
                                               autocomplete="new-password"
                                               required
                                               id="id_password2"
                                               class="form-control">
                                        <label for="id_password2">Password (again)</label>
                                    </div>
                                    {% if next %}<input type="hidden" name="next" value="{{ next }}" />{% endif %}
                                    <div class="mb-3 mt-3 text-center">
                                        <button class="btn btn-success" type="submit">Sign Up</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% else %}
        Custom account creation is disabled.
    {% endif %}
{% endblock %}