{% extends 'base.html' %}
{% load static django_bootstrap5 %}

{% block title %}
  {% if is_update %}Редактировать{% else %}Создать{% endif %} публикацию
{% endblock %}

{% block extra_css %}{% endblock %}

{% block content %}
  <!-- Header (без кнопки Отмена) -->
  <div class="d-flex align-items-center justify-content-between mb-3">
    <div class="d-flex align-items-center gap-2">
      <i class="bi-megaphone fs-3 text-primary"></i>
      <h2 class="mb-0">
        {% if is_update %}Редактировать{% else %}Создать{% endif %} публикацию
      </h2>
      {% if context_type == 'department' and department %}
        <span class="badge bg-secondary">Отдел: {{ department.name }}</span>
      {% elif context_type == 'company' %}
        <span class="badge bg-secondary">Компания</span>
      {% elif context_type == 'employee' %}
        <span class="badge bg-secondary">Личная публикация</span>
      {% endif %}
    </div>
  </div>

  <!-- Form -->
  <form method="post" enctype="multipart/form-data" class="card shadow-sm border-0">
    <div class="card-body">
      {% csrf_token %}

      <div class="row g-4">
        <div class="col-lg-8">
          {% if form.title %}{% bootstrap_field form.title %}{% endif %}
          {% if form.body %}{% bootstrap_field form.body %}{% endif %}
          {% if form.type %}{{ form.type }}{% endif %}
          {% if form.department %}{% bootstrap_field form.department %}{% endif %}
        </div>

        <div class="col-lg-4">
          <div class="border rounded-3 p-3">
            <div class="mb-3">
              <div class="fw-semibold mb-2">Изображение</div>
              {% if form.instance.pk and form.instance.image %}
                <div class="mb-2">
                  <img src="{{ form.instance.image.url }}" alt="Превью" class="img-fluid rounded" id="currentImagePreview">
                </div>
              {% endif %}
              {% if form.image %}{% bootstrap_field form.image %}{% endif %}
              <img id="newImagePreview" class="img-fluid rounded d-none" alt="Превью выбранного изображения">
            </div>

            <div>
              <div class="fw-semibold mb-2">Вложение</div>
              {% if form.instance.pk and form.instance.attachment %}
                <p class="mb-2">
                  Текущее вложение:
                  <a href="{{ form.instance.attachment.url }}" target="_blank">
                    {{ form.instance.attachment.name|cut:"feed/attachments/" }}
                  </a>
                </p>
              {% endif %}
              {% if form.attachment %}{% bootstrap_field form.attachment %}{% endif %}
            </div>
          </div>
        </div>
      </div>

      <!-- Actions: одна Отмена -->
      <div class="mt-4 d-flex align-items-center gap-2">
        <button type="submit" class="btn btn-success">
          <i class="bi-check2"></i> Сохранить
        </button>

        {% if cancel_url %}
          <a href="{{ cancel_url }}" class="btn btn-outline-secondary">Отмена</a>
        {% else %}
          <a href="javascript:history.back()" class="btn btn-outline-secondary">Отмена</a>
        {% endif %}
      </div>
    </div>
  </form>
</div>

<script type="module">
  import { initImagePreview } from "{% static 'js/components/imagePreviewHandler.js' %}";

  // Превью изображения
  initImagePreview({
    inputId: 'id_image',
    previewId: 'newImagePreview',
    currentPreviewId: 'currentImagePreview'
  });
</script>

{% endblock %}