{% 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">Welcome, {{ nama }}!</h2>
  <p class="mt-2 text-brand-100 max-w-2xl">Welcome to your CMS dashboard. Manage articles, pages, categories, tags, comments, and site settings from the menu on the left.</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">Articles</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">Categories</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">Tags</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">Pages</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">Gallery</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">Documents</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">Comments</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">Users</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">About This CMS</h3>
  <p class="text-sm text-slate-600 leading-relaxed">
    This is a Flask and Jinja2 based content management system (CMS) designed to be lean and fast.
    You can publish articles with the rich-text editor, group them into categories and tags,
    and create separate static pages. Any appearance changes are configured through the
    <span class="font-semibold text-brand-600">Web Settings</span> menu on the left.
  </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> Easily write & publish articles.</li>
    <li class="flex items-start gap-2"><i class="fas fa-check-circle text-brand-600 mt-0.5"></i> Manage categories, tags, and comments from a single dashboard.</li>
    <li class="flex items-start gap-2"><i class="fas fa-check-circle text-brand-600 mt-0.5"></i> Configure the site appearance (hero, footer, header) via Web Settings.</li>
  </ul>
</div>
{% endblock content %}