{% extends "alumni/base.html" %}
{% block title %}Job Advertisements{% endblock %}

{% block content %}
<div class="row">

    <!-- Sidebar -->
    <aside class="col-md-3 col-lg-2 mb-4">
        <nav id="sidebarMenu" class="collapse d-md-block">
            <div class="position-sticky pt-3">
                <div class="card shadow">
                    <div class="card-header bg-brand text-white">
                        <a href="{% url 'alumni:dashboard' %}" class="text-decoration-none text-white">Dashboard</a>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <a href="{% url 'alumni:profile' %}" class="text-decoration-none text-dark">Profile</a>
                        </li>
                        <li class="list-group-item">
                            <a href="{% url 'alumni:donate' %}" class="text-decoration-none text-dark">Donate</a>
                        </li>
                         <li class="list-group-item d-flex justify-content-between align-items-center">
                            <a href="{% url 'alumni:job_list' %}" class="text-decoration-none text-dark">Job Advert</a>
                            <span class="badge bg-primary rounded-pill">{{ active_jobs_count }}</span>
                        </li>
                        
                        {% if request.user.is_superuser %}
                        <li class="list-group-item">
                            <a href="{% url 'admin:index' %}" class="text-decoration-none text-dark">
                                Super Admin <i class="bi bi-arrow-right float-end"></i>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </nav>
    </aside>

    <!-- Main Content -->
    <main class="col-md-9 col-lg-10">

        <h3 class="mb-4">Available Job Advertisements</h3>

        <!-- Filter Form -->
        <form method="GET" class="mb-3 row g-2">
            <div class="col-md-3">
                <select name="job_type" class="form-select">
                    <option value="">All Types</option>
                    <option value="FULL_TIME" {% if filter_values.job_type == "FULL_TIME" %}selected{% endif %}>Full Time</option>
                    <option value="PART_TIME" {% if filter_values.job_type == "PART_TIME" %}selected{% endif %}>Part Time</option>
                    <option value="INTERNSHIP" {% if filter_values.job_type == "INTERNSHIP" %}selected{% endif %}>Internship</option>
                    <option value="CONTRACT" {% if filter_values.job_type == "CONTRACT" %}selected{% endif %}>Contract</option>
                </select>
            </div>

            <div class="col-md-3">
                <input type="text" name="location" class="form-control" placeholder="Location"
                       value="{{ filter_values.location }}">
            </div>

            <div class="col-md-3">
                <input type="text" name="company" class="form-control" placeholder="Company"
                       value="{{ filter_values.company }}">
            </div>

            <div class="col-md-3">
                <button type="submit" class="btn btn-primary w-100">Filter Jobs</button>
            </div>
        </form>

        <!-- Job List -->
        {% for job in page_obj %}
        <div class="card mb-3 shadow-sm">
            <div class="card-body">
                <h5 class="card-title">{{ job.title }}</h5>
                <p class="card-text">{{ job.company }} | {{ job.location }}</p>
                <span class="badge bg-info text-dark">{{ job.get_job_type_display }}</span>
                <a href="{% url 'alumni:job_detail' job.id %}" class="btn btn-primary btn-sm float-end">View Details</a>
            </div>
        </div>
        {% empty %}
        <div class="alert alert-info">No jobs found.</div>
        {% endfor %}

        <!-- Pagination -->
        <nav>
          <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
              <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}&job_type={{ filter_values.job_type }}&location={{ filter_values.location }}&company={{ filter_values.company }}">Previous</a>
              </li>
            {% endif %}

            <li class="page-item active">
              <span class="page-link bg-primary">
                Page {{ 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 }}&job_type={{ filter_values.job_type }}&location={{ filter_values.location }}&company={{ filter_values.company }}">Next</a>
              </li>
            {% endif %}
          </ul>
        </nav>

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