<%-include('navbar.ejs')%>

<div class="container-fluid px-3 px-lg-4 py-4">

    <!-- Page Heading -->
    <div class="page-heading">

        <div class="page-heading-copy">

            <span class="page-icon">
                <i class="bi bi-exclamation-triangle"></i>
            </span>

            <div>

                <p class="eyebrow mb-1">
                    Background Verification
                </p>

                <h1 class="h3 mb-1">
                    BGV Insuff / Remarks
                </h1>

                <p class="text-muted mb-0">
                    Review insufficiencies and remarks related to your background verification.
                </p>

            </div>

        </div>

    </div>


    <!-- Summary Cards -->
    <section class="row g-3 mt-1">

        <!-- Total -->
        <div class="col-12 col-sm-6 col-xl-4">

            <article class="metric-card metric-primary">

                <div class="metric-top">

                    <span class="metric-label">
                        Total Remarks
                    </span>

                    <span class="metric-icon">
                        <i class="bi bi-chat-left-text"></i>
                    </span>

                </div>

                <div class="metric-value">
                    0
                </div>

                <div class="metric-meta">
                    <span>
                        BGV related remarks
                    </span>
                </div>

            </article>

        </div>


        <!-- Pending -->
        <div class="col-12 col-sm-6 col-xl-4">

            <article class="metric-card metric-warning">

                <div class="metric-top">

                    <span class="metric-label">
                        Pending Insufficiency
                    </span>

                    <span class="metric-icon">
                        <i class="bi bi-hourglass-split"></i>
                    </span>

                </div>

                <div class="metric-value">
                    0
                </div>

                <div class="metric-meta">
                    <span>
                        Require your attention
                    </span>
                </div>

            </article>

        </div>


        <!-- Resolved -->
        <div class="col-12 col-sm-6 col-xl-4">

            <article class="metric-card metric-success">

                <div class="metric-top">

                    <span class="metric-label">
                        Resolved
                    </span>

                    <span class="metric-icon">
                        <i class="bi bi-check-circle"></i>
                    </span>

                </div>

                <div class="metric-value">
                    0
                </div>

                <div class="metric-meta">
                    <span>
                        Successfully resolved
                    </span>
                </div>

            </article>

        </div>

    </section>


    <!-- Insufficiency Table -->
    <section class="panel mt-3">

        <div class="panel-header">

            <div>

                <h2 class="h5 mb-1 section-title">

                    <i class="bi bi-clipboard-x"></i>

                    <span>
                        Insufficiency Details
                    </span>

                </h2>

                <p class="text-muted mb-0">
                    Details of documents or information that require attention.
                </p>

            </div>

        </div>


        <div class="table-responsive">

            <table class="table align-middle mb-0">

                <thead>

                    <tr>

                        <th>
                            #
                        </th>

                        <th>
                            Component
                        </th>

                        <th>
                            Insufficiency / Remark
                        </th>

                        <th>
                            Date
                        </th>

                        <th>
                            Status
                        </th>

                        <th class="text-end">
                            Action
                        </th>

                    </tr>

                </thead>

                <tbody>

                    <!-- Empty State -->

                    <tr>

                        <td colspan="6">

                            <div class="text-center py-5">

                                <div class="mb-3">

                                    <i
                                        class="bi bi-check-circle"
                                        style="font-size: 48px; opacity: .35;">
                                    </i>

                                </div>

                                <h5 class="mb-2">
                                    No Insufficiency Found
                                </h5>

                                <p class="text-muted mb-0">
                                    There are currently no insufficiencies or remarks
                                    requiring your attention.
                                </p>

                            </div>

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </section>


    <!-- Important Information -->
    <section class="panel mt-3">

        <div class="panel-header">

            <div>

                <h2 class="h5 mb-1 section-title">

                    <i class="bi bi-info-circle"></i>

                    <span>
                        Important Information
                    </span>

                </h2>

            </div>

        </div>

        <div class="p-3">

            <div class="alert alert-warning mb-0">

                <i class="bi bi-exclamation-circle me-2"></i>

                If an insufficiency is raised during your BGV process,
                please provide the requested information or documents
                within the specified time to avoid delays in verification.

            </div>

        </div>

    </section>

</div>

<%-include('footer.ejs')%>