{% extends "jobportal/base.html" %}

{% block title %}My Jobs | Job Portal{% endblock %}

{% block content %}
{% if messages %}
    {% for message in messages %}
        <div class="alert alert-info" role="alert">{{ message }}</div>
    {% endfor %}
{% endif %}

<section class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">My Posted Jobs</h1>
    <a href="{% url 'job_post' %}" class="btn btn-primary">Post New Job</a>
</section>

<div class="row g-3">
    {% for job in jobs %}
        <div class="col-lg-6">
            <article class="card border-0 shadow-sm h-100">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between gap-3">
                        <div>
                            <h2 class="h5 mb-1">{{ job.title }}</h2>
                            <div class="text-secondary">{{ job.category }}</div>
                        </div>
                        <span class="badge text-bg-light border align-self-start">{{ job.number_of_openings }} openings</span>
                    </div>
                    <p class="mt-3 mb-2">{{ job.description }}</p>
                    <p class="text-secondary mb-3"><strong>Skills:</strong> {{ job.skills_set }}</p>
                    <div class="text-secondary small">Posted on {{ job.created_at|date:"M d, Y" }}</div>
                </div>
            </article>
        </div>
    {% empty %}
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-5 text-center">
                    <p class="text-secondary mb-3">You haven't posted any jobs yet.</p>
                    <a href="{% url 'job_post' %}" class="btn btn-primary">Post Your First Job</a>
                </div>
            </div>
        </div>
    {% endfor %}
</div>
{% endblock %}