{{-- =========================================================
     MODAL DETAIL PANDUAN
========================================================== --}}

<div
    class="panduan-modal detail-panduan-modal"
    id="detailPanduanModal"
    aria-hidden="true"
>

    <div class="panduan-modal-overlay"></div>


    <div
        class="panduan-modal-dialog detail-modal-dialog"
        role="dialog"
        aria-modal="true"
        aria-labelledby="detailPanduanModalTitle"
    >

        {{-- =================================================
             HEADER
        ================================================== --}}

        <div class="panduan-modal-header">

            <div class="panduan-modal-header-left">

                <button
                    type="button"
                    class="modal-back-button"
                    id="closeDetailPanduanBack"
                    title="Kembali"
                >
                    <i class="fa-solid fa-arrow-left"></i>
                </button>


                <div class="modal-title-icon">

                    <i class="fa-solid fa-book-open"></i>

                </div>


                <div>

                    <h2 id="detailPanduanModalTitle">
                        Detail Panduan
                    </h2>

                    <p>
                        Informasi lengkap panduan sistem.
                    </p>

                </div>

            </div>


            <button
                type="button"
                class="modal-close-button"
                id="closeDetailPanduan"
                aria-label="Tutup"
                title="Tutup"
            >

                <i class="fa-solid fa-xmark"></i>

            </button>

        </div>


        {{-- =================================================
             BODY
        ================================================== --}}

        <div class="panduan-modal-body detail-modal-body">


            {{-- =================================================
                 JUDUL
            ================================================== --}}

            <div class="detail-panduan-title-section">

                <div class="detail-panduan-icon">

                    <i class="fa-solid fa-book-open"></i>

                </div>


                <div class="detail-panduan-title-content">

                    <span class="detail-label">
                        Judul Panduan
                    </span>

                    <h3 id="detailJudul">
                        -
                    </h3>

                </div>

            </div>


            {{-- =================================================
                 INFORMASI
            ================================================== --}}

            <div class="detail-info-grid">


                {{-- STATUS --}}

                <div class="detail-info-item">

                    <span class="detail-label">
                        Status
                    </span>

                    <div id="detailStatus">
                        -
                    </div>

                </div>


                {{-- TANGGAL --}}

                <div class="detail-info-item">

                    <span class="detail-label">
                        Tanggal Dibuat
                    </span>

                    <strong id="detailTanggal">
                        -
                    </strong>

                </div>


            </div>


            {{-- =================================================
                 DESKRIPSI
            ================================================== --}}

            <div class="detail-section">

                <div class="detail-section-header">

                    <div class="detail-section-icon">

                        <i class="fa-solid fa-align-left"></i>

                    </div>

                    <h3>
                        Deskripsi Panduan
                    </h3>

                </div>


                <div
                    class="detail-description"
                    id="detailDeskripsi"
                >
                    -
                </div>

            </div>


            {{-- =================================================
                 VIDEO
            ================================================== --}}

            <div
                class="detail-section"
                id="detailVideoSection"
            >

                <div class="detail-section-header">

                    <div class="detail-section-icon video">

                        <i class="fa-solid fa-film"></i>

                    </div>

                    <h3>
                        Video Panduan
                    </h3>

                </div>


                <div class="detail-video-wrapper">

                    <video
                        id="detailVideo"
                        controls
                        preload="metadata"
                    >
                        Browser Anda tidak mendukung video.
                    </video>

                </div>

            </div>


            {{-- =================================================
                 DOKUMEN
            ================================================== --}}

            <div
                class="detail-section"
                id="detailDocumentSection"
            >

                <div class="detail-section-header">

                    <div class="detail-section-icon document">

                        <i class="fa-solid fa-file-pdf"></i>

                    </div>

                    <h3>
                        Dokumen Panduan
                    </h3>

                </div>


                <div class="detail-document-card">

                    <div class="detail-document-icon">

                        <i class="fa-solid fa-file-pdf"></i>

                    </div>


                    <div class="detail-document-info">

                        <span>
                            Dokumen
                        </span>

                        <strong id="detailDocumentName">
                            -
                        </strong>

                    </div>


                    <a
                        href="#"
                        id="detailDocumentLink"
                        target="_blank"
                        class="detail-document-button"
                    >

                        <i class="fa-solid fa-eye"></i>

                        Buka

                    </a>

                </div>

            </div>


            {{-- =================================================
                 EMPTY FILE
            ================================================== --}}

            <div
                class="detail-no-file"
                id="detailNoFile"
            >

                <i class="fa-solid fa-folder-open"></i>

                <span>
                    Panduan ini belum memiliki video atau dokumen.
                </span>

            </div>


        </div>


        {{-- =================================================
             FOOTER
        ================================================== --}}

        <div class="panduan-modal-footer">

            <button
                type="button"
                class="modal-btn-cancel"
                id="cancelDetailPanduanModal"
            >

                <i class="fa-solid fa-xmark"></i>

                Tutup

            </button>

        </div>

    </div>

</div>