{% extends 'base.html' %}

{% block title %}
    Manage Forms | {{ job.title }}
{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            
            <header class="mb-4 pb-3 border-bottom d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="h3 mb-1">
                        Application Forms for <span class="text-primary">"{{ job.title }}"</span>
                    </h2>
                    <p class="text-muted small">
                        Job ID: {{ job.internal_job_id }}
                    </p>
                </div>
                
                {# Primary Action Button is placed prominently in the header #}
                <a href="{% url 'applicant:create_form' job_id=job.internal_job_id %}" 
                   class="btn btn-success btn-lg shadow-sm">
                    + Create New Form
                </a>
            </header>
            
            {% if forms %}
                
                <div class="list-group">
                    {% for form in forms %}
                    
                    {# Use a list-group-item for modern list styling #}
                    <div class="list-group-item d-flex justify-content-between align-items-center p-3 mb-3 border rounded shadow-sm 
                                {% if form.is_active %}list-group-item-primary border-primary{% endif %}">
                        
                        {# Left Section: Form Details #}
                        <div class="flex-grow-1 me-4">
                            <h4 class="mb-1 d-inline-block">
                                {{ form.name }}
                            </h4>
                            
                            {# Status Badge #}
                            {% if form.is_active %}
                                <span class="badge bg-success ms-2">Active Form</span>
                            {% else %}
                                <span class="badge bg-secondary ms-2">Inactive</span>
                            {% endif %}
                            
                            <p class="text-muted mt-1 mb-1 small">
                                {{ form.description|default:"— No description provided. —" }}
                            </p>
                        </div>
                        
                        {# Right Section: Actions #}
                        <div class="d-flex gap-2 align-items-center">
                            
                            {# Always allow editing #}
                            <a href="{% url 'applicant:edit_form' form.id %}" 
                               class="btn btn-sm btn-outline-info">
                                Edit Structure
                            </a>
                            
                            {# Conditional Activation Button #}
                            {% if not form.is_active %}
                                <a href="{% url 'applicant:activate_form' form.id %}" 
                                   class="btn btn-sm btn-success">
                                    Activate Form
                                </a>
                            {% else %}
                                {# Placeholder or Deactivate button if needed #}
                                <button class="btn btn-sm btn-outline-dark" disabled>Currently Active</button>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            
            {% else %}
                <div class="alert alert-info text-center mt-5 p-4">
                    <p class="lead mb-0">No application forms have been created yet for this job.</p>
                    <p class="mt-2 mb-0">Click the button above to define a new form structure.</p>
                </div>
            {% endif %}
            
            <footer class="text-end mt-5">
                <a href="{% url 'jobs:job_detail' job.internal_job_id %}" 
                   class="btn btn-outline-secondary">
                    &larr; Back to Job Details
                </a>
            </footer>

        </div>
    </div>
</div>
{% endblock %}