ATS/templates/recruitment/applicant_signup.html

{% extends 'applicant/partials/candidate_facing_base.html' %}
{% load i18n %}

{% block title %}{% trans "Create Account" %}{% endblock %}

{% block content %}
<div class="min-h-[calc(100vh-80px)] flex justify-center bg-gray-50 py-16 px-5">
    <div class="w-full max-w-3xl bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-200">
        <!-- Header -->
        <div class="bg-gradient-to-r from-temple-red to-[#7a1a29] text-white p-8 text-center">
            <h2 class="text-2xl font-bold flex items-center justify-center gap-3">
                <i data-lucide="user-plus" class="w-7 h-7"></i>
                {% trans "Create Account" %}
            </h2>
        </div>

        <!-- Body -->
        <div class="p-10">
            {% if messages %}
                {% for message in messages %}
                    <div class="{% if 'error' in message.tags or 'danger' in message.tags %}bg-red-50 border border-red-200 text-red-800{% elif 'success' in message.tags %}bg-green-50 border border-green-200 text-green-800{% else %}bg-blue-50 border border-blue-200 text-blue-800{% endif %} rounded-xl p-4 mb-6 font-semibold text-sm">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %}

            <form method="post" novalidate>
                {% csrf_token %}

                <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                    <div class="space-y-2">
                        <label class="block text-sm font-bold text-gray-900">{% trans "First Name" %} <span class="text-red-500">*</span></label>
                        {{ form.first_name }}
                        {% if form.first_name.errors %}<div class="text-sm font-bold text-red-600 mt-1">{{ form.first_name.errors.0 }}</div>{% endif %}
                    </div>

                    <div class="space-y-2">
                        <label class="block text-sm font-bold text-gray-900">{% trans "Middle Name" %}</label>
                        {{ form.middle_name }}
                        {% if form.middle_name.errors %}<div class="text-sm font-bold text-red-600 mt-1">{{ form.middle_name.errors.0 }}</div>{% endif %}
                    </div>

                    <div class="space-y-2">
                        <label class="block text-sm font-bold text-gray-900">{% trans "Last Name" %} <span class="text-red-500">*</span></label>
                        {{ form.last_name }}
                        {% if form.last_name.errors %}<div class="text-sm font-bold text-red-600 mt-1">{{ form.last_name.errors.0 }}</div>{% endif %}
                    </div>

                    <div class="md:col-span-2 space-y-2">
                        <label class="block text-sm font-bold text-gray-900">{% trans "Email Address" %} <span class="text-red-500">*</span></label>
                        {{ form.email }}
                        {% if form.email.errors %}<div class="text-sm font-bold text-red-600 mt-1">{{ form.email.errors.0 }}</div>{% endif %}
                    </div>

                    <div class="space-y-2">
                        <label class="block text-sm font-bold text-gray-900">{% trans "Phone Number" %} <span class="text-red-500">*</span></label>
                        {{ form.phone }}
                        {% if form.phone.errors %}<div class="text-sm font-bold text-red-600 mt-1">{{ form.phone.errors.0 }}</div>{% endif %}
                    </div>

                    <div class="space-y-2">
                        <label class="block text-sm font-bold text-gray-900">{% trans "GPA" %} <span class="text-red-500">*</span></label>
                        {{ form.gpa }}
                        {% if form.gpa.errors %}<div class="text-sm font-bold text-red-600 mt-1">{{ form.gpa.errors.0 }}</div>{% endif %}
                    </div>

                    <div class="space-y-2">
                        <label class="block text-sm font-bold text-gray-900">{% trans "National ID / Iqama" %} <span class="text-red-500">*</span></label>
                        {{ form.national_id }}
                        {% if form.national_id.errors %}<div class="text-sm font-bold text-red-600 mt-1">{{ form.national_id.errors.0 }}</div>{% endif %}
                    </div>

                    <div class="space-y-2">
                        <label class="block text-sm font-bold text-gray-900">{% trans "Nationality" %} <span class="text-red-500">*</span></label>
                        {{ form.nationality }}
                        {% if form.nationality.errors %}<div class="text-sm font-bold text-red-600 mt-1">{{ form.nationality.errors.0 }}</div>{% endif %}
                    </div>

                    <div class="space-y-2">
                        <label class="block text-sm font-bold text-gray-900">{% trans "Gender" %} <span class="text-red-500">*</span></label>
                        {{ form.gender }}
                        {% if form.gender.errors %}<div class="text-sm font-bold text-red-600 mt-1">{{ form.gender.errors.0 }}</div>{% endif %}
                    </div>

                    <div class="space-y-2">
                        <label class="block text-sm font-bold text-gray-900">{% trans "Password" %} <span class="text-red-500">*</span></label>
                        {{ form.password }}
                        {% if form.password.errors %}<div class="text-sm font-bold text-red-600 mt-1">{{ form.password.errors.0 }}</div>{% endif %}
                    </div>

                    <div class="space-y-2">
                        <label class="block text-sm font-bold text-gray-900">{% trans "Confirm Password" %} <span class="text-red-500">*</span></label>
                        {{ form.confirm_password }}
                        {% if form.confirm_password.errors %}<div class="text-sm font-bold text-red-600 mt-1">{{ form.confirm_password.errors.0 }}</div>{% endif %}
                    </div>

                    {% if form.non_field_errors %}
                    <div class="md:col-span-3">
                        <div class="bg-red-50 border border-red-200 text-red-800 rounded-xl p-4 font-semibold text-sm">
                            {% for error in form.non_field_errors %}{{ error }}{% endfor %}
                        </div>
                    </div>
                    {% endif %}

                    <div class="md:col-span-3">
                        <button type="submit" class="w-full bg-gradient-to-r from-temple-red to-[#7a1a29] text-white font-bold text-lg py-4 rounded-xl hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300">
                            {% trans "Create Account" %}
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Footer -->
        <div class="bg-gray-50 border-t border-gray-200 p-5 text-center text-base">
            {% trans "Already have an account?" %}
            <a href="{% url 'account_login' %}?next={% url 'application_submit_form' job.slug %}" class="font-bold text-temple-red hover:underline ml-1">
                {% trans "Login here" %}
            </a>
        </div>
    </div>
</div>

<style>
    /* Form input styling to match theme */
    input, select, textarea {
        width: 100%;
        padding: 12px 16px;
        font-size: 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        background: #ffffff;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }

    input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: #9d2235;
        box-shadow: 0 0 0 4px rgba(157, 34, 53, 0.1);
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
});
</script>
{% endblock %}