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

{% block title %}Kitab Wirid & Doa{% endblock %}
{% block desktop_title %}Kitab Wirid & Doa{% endblock %}
{% block header_label %}Kitab{% endblock %}
{% block header_title %}Kitab Wirid & Doa{% endblock %}
{% block header_subtitle %}Kumpulan bacaan wirid dan doa sehari-hari{% endblock %}

{% block content %}

<section class="flex flex-col gap-spacing-sm">
    <div class="rounded-2xl bg-primary/5 p-3 flex items-center gap-3">
        <span class="material-symbols-outlined text-[24px] text-primary">auto_stories</span>
        <p class="font-body-sm text-body-sm text-on-surface-variant">
            Kumpulan bacaan wirid dan doa sehari-hari yang diamalkan oleh santri.
        </p>
    </div>

    {% if kitab_list %}
        <div class="flex flex-col gap-spacing-xs">
            {% for kitab in kitab_list %}
            {% if kitab.file_pdf %}
            <a href="{{ url_for('secure_upload', folder='kitab', filename=kitab.file_pdf) }}" target="_blank" class="no-underline rounded-3xl bg-surface-container-lowest p-spacing-md shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] flex items-center gap-3 active:scale-[0.98] transition-all group">
            {% else %}
            <a href="#" onclick="alert('File PDF belum diunggah untuk kitab ini.'); return false;" class="no-underline rounded-3xl bg-surface-container-lowest p-spacing-md shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] flex items-center gap-3 active:scale-[0.98] transition-all group">
            {% endif %}
                <div class="w-12 h-12 rounded-2xl bg-primary/10 text-primary flex items-center justify-center flex-shrink-0 group-hover:bg-primary/20 transition-colors shadow-sm">
                    <span class="material-symbols-outlined text-[24px]">menu_book</span>
                </div>
                <div class="flex flex-col min-w-0 flex-1">
                    <h4 class="font-headline-sm text-headline-sm text-on-surface leading-tight truncate">{{ kitab.judul }}</h4>
                    <p class="font-body-sm text-body-sm text-on-surface-variant truncate mt-0.5">{{ kitab.deskripsi or 'Klik untuk membaca' }}</p>
                </div>
                <span class="material-symbols-outlined text-[20px] text-on-surface-variant/50 flex-shrink-0 group-hover:text-primary transition-colors">chevron_right</span>
            </a>
            {% endfor %}
        </div>
    {% 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">menu_book</span>
            <div>
                <h4 class="font-headline-sm text-headline-sm text-on-surface">Belum Ada Kitab</h4>
                <p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Belum ada kitab wirid yang tersedia saat ini.</p>
            </div>
        </div>
    {% endif %}
</section>

{% endblock %}