{% extends "base.html" %}

{% block title %}Available Jobs - Codingo{% endblock %}

{% block hero %}
<section class="hero" style="padding: 3rem 1rem;">
    <div class="container">
        <div class="hero-content">
            <h1>Find Your Perfect Tech Role</h1>
            <p>Browse our curated selection of tech positions and let LUNA match your skills to the right opportunity.</p>
        </div>
    </div>
</section>
{% endblock %}

{% block content %}
<section class="content-section">
    <div class="section-title">
        <h2>Available Positions</h2>
        <p>Discover opportunities that match your expertise and career goals</p>
    </div>
    
    <ul class="breadcrumbs">
        <li><a href="{{ url_for('index') }}">Home</a></li>
        <li>Jobs</li>
    </ul>
    
    <div class="job-grid">
        {% if jobs %}
            {% for job in jobs %}
                <div class="job-card">
                    <div class="job-header">
                        <h3>{{ job.title }}</h3>
                        <div class="job-info">
                            <span>{{ job.company }}</span>
                            <span>{{ job.location }}</span>
                        </div>
                    </div>
                    <div class="job-body">
                        <div class="job-description">
                            <p>{{ job.description[:150] }}{% if job.description|length > 150 %}...{% endif %}</p>
                        </div>
                        <div>Posted: {{ job.date_posted.strftime('%B %d, %Y') }}</div>
                    </div>
                    <div class="job-footer">
                        <a href="{{ url_for('job_detail', job_id=job.id) }}" class="btn btn-primary">View Details</a>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <div class="card">
                <div class="card-body">
                    <p>No jobs available at the moment. Please check back later.</p>
                </div>
            </div>
        {% endif %}
    </div>
</section>
{% endblock %}