{% extends 'wali/base_wali.html' %}

{% block title %}Pengumuman Pondok{% endblock %}
{% block desktop_title %}Pengumuman Pondok{% endblock %}
{% block header_label %}Pengumuman{% endblock %}
{% block header_title %}Pengumuman{% endblock %}
{% block header_subtitle %}Informasi terbaru dari pondok pesantren{% endblock %}

{% block content %}

<section class="flex flex-col gap-spacing-sm">
    {% if pengumuman %}
        {% for p in pengumuman %}
        <article class="rounded-3xl bg-surface-container-lowest p-spacing-md shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] flex flex-col gap-3">
            <div class="flex items-center justify-between gap-2">
                <span class="px-2.5 py-1 rounded-full bg-primary-fixed text-on-primary-fixed font-label-sm text-label-sm font-semibold">
                    Pengumuman
                </span>
                <div class="flex items-center gap-1 text-on-surface-variant font-label-sm text-label-sm">
                    <span class="material-symbols-outlined text-[14px]">calendar_today</span>
                    {{ p.tanggal_posting.strftime('%d %B %Y') }}
                    <span class="ml-1 px-1.5 py-0.5 rounded bg-surface-container text-[9px]">{{ p.tanggal_posting.strftime('%H:%M') }}</span>
                </div>
            </div>
            <div>
                <h4 class="font-headline-sm text-headline-sm text-on-surface leading-snug">
                    {{ p.judul }}
                </h4>
                <div class="mt-2 font-body-md text-body-md text-on-surface/80 leading-relaxed prose-sm">
                    {{ p.isi_pesan }}
                </div>
            </div>
        </article>
        {% endfor %}
    {% else %}
        <div class="rounded-3xl bg-surface-container-lowest p-8 shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] text-center flex flex-col items-center gap-3">
            <span class="material-symbols-outlined text-[48px] text-outline/30">campaign</span>
            <div>
                <h4 class="font-headline-sm text-headline-sm text-on-surface">Belum ada pengumuman</h4>
                <p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Pengumuman dari pihak pondok pesantren akan muncul di sini.</p>
            </div>
        </div>
    {% endif %}
</section>

{% endblock %}