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

{% block title %}Edit Job – PEZAJOB{% 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 content %}
<section class="section" style="padding-top:100px;">
  <div class="container" style="max-width:720px;">
    <h1 style="color:var(--primary);margin-bottom:8px;">Edit Job</h1>
    <p style="color:var(--text-muted);margin-bottom:32px;">{{ job.title }}{% if company %} · {{ company.name }}{% endif %}</p>

    {% if job.company_logo %}
    <div style="background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:24px;">
      <div style="font-size:0.88rem;color:var(--text-muted);margin-bottom:10px;">Current company logo</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 style="background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:24px;">
      <div style="font-size:0.88rem;color:var(--text-muted);margin-bottom:10px;">Listing logo (your profile photo)</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 style="background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:24px;">
      <h2 style="font-size:0.95rem;color:var(--primary);margin:0 0 12px;">Current attachments</h2>
      <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(--white);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 delete_attachment_url_name|default:'employers: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 %}

    <form method="post" enctype="multipart/form-data" style="background:var(--white);border:1px solid var(--border);border-radius:16px;padding:32px;">
      {% csrf_token %}
      {% include 'employers/partials/job_form_fields.html' %}
      <div style="display:flex;gap:12px;flex-wrap:wrap;">
        <button type="submit" class="btn btn-primary">Save Changes</button>
        <a href="{% url cancel_url_name|default:'employers:dashboard' %}" class="btn btn-outline">Cancel</a>
      </div>
    </form>
  </div>
</section>
{% endblock %}