{% extends "base.html" %}

{% block title %}{{ job.role }} - Codingo{% endblock %}

{% block content %}
<section class="content-section">
    <ul class="breadcrumbs">
        <li><a href="{{ url_for('index') }}">Home</a></li>
        <li><a href="{{ url_for('jobs') }}">Jobs</a></li>
        <li>{{ job.role }}</li>
    </ul>
    
    <div class="card">
        <div class="card-header">
            <h2>{{ job.role }}</h2>
            <div style="display: flex; justify-content: space-between; margin-top: 0.5rem;">
                <span>{{ job.company }}</span>
                <span>{{ job.seniority }}</span>
            </div>
        </div>
        <div class="card-body">
            <div style="margin-bottom: 2rem;">
                <h3 style="color: var(--primary); margin-bottom: 1rem;">Job Description</h3>
                <p>{{ job.description }}</p>
            </div>
            
            <div style="margin-bottom: 2rem;">
                <h3 style="color: var(--primary); margin-bottom: 1rem;">Required Skills</h3>
                <!-- Display the skills as a comma separated list.  The Job model exposes
                     a ``skills_list`` property to parse the JSON stored in the database. -->
                <p>
                    {% if job.skills_list %}
                        {{ job.skills_list | join(', ') }}
                    {% else %}
                        Not specified
                    {% endif %}
                </p>
            </div>
            
            <div style="text-align: center; margin-top: 2rem;">
                <p style="margin-bottom: 1rem;">Posted on: {{ job.date_posted.strftime('%B %d, %Y') }}</p>
                <a href="{{ url_for('apply', job_id=job.id) }}" class="btn btn-primary" style="padding: 0.75rem 2.5rem;">Apply Now</a>
            </div>
        </div>
    </div>
</section>

<section class="cta">
    <div class="container">
        <h2>Is This Job Not Quite Right?</h2>
        <p>Check out other opportunities that might better match your skills and career goals.</p>
        <a href="{{ url_for('jobs') }}" class="btn btn-primary">View All Jobs</a>
    </div>
</section>
{% endblock %}