{% extends 'base.html' %}

{% block title %}
    Apply: {{ job.title }}
{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            
            {# --- 1. Job Header and Overview (Fixed/Static Info) --- #}
            <div class="card bg-light-subtle mb-4 p-4 border-0 rounded-3 shadow-sm">
                <h1 class="h2 fw-bold text-primary mb-1">{{ job.title }}</h1>
                
                <p class="mb-3 text-muted">
                    Your final step to apply for this position.
                </p>
                
                <div class="d-flex gap-4 small text-secondary">
                    <div>
                        <i class="fas fa-building me-1"></i> 
                        <strong>Department:</strong> {{ job.department|default:"Not specified" }}
                    </div>
                    <div>
                        <i class="fas fa-map-marker-alt me-1"></i> 
                        <strong>Location:</strong> {{ job.get_location_display }}
                    </div>
                    <div>
                        <i class="fas fa-briefcase me-1"></i> 
                        <strong>Type:</strong> {{ job.get_job_type_display }} • {{ job.get_workplace_type_display }}
                    </div>
                </div>
            </div>
            
            {# --- 2. Application Form Section --- #}
            <div class="card p-5 border-0 rounded-3 shadow">
                <h2 class="h3 fw-semibold mb-3">Application Details</h2>
                
                {% if applicant_form.description %}
                    <p class="text-muted mb-4">{{ applicant_form.description }}</p>
                {% endif %}
                
                <form method="post" novalidate>
                    {% csrf_token %}
                    
                    {% for field in form %}
                        <div class="form-group mb-4">
                            {# Label Tag #}
                            <label for="{{ field.id_for_label }}" class="form-label">
                                {{ field.label }}
                                {% if field.field.required %}<span class="text-danger">*</span>{% endif %}
                            </label>
                            
                            {# The Field Widget (Assumes form-control is applied in backend) #}
                            {{ field }}
                            
                            {# Field Errors #}
                            {% if field.errors %}
                                <div class="invalid-feedback d-block">{{ field.errors }}</div>
                            {% endif %}
                            
                            {# Help Text #}
                            {% if field.help_text %}
                                <div class="form-text">{{ field.help_text }}</div>
                            {% endif %}
                        </div>
                    {% endfor %}
                    
                    {# General Form Errors (Non-field errors) #}
                    {% if form.non_field_errors %}
                        <div class="alert alert-danger mb-4">
                            {{ form.non_field_errors }}
                        </div>
                    {% endif %}
                    
                    <button type="submit" class="btn btn-primary btn-lg mt-3 w-100">
                        <i class="fas fa-paper-plane me-2"></i> Submit Application
                    </button>
                </form>
            </div>
            
            <footer class="mt-4 text-center">
                 <a href="{% url 'applicant:review_job_detail' job.internal_job_id %}" 
                    class="btn btn-link text-secondary">
                    &larr; Review Job Details
                 </a>
            </footer>

        </div>
    </div>
</div>

{% endblock %}