ATS/templates/jobs/apply_form.html

{% extends "base.html" %}
{% load i18n static %}

{% block title %}{% blocktrans %}Apply for {{ job.title }} - University Careers{% endblocktrans %}{% endblock %}

{% block customCSS %}
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
    body { font-family: 'Inter', sans-serif; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-6">
    
    <!-- Breadcrumb -->
    <nav class="mb-6" aria-label="breadcrumb">
        <ol class="flex items-center gap-2 text-sm flex-wrap">
            <li><a href="{% url 'dashboard' %}" class="text-gray-500 hover:text-kaauh-blue transition flex items-center gap-1">
                <i data-lucide="home" class="w-4 h-4"></i> {% trans "Home" %}
            </a></li>
            <li class="text-gray-400">/</li>
            <li><a href="{% url 'job_list' %}" class="text-gray-500 hover:text-kaauh-blue transition">{% trans "Jobs" %}</a></li>
            <li class="text-gray-400">/</li>
            <li><a href="{% url 'job_detail' job.slug %}" class="text-gray-500 hover:text-kaauh-blue transition">{{ job.title }}</a></li>
            <li class="text-gray-400">/</li>
            <li class="text-temple-red font-semibold">{% trans "Apply" %}</li>
        </ol>
    </nav>

    <div class="flex justify-center">
        <div class="w-full max-w-4xl">
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                
                <!-- Header -->
                <div class="bg-gradient-to-br from-kaauh-blue to-[#004d57] text-white p-6">
                    <div class="flex items-start gap-4">
                        <div class="bg-white/20 p-3 rounded-xl">
                            <i data-lucide="file-signature" class="w-8 h-8"></i>
                        </div>
                        <div class="flex-1">
                            <h2 class="text-2xl font-bold mb-1">{% blocktrans with job_title=job.title %}Apply for {{ job_title }}{% endblocktrans %}</h2>
                            <p class="text-sm text-white/80">
                                <i data-lucide="building-2" class="w-4 h-4 inline mr-1"></i>
                                {{ job.department }} • 
                                <i data-lucide="map-pin" class="w-4 h-4 inline mr-1 ml-2"></i>
                                {{ job.get_location_display }}
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Form Content -->
                <div class="p-6">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        <!-- Personal Information Section -->
                        <div class="mb-6 pb-6 border-b border-gray-200">
                            <h4 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                                <i data-lucide="user" class="w-5 h-5 text-kaauh-blue"></i>
                                {% trans "Personal Information" %}
                            </h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "First Name" %} *</label>
                                    {{ form.first_name }}
                                    {% if form.first_name.errors %}<div class="mt-1 text-xs text-red-600">{{ form.first_name.errors }}</div>{% endif %}
                                </div>
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Last Name" %} *</label>
                                    {{ form.last_name }}
                                    {% if form.last_name.errors %}<div class="mt-1 text-xs text-red-600">{{ form.last_name.errors }}</div>{% endif %}
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Email" %} *</label>
                                    {{ form.email }}
                                    {% if form.email.errors %}<div class="mt-1 text-xs text-red-600">{{ form.email.errors }}</div>{% endif %}
                                </div>
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Phone" %}</label>
                                    {{ form.phone }}
                                    {% if form.phone.errors %}<div class="mt-1 text-xs text-red-600">{{ form.phone.errors }}</div>{% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <!-- Documents Section -->
                        <div class="mb-6 pb-6 border-b border-gray-200">
                            <h4 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                                <i data-lucide="file-text" class="w-5 h-5 text-kaauh-blue"></i>
                                {% trans "Documents" %}
                            </h4>
                            <div class="mb-4">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Resume/CV * (PDF or Word)" %}</label>
                                {{ form.resume }}
                                {% if form.resume.errors %}<div class="mt-1 text-xs text-red-600">{{ form.resume.errors }}</div>{% endif %}
                            </div>
                            
                            <div class="mb-4">
                                <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Cover Letter (Optional)" %}</label>
                                {{ form.cover_letter }}
                                {% if form.cover_letter.errors %}<div class="mt-1 text-xs text-red-600">{{ form.cover_letter.errors }}</div>{% endif %}
                            </div>
                        </div>
                        
                        <!-- Additional Information Section -->
                        <div class="mb-6 pb-6 border-b border-gray-200">
                            <h4 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                                <i data-lucide="info" class="w-5 h-5 text-kaauh-blue"></i>
                                {% trans "Additional Information" %}
                            </h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "LinkedIn Profile" %}</label>
                                    {{ form.linkedin_profile }}
                                    {% if form.linkedin_profile.errors %}<div class="mt-1 text-xs text-red-600">{{ form.linkedin_profile.errors }}</div>{% endif %}
                                </div>
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Portfolio/Website" %}</label>
                                    {{ form.portfolio_url }}
                                    {% if form.portfolio_url.errors %}<div class="mt-1 text-xs text-red-600">{{ form.portfolio_url.errors }}</div>{% endif %}
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Salary Expectations" %}</label>
                                    {{ form.salary_expectations }}
                                    {% if form.salary_expectations.errors %}<div class="mt-1 text-xs text-red-600">{{ form.salary_expectations.errors }}</div>{% endif %}
                                </div>
                                <div>
                                    <label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Availability" %}</label>
                                    {{ form.availability }}
                                    {% if form.availability.errors %}<div class="mt-1 text-xs text-red-600">{{ form.availability.errors }}</div>{% endif %}
                                </div>
                            </div>
                        </div>
                        
                        <!-- Submit Button -->
                        <button type="submit" class="inline-flex items-center justify-center gap-2 w-full bg-kaauh-blue hover:bg-[#004f57] text-white font-medium px-6 py-3 rounded-xl text-sm transition shadow-sm hover:shadow-md">
                            <i data-lucide="send" class="w-5 h-5"></i>
                            {% trans "Submit Application" %}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block customJS %}
<script>
    lucide.createIcons();
</script>
{% endblock %}