{% extends "main/main.html" %}
{% block content %}

  <nav class="text-sm text-slate-400 mb-4">
    <a href="{{ url_for('main.kategori', permalinkkategori=post.kategori.slug) }}" class="hover:text-brand-600">{{ post.kategori.nama }}</a>
  </nav>

  <article class="card-soft overflow-hidden">
    <div class="aspect-[16/9] overflow-hidden bg-slate-100">
      <img src="{{ url_for('static', filename='upload/img_thumbnail/' + post.gambar) }}" alt="{{ post.judul }}" class="w-full h-full object-cover">
    </div>
    <div class="p-6 md:p-8">
      <h1 class="text-3xl font-extrabold text-slate-800 leading-tight">{{ post.judul }}</h1>
      <div class="flex items-center gap-3 text-sm text-slate-400 mt-3 mb-6">
        <span class="font-medium text-slate-600">{{ post.penulis.nama }}</span>
        <span>·</span>
        <span>{{ post.tanggaldibuat.strftime('%d %b %Y') }}</span>
        <span>·</span>
        <span><i class="fas fa-eye"></i> {{ post.dibaca }} views</span>
      </div>
      <div class="prose-content text-slate-700">{{ post.isi | safe }}</div>

      <div class="flex flex-wrap items-center gap-2 mt-6 pt-6 border-t border-slate-100">
        <span class="text-sm font-semibold text-slate-500">Tags:</span>
        {% for tag in post.tags %}
        <a href="{{ url_for('main.topik', permalinktag=tag.slug) }}" class="text-xs px-3 py-1 rounded-full bg-brand-50 text-brand-700 hover:bg-brand-100 transition">{{ tag.nama }}</a>
        {% endfor %}
      </div>

      <div class="flex flex-wrap gap-3 mt-6">
        <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.url }}" class="btn bg-blue-600 text-white text-sm"><i class="fab fa-facebook-f"></i> Facebook</a>
        <a href="https://twitter.com/share?url={{ request.url }}&text={{ post.judul }}" class="btn bg-sky-500 text-white text-sm"><i class="fab fa-twitter"></i> Twitter</a>
        <a href="https://api.whatsapp.com/send?text={{ post.judul }} | {{ request.url }}" class="btn bg-green-500 text-white text-sm"><i class="fab fa-whatsapp"></i> Whatsapp</a>
      </div>
    </div>
  </article>

  <!-- Similar -->
  <div class="mt-10">
    <h3 class="text-xl font-bold text-slate-800 mb-4">Similar Posts</h3>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
      {% for s in similar %}
      <a href="{{ url_for('main.artikel', berita=s.kategori.slug, idartikel=s.slug) }}" class="card-soft group overflow-hidden hover:-translate-y-1 transition">
        <div class="aspect-[16/10] overflow-hidden bg-slate-100">
          <img src="{{ url_for('static', filename='upload/img_thumbnail/' + s.gambar) }}" alt="{{ s.judul }}" class="h-full w-full object-cover group-hover:scale-105 transition">
        </div>
        <div class="p-4">
          <h4 class="font-bold text-slate-800 line-clamp-2 group-hover:text-brand-600 transition">{{ s.judul }}</h4>
          <p class="text-xs text-slate-400 mt-1">{{ s.tanggaldibuat.strftime('%d %m %Y') }}</p>
        </div>
      </a>
      {% endfor %}
    </div>
  </div>

  <!-- Comments -->
  <div class="mt-10">
    <h3 class="text-xl font-bold text-slate-800 mb-5">Comments ({{ post.komentar.count() }})</h3>
    <div class="space-y-5">
      {% for comment in post.komentar %}
      {% if not comment.reply_id %}
      <div class="flex gap-3">
        <img src="{{ comment.avatar(128) }}" class="h-12 w-12 rounded-full shrink-0">
        <div class="flex-1 bg-white rounded-xl p-4 shadow-card">
          <div class="flex items-center justify-between">
            <span class="font-semibold text-slate-800">{{ comment.nama }}</span>
            <span class="text-xs text-slate-400">{{ comment.tanggalkomen|indonesia_time(with_time=true) }}</span>
          </div>
          <p class="text-sm text-slate-600 mt-1">{{ comment.komentar }}</p>
          <button class="reply-btn text-xs font-medium text-brand-600 mt-2" data-comment-id="{{ comment.id }}" data-comment-user="{{ comment.nama }}">Reply</button>

          {% for reply in comment.children %}
          <div class="flex gap-3 mt-4 pl-4 border-l-2 border-slate-100">
            <img src="{{ reply.avatar(64) }}" class="h-9 w-9 rounded-full shrink-0">
            <div class="flex-1">
              <span class="font-semibold text-slate-800 text-sm">{{ reply.nama }}</span>
              <p class="text-sm text-slate-600 mt-0.5">{{ reply.komentar }}</p>
              <span class="text-xs text-slate-400">{{ reply.tanggalkomen|indonesia_time(with_time=true) }}</span>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
      {% endif %}
      {% endfor %}
    </div>

    <!-- Comment form -->
    <div class="card-soft p-6 mt-6">
      <h4 class="font-bold text-slate-800 mb-4">Leave a Comment</h4>
      <form action="" method="POST">
        {{ form_comment.hidden_tag() }}
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            {% if form_comment.nama.errors %}{{ form_comment.nama(class="input-field border-red-400") }}
            {% else %}{{ form_comment.nama(class="input-field", placeholder="Name") }}{% endif %}
          </div>
          <div>
            {% if form_comment.email.errors %}{{ form_comment.email(class="input-field border-red-400") }}
            {% else %}{{ form_comment.email(class="input-field", placeholder="Email") }}{% endif %}
          </div>
        </div>
        <div class="mt-4">
          {% if form_comment.website.errors %}{{ form_comment.website(class="input-field border-red-400") }}
            {% else %}{{ form_comment.website(class="input-field", placeholder="Website (optional)") }}{% endif %}
        </div>
        <div class="mt-4">
          {% if form_comment.comment.errors %}{{ form_comment.comment(class="input-field border-red-400", rows=4) }}
            {% else %}{{ form_comment.comment(class="input-field", rows=4, placeholder="Your Comment") }}{% endif %}
        </div>
                <div class="mt-4 flex items-center gap-3">
          <label for="form_comment-captcha" class="text-sm text-slate-600">Captcha: {{ captcha_a }} + {{ captcha_b }} =</label>
          {% if form_comment.captcha.errors %}{{ form_comment.captcha(class="input-field w-24 border-red-400") }}
          {% else %}{{ form_comment.captcha(class="input-field w-24") }}{% endif %}
        </div>
        <div class="mt-4">{{ form_comment.submit(class="btn-primary") }}</div>
      </form>
    </div>
  </div>

  <!-- Reply modal -->
  <div id="replyModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4">
    <div class="bg-white rounded-2xl w-full max-w-lg overflow-hidden">
      <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100">
        <h3 id="replyTitle" class="font-bold text-slate-800"></h3>
        <button id="replyClose" class="text-slate-400 hover:text-slate-600 text-xl">&times;</button>
      </div>
      <div class="p-6">
        <form action="" method="POST">
          {{ form_reply.hidden_tag() }}
          <input type="hidden" id="commentId" name="commentId" value="">
          <div class="mb-4">{% if form_reply.nama.errors %}{{ form_reply.nama(class="input-field border-red-400") }}{% else %}{{ form_reply.nama(class="input-field", placeholder="Name") }}{% endif %}</div>
          <div class="mb-4">{% if form_reply.email.errors %}{{ form_reply.email(class="input-field border-red-400") }}{% else %}{{ form_reply.email(class="input-field", placeholder="Email") }}{% endif %}</div>
          <div class="mb-4">{% if form_reply.website.errors %}{{ form_reply.website(class="input-field border-red-400") }}{% else %}{{ form_reply.website(class="input-field", placeholder="Website (optional)") }}{% endif %}</div>
          <div class="mb-4">{% if form_reply.comment.errors %}{{ form_reply.comment(class="input-field border-red-400", rows=3) }}{% else %}{{ form_reply.comment(class="input-field", rows=3, placeholder="Your Reply") }}{% endif %}</div>
          <div class="mb-4 flex items-center gap-3">
            <label for="form_comment-captcha" class="text-sm text-slate-600">Captcha: {{ captcha_a }} + {{ captcha_b }} =</label>
            {% if form_reply.captcha.errors %}{{ form_reply.captcha(class="input-field w-24 border-red-400") }}
            {% else %}{{ form_reply.captcha(class="input-field w-24") }}{% endif %}
          </div>
                    <div>{{ form_reply.submit(class="btn-primary") }}</div>
        </form>
      </div>
    </div>
  </div>

  <script nonce="{{ csp_nonce() }}">
    (function () {
      var modal = document.getElementById('replyModal');
      var title = document.getElementById('replyTitle');
      var closeBtn = document.getElementById('replyClose');
      var commentId = document.getElementById('commentId');

      document.querySelectorAll('.reply-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
          title.textContent = 'Reply to comment ' + btn.dataset.commentUser;
          commentId.value = btn.dataset.commentId;
          modal.classList.remove('hidden');
          modal.classList.add('flex');
        });
      });
      function closeModal() { modal.classList.add('hidden'); modal.classList.remove('flex'); }
      closeBtn.addEventListener('click', closeModal);
      modal.addEventListener('click', function (e) { if (e.target === modal) closeModal(); });
    })();
  </script>

{% endblock content %}