{% extends 'base.html' %}
{% block title %}
  Jobs | Job Board
{% endblock %}
{% block content %}
  <div class="container py-4">
    <div class="row mb-3">
      <div class="col-12">
        <form method="get" class="row g-2">
          <div class="col-sm-8 col-md-6">
            <input name="q" value="{{ request.GET.q }}" class="form-control" placeholder="Search jobs by title, skill or category" />
          </div>
          <div class="col-sm-4 col-md-2">
            <button class="btn btn-outline-primary w-100" type="submit">Search</button>
          </div>
        </form>
      </div>
    </div>
    <div class="row g-3">
      {% if jobs %}
        {% for job in jobs %}
          <div class="col-12">
            <div class="card h-100">
              <div class="card-body d-flex flex-column">
                <h5 class="card-title">{{ job.title }}</h5>
                <h6 class="card-subtitle mb-2 text-muted">{{ job.category|default:'General' }}</h6>
                <p class="card-text text-truncate" style="max-height:4.5rem;">{{ job.description }}</p>
                <ul class="list-unstyled mt-auto mb-3 small text-muted">
                  <li>Openings: {{ job.number_opening }}</li>
                  <li>Skills: {{ job.skill_required|default:'Any' }}</li>
                  <li>Posted by: {{ job.recruiter.user.display_name }}</li>
                </ul>
                <div class="mt-auto">
                  {% if user.is_authenticated %}
                    {% if user.user_type == 'jobseekers' %}
                      {% if job.id in already_applied_ids %}
                        <button class="btn btn-secondary" disabled>Already Applied</button>
                      {% else %}
                        <a href="{% url 'apply_job' job.id %}" class="btn btn-primary">Apply</a>
                      {% endif %}
                    {% elif user.user_type == 'recruiters' %}
                      <button class="btn btn-secondary" disabled>Recruiters cannot apply</button>
                    {% else %}
                      <a href="{% url 'login' %}?next={% url 'apply_job' job.id %}" class="btn btn-outline-primary">
                        Login to Apply
                    </a>
                    {% endif %}
                  {% else %}
                    <a href="{% url 'login' %}?next={% url 'apply_job' job.id %}" class="btn btn-outline-primary">Login to Apply</a>
                    {% endif %}
                </div>
              </div>
            </div>
          </div>
        {% endfor %}
      {% else %}
        <div class="col-12">
          <div class="alert alert-info mb-0">No jobs found.</div>
        </div>
      {% endif %}
    </div>
    {% if is_paginated %}
      <div class="row mt-4">
        <div class="col-12 d-flex justify-content-center">
          <nav>
            <ul class="pagination">
              {% if page_obj.has_previous %}
                <li class="page-item">
                  <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
                </li>
              {% else %}
                <li class="page-item disabled">
                  <span class="page-link">Previous</span>
                </li>
              {% endif %}
              <li class="page-item disabled">
                <span class="page-link">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 }}">Next</a>
                </li>
              {% else %}
                <li class="page-item disabled">
                  <span class="page-link">Next</span>
                </li>
              {% endif %}
            </ul>
          </nav>
        </div>
      </div>
    {% endif %}
  </div>
{% endblock %}