{% extends 'registration/public_auth_base.html' %}
{% block title %}{{ DLUX_STRINGS.register_title|default:'Register' }}{% endblock %}
{% block public_auth_page_class %}dlux-public-auth-page--register{% endblock %}

{% block public_auth_panel %}
<div class="dlux-public-auth-header">
    <div class="dlux-public-auth-icon"><i class="bi bi-person-plus"></i></div>
    <h1>{{ DLUX_STRINGS.create_account|default:'Create an account' }}</h1>
</div>

<form method="post" novalidate class="dlux-public-auth-fields">
    {% csrf_token %}
    <div class="mb-3">
        <label for="{{ form.email.id_for_label }}">{{ DLUX_STRINGS.form_email|default:'Email Address' }}</label>
        <input type="email"
               class="login-input {% if form.email.errors %}is-invalid{% endif %}"
               id="{{ form.email.id_for_label }}"
               name="{{ form.email.html_name }}"
               autocomplete="email"
               autofocus
               required
               value="{{ form.email.value|default_if_none:'' }}">
        {% if form.email.errors %}
            <div class="invalid-feedback d-block">{% for error in form.email.errors %}{{ error }}{% endfor %}</div>
        {% endif %}
    </div>

    <div class="row g-3">
        <div class="col-md-6">
            <label for="{{ form.first_name.id_for_label }}">{{ DLUX_STRINGS.form_firstname|default:'First Name' }}</label>
            <input type="text"
                   class="login-input {% if form.first_name.errors %}is-invalid{% endif %}"
                   id="{{ form.first_name.id_for_label }}"
                   name="{{ form.first_name.html_name }}"
                   autocomplete="given-name"
                   value="{{ form.first_name.value|default_if_none:'' }}">
            {% if form.first_name.errors %}
                <div class="invalid-feedback d-block">{% for error in form.first_name.errors %}{{ error }}{% endfor %}</div>
            {% endif %}
        </div>
        <div class="col-md-6">
            <label for="{{ form.last_name.id_for_label }}">{{ DLUX_STRINGS.form_lastname|default:'Last Name' }}</label>
            <input type="text"
                   class="login-input {% if form.last_name.errors %}is-invalid{% endif %}"
                   id="{{ form.last_name.id_for_label }}"
                   name="{{ form.last_name.html_name }}"
                   autocomplete="family-name"
                   value="{{ form.last_name.value|default_if_none:'' }}">
            {% if form.last_name.errors %}
                <div class="invalid-feedback d-block">{% for error in form.last_name.errors %}{{ error }}{% endfor %}</div>
            {% endif %}
        </div>
    </div>

    <div class="mb-3">
        <label for="{{ form.password1.id_for_label }}">{{ DLUX_STRINGS.form_password|default:'Password' }}</label>
        <input type="password"
               class="login-input {% if form.password1.errors %}is-invalid{% endif %}"
               id="{{ form.password1.id_for_label }}"
               name="{{ form.password1.html_name }}"
               autocomplete="new-password"
               required>
        {% if form.password1.errors %}
            <div class="invalid-feedback d-block">{% for error in form.password1.errors %}{{ error }}{% endfor %}</div>
        {% endif %}
    </div>

    <div class="mb-3">
        <label for="{{ form.password2.id_for_label }}">{{ DLUX_STRINGS.form_password_confirm|default:'Confirm Password' }}</label>
        <input type="password"
               class="login-input {% if form.password2.errors %}is-invalid{% endif %}"
               id="{{ form.password2.id_for_label }}"
               name="{{ form.password2.html_name }}"
               autocomplete="new-password"
               required>
        {% if form.password2.errors %}
            <div class="invalid-feedback d-block">{% for error in form.password2.errors %}{{ error }}{% endfor %}</div>
        {% endif %}
    </div>

    <div class="d-none" aria-hidden="true">
        {{ form.website.label_tag }}
        {{ form.website }}
    </div>

    <button type="submit" class="w-100 btn btn-lg mt-3" id="submit" data-dlux-loading>
        <i class="bi bi-person-check me-2"></i>{{ DLUX_STRINGS.btn_register|default:'Register' }}
    </button>
    <div class="login-register-action mt-3">
        <a href="{% url 'login' %}" class="login-register-link">
            <i class="bi bi-arrow-{% if CURRENT_DIR == 'ltr' %}left{% else %}right{% endif %}-short"></i>
            <span>{{ DLUX_STRINGS.back_to_login|default:'Back to login' }}</span>
        </a>
    </div>
</form>
{% endblock %}