{% extends "admin/layout.html" %}
{% block content %}
<div class="bg-gradient-to-r from-brand-600 to-brand-700 rounded-2xl shadow-card p-6 text-white">
  <h2 class="text-2xl text-3xl font-bold">Selamat datang, {{ nama }}!</h2>
  <p class="mt-2 text-brand-100 max-w-2xl">Selamat datang di dasbor CMS Anda. Kelola artikel, halaman, kategori, tag, komentar, dan pengaturan situs dari menu di sebelah kiri.</p>
</div>

<div class="dash-grid gap-4 mt-6">
  <div class="bg-white rounded-2xl shadow-card p-4 text-center">
    <div class="text-2xl font-bold text-brand-600">{{ stats.artikel }}</div>
    <div class="text-xs text-slate-500 mt-1">Artikel</div>
  </div>
  <div class="bg-white rounded-2xl shadow-card p-4 text-center">
    <div class="text-2xl font-bold text-brand-600">{{ stats.kategori }}</div>
    <div class="text-xs text-slate-500 mt-1">Kategori</div>
  </div>
  <div class="bg-white rounded-2xl shadow-card p-4 text-center">
    <div class="text-2xl font-bold text-brand-600">{{ stats.tag }}</div>
    <div class="text-xs text-slate-500 mt-1">Tag</div>
  </div>
  <div class="bg-white rounded-2xl shadow-card p-4 text-center">
    <div class="text-2xl font-bold text-brand-600">{{ stats.halaman }}</div>
    <div class="text-xs text-slate-500 mt-1">Halaman</div>
  </div>
  <div class="bg-white rounded-2xl shadow-card p-4 text-center">
    <div class="text-2xl font-bold text-brand-600">{{ stats.galeri }}</div>
    <div class="text-xs text-slate-500 mt-1">Galeri</div>
  </div>
  <div class="bg-white rounded-2xl shadow-card p-4 text-center">
    <div class="text-2xl font-bold text-brand-600">{{ stats.dokumen }}</div>
    <div class="text-xs text-slate-500 mt-1">Dokumen</div>
  </div>
  <div class="bg-white rounded-2xl shadow-card p-4 text-center">
    <div class="text-2xl font-bold text-brand-600">{{ stats.komentar }}</div>
    <div class="text-xs text-slate-500 mt-1">Komentar</div>
  </div>
  <div class="bg-white rounded-2xl shadow-card p-4 text-center">
    <div class="text-2xl font-bold text-brand-600">{{ stats.pengguna }}</div>
    <div class="text-xs text-slate-500 mt-1">Pengguna</div>
  </div>
</div>

<div class="bg-white rounded-2xl shadow-card p-6 mt-6">
  <h3 class="text-lg font-bold text-slate-800 mb-3">Tentang CMS Ini</h3>
  <p class="text-sm text-slate-600 leading-relaxed">
    Ini adalah sistem manajemen konten (CMS) berbasis Flask dan Jinja2 yang dirancang ramping dan cepat.
    Anda dapat menerbitkan artikel dengan editor rich-text, mengelompokannya ke dalam kategori dan tag,
    serta membuat halaman statis terpisah. Setiap perubahan pada tampilan diatur melalui menu
    <span class="font-semibold text-brand-600">Pengaturan Web</span> di sebelah kiri.
  </p>
  <ul class="mt-4 space-y-2 text-sm text-slate-600">
    <li class="flex items-start gap-2"><i class="fas fa-check-circle text-brand-600 mt-0.5"></i> Tulis & terbitkan artikel dengan mudah.</li>
    <li class="flex items-start gap-2"><i class="fas fa-check-circle text-brand-600 mt-0.5"></i> Kelola kategori, tag, dan komentar dari satu dasbor.</li>
    <li class="flex items-start gap-2"><i class="fas fa-check-circle text-brand-600 mt-0.5"></i> Atur tampilan situs (hero, footer, header) lewat Pengaturan Web.</li>
  </ul>
</div>
{% endblock content %}