{% extends 'platform_admin/base.html' %}

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

{% block extra_css %}{% include 'employers/partials/job_form_extras.html' %}{% endblock %}

{% block extra_js %}{% include 'employers/partials/job_form_extras.js.html' %}{% endblock %}
{% block dash_content %}
<div class="page-heading" style="display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;">
  <div>
    <h1>{{ page_title }}</h1>
    {% if page_subtitle %}<p>{{ page_subtitle }}</p>{% endif %}
  </div>
  <div style="display:flex;gap:8px;flex-wrap:wrap;">
    <a href="{% url 'platform_admin:job_detail' slug=job.slug %}" class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> View job</a>
    <a href="{% url 'platform_admin:jobs' %}" class="btn btn-outline btn-sm"><i class="fas fa-arrow-left"></i> All jobs</a>
  </div>
</div>

{% if job.company_logo %}
<div class="panel" style="max-width:820px;margin-bottom:18px;">
  <div class="panel-header" style="margin-bottom:12px;">
    <h3><i class="fas fa-building"></i> Current company logo</h3>
  </div>
  <img src="{{ job.company_logo.url }}" alt="{{ job.company_name }} logo" style="width:72px;height:72px;object-fit:cover;border-radius:12px;border:1px solid var(--border);" />
</div>
{% elif job.posted_by and job.posted_by.avatar %}
<div class="panel" style="max-width:820px;margin-bottom:18px;">
  <div class="panel-header" style="margin-bottom:12px;">
    <h3><i class="fas fa-user-circle"></i> Listing logo (poster profile photo)</h3>
  </div>
  <img src="{{ job.posted_by.avatar.url }}" alt="" style="width:72px;height:72px;object-fit:cover;border-radius:12px;border:1px solid var(--border);" />
</div>
{% endif %}

{% if attachments %}
<div class="panel" style="max-width:820px;margin-bottom:18px;">
  <div class="panel-header" style="margin-bottom:12px;">
    <h3><i class="fas fa-paperclip"></i> Current attachments</h3>
  </div>
  <div style="display:flex;flex-direction:column;gap:10px;">
    {% for attachment in attachments %}
    <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;">
      <div style="display:flex;align-items:center;gap:10px;min-width:0;">
        <i class="fas {{ attachment.icon_class }}" style="color:{% if attachment.is_image %}var(--secondary){% else %}#c62828{% endif %};"></i>
        <a href="{{ attachment.file.url }}" target="_blank" rel="noopener noreferrer" style="font-size:0.88rem;color:var(--primary);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ attachment.display_title }}</a>
      </div>
      <form method="post" action="{% url 'platform_admin:delete_job_attachment' pk=attachment.pk %}">
        {% csrf_token %}
        <button type="submit" class="btn btn-sm btn-outline">Remove</button>
      </form>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

<div class="panel" style="max-width:820px;">
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {% include 'employers/partials/job_form_fields.html' %}
    <div style="display:flex;gap:10px;flex-wrap:wrap;">
      <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save Changes</button>
      <a href="{% url 'platform_admin:job_detail' slug=job.slug %}" class="btn btn-outline">Cancel</a>
    </div>
  </form>
</div>
{% endblock %}