{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}
{% block meta_description %}{{ meta_description }}{% endblock %}

{% block content %}
<section class="detail-hero">
  <div class="container">
    <a class="back-link" href="{% url 'job_list' %}">← Back to jobs</a>
    <div class="row g-4 align-items-start mt-2">
      <div class="col-lg-8">
        <span class="badge-soft">{{ job.get_contract_type_display }}</span>
        <h1>{{ job.title }}</h1>
        <p class="lead">{{ job.company }} · {{ job.location }}</p>
      </div>
      <div class="col-lg-4">
        <div class="detail-side glass-card">
          <p class="card-kicker">Source</p>
          <h2 class="h5">{{ job.source.name }}</h2>
          <p class="small text-muted mb-3">{{ job.source.get_family_display }} · {{ job.source.get_status_display }}</p>
          {% if job.apply_url %}<a class="btn btn-accent w-100 rounded-pill" href="{{ job.apply_url }}" target="_blank" rel="noopener">Open apply URL</a>{% endif %}
        </div>
      </div>
    </div>
  </div>
</section>
<section class="section-pad pt-0">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-8">
        <article class="content-panel">
          <h2>Description</h2>
          <p>{{ job.description|linebreaksbr }}</p>
        </article>
      </div>
      <div class="col-lg-4">
        <aside class="content-panel">
          <h2 class="h5">Pipeline facts</h2>
          <dl class="detail-list compact">
            <div><dt>Published</dt><dd>{{ job.published_at|date:"M d, Y" }}</dd></div>
            <div><dt>Remote</dt><dd>{{ job.remote|yesno:"Yes,No" }}</dd></div>
            <div><dt>Salary</dt><dd>{{ job.salary|default:"Not specified" }}</dd></div>
            <div><dt>Duplicate score</dt><dd>{{ job.duplicate_score }}</dd></div>
          </dl>
        </aside>
      </div>
    </div>
    {% if related_jobs %}
    <div class="section-heading mt-5"><h2>More from {{ job.company }}</h2></div>
    <div class="row g-4">
      {% for related in related_jobs %}
      <div class="col-md-6 col-xl-4">{% include "core/partials/job_card.html" with job=related %}</div>
      {% endfor %}
    </div>
    {% endif %}
  </div>
</section>
{% endblock %}