{% extends 'base.html' %}

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

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-10">
        
        <header class="mb-5 pb-3 border-bottom d-flex flex-column flex-md-row justify-content-between align-items-md-center">
            <div>
                <h2 class="h3 mb-1 ">
                    <i class="fas fa-clipboard-list me-2 text-secondary"></i>
                    Application Forms for <span class="text-success fw-bold">"{{ job.title }}"</span>
                </h2>
                <p class="text-muted small">
                    Internal Job ID: **{{ job.internal_job_id }}**
                </p>
            </div>
            
            {# Primary Action Button using the theme color #}
            <a href="{% url 'applicant:create_form' job_id=job.internal_job_id %}" 
               class="btn univ-color btn-lg shadow-sm mt-3 mt-md-0">
                <i class="fas fa-plus me-1"></i> Create New Form
            </a>
        </header>
        
        {% if forms %}
            
            <div class="list-group">
                {% for form in forms %}
                
                {# Custom styling based on active state #}
                <div class="list-group-item d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center p-3 mb-3 rounded shadow-sm 
                            {% if form.is_active %}border-success border-3 bg-light{% else %}border-secondary border-1{% endif %}">
                    
                    {# Left Section: Form Details #}
                    <div class="flex-grow-1 me-4 mb-2 mb-sm-0">
                        <h4 class="h5 mb-1 d-inline-block">
                            {{ form.name }}
                        </h4>
                        
                        {# Status Badge #}
                        {% if form.is_active %}
                            <span class="badge bg-success ms-2">
                                <i class="fas fa-check-circle me-1"></i> Active Form
                            </span>
                        {% else %}
                            <span class="badge bg-secondary ms-2">
                                <i class="fas fa-times-circle me-1"></i> 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 flex-wrap">
                        
                        {# Edit Structure Button #}
                        <a href="{% url 'applicant:edit_form' form.id %}" 
                           class="btn btn-sm btn-outline-secondary">
                           <i class="fas fa-pen me-1"></i> Edit Structure
                        </a>
                        
                        {# Conditional Activation Button #}
                        {% if not form.is_active %}
                            <a href="{% url 'applicant:activate_form' form.id %}" 
                               class="btn btn-sm univ-color">
                                <i class="fas fa-bolt me-1"></i> Activate Form
                            </a>
                        {% else %}
                            {# Active indicator/Deactivate button placeholder #}
                            <a href="#" class="btn btn-sm btn-outline-success" disabled>
                                <i class="fas fa-star me-1"></i> Current Form
                            </a>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        
        {% else %}
            <div class="text-center py-5 bg-light rounded shadow-sm">
                <i class="fas fa-file-alt fa-4x text-muted mb-3"></i>
                <p class="lead mb-0">No application forms have been created yet for this job.</p>
                <p class="mt-2 mb-0 text-secondary">Click the button above to define a new form structure.</p>
            </div>
        {% endif %}
        
        <footer class="text-end mt-5 pt-3 border-top">
            <a href="{% url 'jobs:job_detail' job.internal_job_id %}" 
               class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Back to Job Details
            </a>
        </footer>

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