{% extends "base.html" %}

{% block title %}Job Postings - University ATS{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="fas fa-briefcase"></i> Job Postings</h1>
    <a href="{% url 'job_create' %}" class="btn btn-primary">
        <i class="fas fa-plus"></i> Create New Job
    </a>
</div>

<!-- Filters -->
<div class="card mb-4">
    <div class="card-body">
        <form method="get" class="row g-3">
            <div class="col-md-3">
                <label for="status" class="form-label">Status</label>
                <select name="status" id="status" class="form-select">
                    <option value="">All Statuses</option>
                    <option value="DRAFT" {% if status_filter == 'DRAFT' %}selected{% endif %}>Draft</option>
                    <option value="ACTIVE" {% if status_filter == 'ACTIVE' %}selected{% endif %}>Active</option>
                    <option value="CLOSED" {% if status_filter == 'CLOSED' %}selected{% endif %}>Closed</option>
                    <option value="ARCHIVED" {% if status_filter == 'ARCHIVED' %}selected{% endif %}>Archived</option>
                </select>
            </div>
            <div class="col-md-3 d-flex align-items-end">
                <button type="submit" class="btn btn-outline-primary">Filter</button>
            </div>
        </form>
    </div>
</div>

<!-- Job List -->
{% if page_obj %}
    <div class="row">
        {% for job in page_obj %}
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card job-card h-100 {% if job.posted_to_linkedin %}linkedin-posted{% endif %}">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <h5 class="card-title mb-1">{{ job.title }}</h5>
                            <span class="badge bg-{{ job.status|lower }} status-badge">
                                {{ job.get_status_display }}
                            </span>
                        </div>

                        <p class="card-text text-muted small">
                            <i class="fas fa-building"></i> {{ job.department|default:"No Department" }}<br>
                            <i class="fas fa-map-marker-alt"></i> {{ job.get_location_display }}<br>
                            <i class="fas fa-clock"></i> {{ job.get_job_type_display }}
                        </p>

                        <div class="mt-3">
                            {% if job.posted_to_linkedin %}
                                <span class="badge bg-info">
                                    <i class="fab fa-linkedin"></i> Posted to LinkedIn
                                </span>
                            {% endif %}

                           <div class="mt-2">
                                <a href="{% url 'job_detail' job.slug %}" class="btn btn-sm btn-outline-primary me-2">
                                    View
                                </a>
                                <a href="{% url 'job_update' job.slug %}" class="btn btn-sm btn-outline-secondary">
                                    Edit
                                </a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if page_obj.has_other_pages %}
        <nav aria-label="Job pagination">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1{% if status_filter %}&status={{ status_filter }}{% endif %}">First</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if status_filter %}&status={{ status_filter }}{% endif %}">Previous</a>
                    </li>
                {% endif %}

                <li class="page-item active">
                    <span class="page-link">{{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
                </li>

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if status_filter %}&status={{ status_filter }}{% endif %}">Next</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if status_filter %}&status={{ status_filter }}{% endif %}">Last</a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    {% endif %}
{% else %}
    <div class="text-center py-5">
        <i class="fas fa-briefcase fa-3x text-muted mb-3"></i>
        <h3>No job postings found</h3>
        <p class="text-muted">Create your first job posting to get started.</p>
        <a href="{% url 'job_create' %}" class="btn btn-primary">Create Job</a>
    </div>
{% endif %}
{% endblock %}