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

{% block title %}Find Your Next Job | Job Portal{% endblock title %}

{% block content %}
<div class="hero-section text-center">
    <div class="container">
        <h1 class="display-4">Find Your Dream Job Today</h1>
        <p class="lead mb-5">The best place to discover opportunities and build your career.</p>
        
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <form class="d-flex gap-2 search-form p-3" action="/" method="GET">
                    <input class="form-control form-control-lg" type="text" placeholder="Job title, keyword, or company" name="q">
                    <input class="form-control form-control-lg" type="text" placeholder="City, state, or zip code" name="location">
                    <button class="btn btn-primary btn-lg px-4" type="submit">Search</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="py-5">
    <div class="container">
        <h2 class="text-center mb-5">Featured Jobs</h2>
        <div class="row g-4">
            {% for job in featured_jobs %}
            <div class="col-lg-4 col-md-6">
                <div class="job-card d-flex flex-column">
                    <div class="d-flex align-items-start mb-3">
                        <div class="company-logo me-3">
                            {{ job.logo_initial }}
                        </div>
                        <div>
                            <h3 class="job-title mb-1"><a href="#" class="text-decoration-none stretched-link">{{ job.title }}</a></h3>
                            <p class="job-company mb-1">{{ job.company }}</p>
                        </div>
                    </div>
                    <div class="mt-auto">
                        <p class="job-location mb-2">{{ job.location }}</p>
                        {% if job.type == 'Full-time' %}
                        <span class="job-badge full-time">{{ job.type }}</span>
                        {% elif job.type == 'Part-time' %}
                        <span class="job-badge part-time">{{ job.type }}</span>
                        {% else %}
                        <span class="job-badge contract">{{ job.type }}</span>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="text-center mt-5">
            <a href="#" class="btn btn-outline-primary btn-lg">Browse All Jobs</a>
        </div>
    </div>
</div>
{% endblock content %}
