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

{% block title %}Job Board{% endblock %}

{% block head %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
{% endblock %}

{% block content %}
<div class="hero">
    <div class="container">
        <h1>!!!Find Your Dream Job!!!</h1>
        <p>The best place to find tech jobs</p>
        <a href="#" class="btn btn-primary">Get Started</a>
    </div>
</div>

<div class="job-listings">
    <div class="container">
        <h2 class="text-center mb-5">Latest Job Openings</h2>
        <div class="row">
            {% for job in jobs %}
            <div class="col-md-4">
                <div class="job-card">
                    <h3>{{ job.title }}</h3>
                    <p class="company">{{ job.company_name }}</p>
                    <p class="location">{{ job.location }}</p>
                    <a href="#" class="btn btn-secondary">View Details</a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}
