{% extends 'base.html' %}
{% load static %}

{% block title %}Job Listings - ICTAZ Jobs Portal{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h1 class="fade-in">Find Your Next ICT Opportunity</h1>
                <p class="lead fade-in">Discover exciting career opportunities in Zambia's ICT sector</p>
                <div class="mt-4 fade-in">
                    <span class="badge bg-light text-dark me-2">
                        <i class="fas fa-briefcase me-1"></i>{{ total_jobs }} Active Jobs
                    </span>
                    <span class="badge bg-light text-dark">
                        <i class="fas fa-users me-1"></i>ICTAZ Members Priority
                    </span>
                </div>
            </div>
            <div class="col-lg-4 text-center mt-5">
                <img src="{% static 'images/ictaz-white.png' %}" alt="ICTAZ" class="img-fluid" style="max-height: 200px;">
            </div>
        </div>
    </div>
</section>

<div class="container my-5">
    <!-- Search Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card slide-up">
                <div class="card-body">
                    <h5 class="card-title mb-3">
                        <i class="fas fa-search me-2"></i>Search & Filter Jobs
                    </h5>
                    {% load crispy_forms_tags %}
                    {% crispy search_form %}
                </div>
            </div>
        </div>
    </div>

    <!-- Job Listings -->
    <div class="row">
        {% for job in jobs %}
            <div class="col-lg-6 col-xl-4 mb-4">
                <div class="card job-card h-100 slide-up">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">
                            <a href="{% url 'jobs:job_detail' job.pk %}" class="text-decoration-none">
                                {{ job.title }}
                            </a>
                        </h5>
                        
                        <div class="job-meta mb-3">
                            <div class="mb-2">
                                <i class="fas fa-building me-2"></i>{{ job.posted_by.organization|default:"ICTAZ Partner" }}
                            </div>
                            <div class="mb-2">
                                <i class="fas fa-map-marker-alt me-2"></i>{{ job.location }}
                            </div>
                            <div class="mb-2">
                                <i class="fas fa-clock me-2"></i>{{ job.created_at|timesince }} ago
                            </div>
                        </div>
                        
                        <p class="card-text flex-grow-1">
                            {{ job.description|truncatewords:20 }}
                        </p>
                        
                        <div class="mt-auto">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div>
                                    <span class="badge badge-primary me-1">{{ job.get_employment_type_display }}</span>
                                    <span class="badge bg-secondary">{{ job.get_experience_level_display }}</span>
                                </div>
                                {% if job.salary_range %}
                                    <small class="text-muted">{{ job.salary_range }}</small>
                                {% endif %}
                            </div>
                            
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    <i class="fas fa-calendar-alt me-1"></i>
                                    Deadline: {{ job.application_deadline|date:"M d, Y" }}
                                </small>
                                <a href="{% url 'jobs:job_detail' job.pk %}" class="btn btn-primary btn-sm">
                                    View Details
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% empty %}
            <div class="col-12">
                <div class="card text-center">
                    <div class="card-body py-5">
                        <i class="fas fa-search fa-3x text-muted mb-3"></i>
                        <h4>No jobs found</h4>
                        <p class="text-muted">Try adjusting your search criteria or check back later for new opportunities.</p>
                        <a href="{% url 'jobs:job_list' %}" class="btn btn-primary">
                            <i class="fas fa-refresh me-1"></i>Clear Filters
                        </a>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if is_paginated %}
        <div class="row mt-5">
            <div class="col-12">
                <nav aria-label="Job listings pagination">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.employment_type %}&employment_type={{ request.GET.employment_type }}{% endif %}{% if request.GET.experience_level %}&experience_level={{ request.GET.experience_level }}{% endif %}{% if request.GET.location %}&location={{ request.GET.location }}{% endif %}">
                                    <i class="fas fa-angle-double-left"></i>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.employment_type %}&employment_type={{ request.GET.employment_type }}{% endif %}{% if request.GET.experience_level %}&experience_level={{ request.GET.experience_level }}{% endif %}{% if request.GET.location %}&location={{ request.GET.location }}{% endif %}">
                                    <i class="fas fa-angle-left"></i>
                                </a>
                            </li>
                        {% endif %}

                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                                <li class="page-item active">
                                    <span class="page-link">{{ num }}</span>
                                </li>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ num }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.employment_type %}&employment_type={{ request.GET.employment_type }}{% endif %}{% if request.GET.experience_level %}&experience_level={{ request.GET.experience_level }}{% endif %}{% if request.GET.location %}&location={{ request.GET.location }}{% endif %}">{{ num }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}

                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.employment_type %}&employment_type={{ request.GET.employment_type }}{% endif %}{% if request.GET.experience_level %}&experience_level={{ request.GET.experience_level }}{% endif %}{% if request.GET.location %}&location={{ request.GET.location }}{% endif %}">
                                    <i class="fas fa-angle-right"></i>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.employment_type %}&employment_type={{ request.GET.employment_type }}{% endif %}{% if request.GET.experience_level %}&experience_level={{ request.GET.experience_level }}{% endif %}{% if request.GET.location %}&location={{ request.GET.location }}{% endif %}">
                                    <i class="fas fa-angle-double-right"></i>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Add animation delays for staggered effect
    document.addEventListener('DOMContentLoaded', function() {
        const cards = document.querySelectorAll('.slide-up');
        cards.forEach((card, index) => {
            card.style.animationDelay = `${index * 0.1}s`;
        });
    });
</script>
{% endblock %}