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

  {% if headline %}
  <section class="mb-10">
    <div class="relative overflow-hidden rounded-2xl shadow-card bg-slate-900">
      <div id="headlineTrack" class="flex transition-transform duration-500 ease-in-out">
        {% for isihead in headline %}
        <div class="w-full shrink-0 relative">
          <a href="{{ url_for('main.artikel', idartikel=isihead.slug) }}" class="block aspect-video">
            <img src="{{ url_for('static', filename='upload/img_thumbnail/' + isihead.gambar) }}" alt="{{ isihead.judul }}"
                 class="h-full w-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
            <div class="absolute bottom-0 left-0 right-0 p-5 sm:p-7">
              <span class="inline-block mb-2 rounded-full bg-brand-600 px-3 py-1 text-xs font-semibold text-white">Headline</span>
              <h3 class="text-xl sm:text-3xl font-bold text-white leading-tight">{{ isihead.judul }}</h3>
              <p class="mt-2 hidden sm:block text-sm text-slate-200 line-clamp-2">{{ isihead.isi|striptags|truncate(160) }}</p>
            </div>
          </a>
        </div>
        {% endfor %}
      </div>

      <!-- Prev / Next -->
      <button id="hsPrev" aria-label="Previous" class="absolute left-3 top-1/2 -translate-y-1/2 grid h-10 w-10 place-items-center rounded-full bg-slate-800 text-white hover:bg-slate-700 transition">
        <i class="fas fa-chevron-left"></i>
      </button>
      <button id="hsNext" aria-label="Next" class="absolute right-3 top-1/2 -translate-y-1/2 grid h-10 w-10 place-items-center rounded-full bg-slate-800 text-white hover:bg-slate-700 transition">
        <i class="fas fa-chevron-right"></i>
      </button>

      <!-- Dots -->
      <div id="hsDots" class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-2">
        {% for isihead in headline %}
        <button data-i="{{ loop.index0 }}" aria-label="Slide {{ loop.index }}" class="hs-dot h-2.5 w-2.5 rounded-full bg-slate-300 hover:bg-white transition {% if loop.first %}bg-white{% endif %}"></button>
        {% endfor %}
      </div>
    </div>
  </section>

  <script nonce="{{ csp_nonce() }}">
    (function () {
      var track = document.getElementById('headlineTrack');
      if (!track) return;
      var slides = track.children.length;
      if (slides <= 1) return;
      var idx = 0, timer = null;
      var dots = document.querySelectorAll('.hs-dot');
      function go(i) {
        idx = (i + slides) % slides;
        track.style.transform = 'translateX(' + (-idx * 100) + '%)';
        dots.forEach(function (d, di) {
          d.classList.toggle('bg-white', di === idx);
          d.classList.toggle('bg-slate-300', di !== idx);
        });
      }
      function reset() {
        if (timer) clearInterval(timer);
        timer = setInterval(function () { go(idx + 1); }, 5000);
      }
      document.getElementById('hsNext').addEventListener('click', function () { go(idx + 1); reset(); });
      document.getElementById('hsPrev').addEventListener('click', function () { go(idx - 1); reset(); });
      dots.forEach(function (d) {
        d.addEventListener('click', function () { go(parseInt(d.dataset.i, 10)); reset(); });
      });
      reset();
    })();
  </script>
  {% endif %}

  <h2 class="text-2xl font-bold text-slate-800 mb-5">Latest Articles</h2>
  <div class="space-y-6">
    {% for post in posts.items %}
    <article class="card-soft p-4 sm:p-5 flex flex-col sm:flex-row gap-4 hover:-translate-y-0.5 transition">
      <a href="{{ url_for('main.artikel', idartikel=post.slug) }}" class="sm:w-56 shrink-0">
        <div class="aspect-video sm:aspect-square overflow-hidden rounded-xl bg-slate-100">
          <img src="{{ url_for('static', filename='upload/img_thumbnail/' + post.gambar) }}" alt="{{ post.judul }}"
               class="h-full w-full object-cover hover:scale-105 transition duration-500">
        </div>
      </a>
      <div class="min-w-0 flex flex-col">
        <div class="flex items-center gap-2 text-xs text-slate-400 mb-1">
          <span class="font-semibold text-brand-600">{{ post.kategori.nama }}</span>
          <span>·</span>
          <span>{{ post.penulis.nama }}</span>
          <span>·</span>
          <span>{{ post.tanggaldibuat.strftime('%d %b %Y') }}</span>
        </div>
        <a href="{{ url_for('main.artikel', idartikel=post.slug) }}" class="text-lg font-bold text-slate-800 hover:text-brand-600 transition">{{ post.judul }}</a>
        <p class="mt-2 text-sm text-slate-500 line-clamp-3">{{ post.isi|striptags|truncate(200) }}</p>
      </div>
    </article>
    {% endfor %}
  </div>

  <div class="flex justify-between items-center mt-8">
    {% if posts.has_prev %}
    <a href="{{ url_for('main.blog', halaman=posts.prev_num) }}" class="btn-outline text-sm"><i class="fas fa-arrow-left"></i> Previous</a>
    {% else %}
    <span></span>
    {% endif %}
    {% if posts.has_next %}
    <a href="{{ url_for('main.blog', halaman=posts.next_num) }}" class="btn-outline text-sm">Next <i class="fas fa-arrow-right"></i></a>
    {% endif %}
  </div>

{% endblock content %}