{% extends 'base.html' %}
{% load static %}
{% load jformat %}
{% load persian_numbers %}

{% block title %}جزئیات خبر{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/content/content_detail.css' %}">
{% endblock %}

{% block content %}
  <main class="container my-5">


<section class="my-5">
  <div class="container">

    <div class="detail-card p-4">

      <p class="text-center" style="color: rgba(193, 193, 193, 0.699);">جهت بزرگنمایی تصویر کلیک کنید</p>
      <!-- Image -->
      <img src="{{ content.image }}"
           class="detail-img mb-4"
           data-bs-toggle="modal"
           data-bs-target="#imageModal"
           data-img="{{ content.image }}"
           style="cursor:pointer;">

      <!-- Date -->
      <div class="detail-date mb-2">
        <i class="fa-regular fa-calendar"></i>
        {{ content.published_date|jalali_fa }}
      </div>

      <!-- Title -->
      <h2 class="mb-4">
        {{ content.title }}
      </h2>

      <!-- Body -->
      <p style="line-height:2;">
        {{ content.body }}
      </p>

      <!-- Back Button -->
      <div class="mt-4">
        <a href="{% url 'content_list' %}" class="btn back-btn">
          بازگشت به اخبار
        </a>
      </div>

    </div>

  </div>
</section>

<!-- مودال (بیرون از کارت) -->
<div class="modal fade" id="imageModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered custom-modal">

    <div class="modal-content border-0 bg-transparent position-relative">

      <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal">
      </button>

      <!-- عکس -->
      <div class="modal-body text-center p-0">
        <img id="modalImg" src="" class="img-fluid rounded-4">
      </div>

    </div>

  </div>
</div>
</main>
{% endblock %}

{% block extra_js %}
<script>
const imageModal = document.getElementById('imageModal');
const modalImg = document.getElementById('modalImg');

imageModal.addEventListener('show.bs.modal', function (event) {
    const trigger = event.relatedTarget;
    const imgSrc = trigger.getAttribute('data-img');
    modalImg.src = imgSrc;
});
</script>
{% endblock %}