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

{% block title %}Kartu Tanda Santri{% endblock %}
{% block desktop_title %}Kartu Tanda Santri{% endblock %}
{% block header_label %}Kartu{% endblock %}
{% block header_title %}Kartu Santri{% endblock %}
{% block header_subtitle %}Preview kartu tanda santri digital{% endblock %}

{% block content %}

<!-- Info Banner -->
<section class="rounded-2xl bg-primary/5 p-3 flex items-start gap-3">
    <span class="material-symbols-outlined text-[20px] text-primary mt-0.5">info</span>
    <div>
        <h4 class="font-label-lg text-label-lg text-primary">Preview Kartu Tanda Santri</h4>
        <p class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">Ini adalah tampilan digital Kartu Tanda Santri. Kartu fisik dapat diambil di bagian administrasi pondok pesantren.</p>
    </div>
</section>

<div class="flex flex-col gap-6 mt-4">
    <!-- Card Preview KTS -->
    <section class="rounded-3xl bg-surface-container-lowest p-spacing-lg shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] flex flex-col items-center gap-4">
        <h5 class="font-label-md text-label-md text-on-surface-variant font-bold uppercase tracking-wider mb-2">KTS (Kartu Tanda Santri)</h5>
        <div class="w-full overflow-hidden flex justify-center">
            <iframe src="/wali/kartu/preview?embed=1" class="border-none rounded-xl shadow-lg" style="width: 323px; height: 204px;" scrolling="no"></iframe>
        </div>
    
        <a href="/wali/kartu/preview" target="_blank"
           class="h-10 px-6 rounded-full bg-primary-container text-on-primary font-label-lg text-label-lg flex items-center justify-center gap-2 no-underline shadow-md hover:opacity-90 active:scale-[0.98] transition-all">
            <span class="material-symbols-outlined text-[18px]">open_in_new</span>
            Buka Layar Penuh
        </a>
    </section>

    <!-- Card Preview KTSM -->
    <section class="rounded-3xl bg-surface-container-lowest p-spacing-lg shadow-[0_4px_20px_-2px_rgba(45,52,54,0.05)] flex flex-col items-center gap-4">
        <h5 class="font-label-md text-label-md text-on-surface-variant font-bold uppercase tracking-wider mb-2">KTSM (Kartu Tanda Siswa Madrasah)</h5>
        <div class="w-full overflow-hidden flex justify-center">
            <iframe src="/wali/kartu_madin/preview?embed=1" class="border-none rounded-xl shadow-lg" style="width: 323px; height: 204px;" scrolling="no"></iframe>
        </div>
    
        <a href="/wali/kartu_madin/preview" target="_blank"
           class="h-10 px-6 rounded-full bg-primary-container text-on-primary font-label-lg text-label-lg flex items-center justify-center gap-2 no-underline shadow-md hover:opacity-90 active:scale-[0.98] transition-all">
            <span class="material-symbols-outlined text-[18px]">open_in_new</span>
            Buka Layar Penuh
        </a>
    </section>
</div>

{% endblock %}