{% extends "base.html" %}
{% block title %}MangaCocok — Temukan Manga Selanjutnya{% endblock %}

{% block content %}

<section class="hero">
  <div class="hero-inner">
    <div class="hero-eyebrow">SISTEM REKOMENDASI · CONTENT-BASED FILTERING</div>
    <h1>Selesai satu manga,<br>bingung baca <span class="hero-highlight">apa lagi?</span></h1>
    <p>Masukkan judul manga Favoritmu. Sistem akan mencarikan judul Manga dengan kemiripan paling tinggi.</p>
    <form class="hero-search-form" data-autocomplete-form action="{{ url_for('recommend') }}" method="get">
      <input type="text" name="title" placeholder="Masukkan judul manga" autocomplete="off" autofocus>
      <button type="submit">CARI MANGA</button>
    </form>
  </div>
</section>

<div class="wrap">
  <section class="section">
    <div class="section-head">
      <h2>Manga Dengan Rating Tertinggi</h2>
      <span>{{ popular|length }} JUDUL</span>
    </div>

    <div class="panel-grid">
      {% for m in popular %}
      <a class="panel-card" href="{{ url_for('manga_detail', title=m.title) }}">
        {% if m.main_picture %}
          <img class="panel-thumb" src="{{ m.main_picture }}" alt="Cover {{ m.title }}"
               onerror="this.outerHTML='<div class=&quot;panel-thumb-fallback&quot;>Gambar tidak tersedia</div>'">
        {% else %}
          <div class="panel-thumb-fallback">Gambar tidak tersedia</div>
        {% endif %}
        <div class="panel-body">
          <p class="panel-title">{{ m.title }}</p>
          <div class="panel-meta">
            <span class="tag tag-score">★ {{ m.score }}</span>
            <span class="tag">{{ m.type }}</span>
          </div>
        </div>
      </a>
      {% endfor %}
    </div>
  </section>
</div>

{% endblock %}