<%-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-file-earmark-check"></i>
            </span>

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

                <h1 class="h3 mb-1">
                    My BGV Report
                </h1>

                <p class="text-muted mb-0">
                    View and download your background verification report.
                </p>
            </div>

        </div>

    </div>


    <!-- Report Summary -->
    <div class="row g-3 mt-1">

        <!-- Report Status -->
        <div class="col-12 col-sm-6 col-xl-3">

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

                <div class="metric-top">

                    <span class="metric-label">
                        Report Status
                    </span>

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

                </div>

                <div class="metric-value">
                    <span class="badge text-bg-warning">
                        In Progress
                    </span>
                </div>

                <div class="metric-meta">
                    <span>
                        Verification is ongoing
                    </span>
                </div>

            </article>

        </div>


        <!-- Components -->
        <div class="col-12 col-sm-6 col-xl-3">

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

                <div class="metric-top">

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

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

                </div>

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

                <div class="metric-meta">
                    <span>
                        Verification checks
                    </span>
                </div>

            </article>

        </div>


        <!-- Completed -->
        <div class="col-12 col-sm-6 col-xl-3">

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

                <div class="metric-top">

                    <span class="metric-label">
                        Completed
                    </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>
                        Checks completed
                    </span>
                </div>

            </article>

        </div>


        <!-- Insufficiency -->
        <div class="col-12 col-sm-6 col-xl-3">

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

                <div class="metric-top">

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

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

                </div>

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

                <div class="metric-meta">
                    <span>
                        Items requiring attention
                    </span>
                </div>

            </article>

        </div>

    </div>


    <!-- Report Panel -->
    <section class="panel mt-3">

        <div class="panel-header">

            <div>

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

                    <i class="bi bi-file-earmark-pdf"></i>

                    <span>
                        Background Verification Report
                    </span>

                </h2>

                <p class="text-muted mb-0">
                    Your BGV report details will appear here once verification is completed.
                </p>

            </div>

            <div>

                <button
                    type="button"
                    class="btn btn-outline-secondary btn-sm"
                    disabled>

                    <i class="bi bi-download me-1"></i>
                    Download Report

                </button>

            </div>

        </div>


        <!-- Empty / Pending State -->
        <div class="p-5 text-center">

            <div class="mb-3">

                <i
                    class="bi bi-file-earmark-text"
                    style="font-size: 55px; opacity: .35;">
                </i>

            </div>

            <h5 class="mb-2">
                Report Not Available Yet
            </h5>

            <p class="text-muted mb-0">

                Your background verification is currently being processed.
                The final report will be available here once all verification
                checks are completed.

            </p>

        </div>

    </section>


    <!-- Verification 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>
                        Report Information
                    </span>

                </h2>

            </div>

        </div>


        <div class="table-responsive">

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

                <tbody>

                    <tr>

                        <th style="width: 35%;">
                            Candidate Name
                        </th>

                        <td>
                            <%= user.first_name %>
                            <%= user.last_name %>
                        </td>

                    </tr>

                    <tr>

                        <th>
                            Email
                        </th>

                        <td>
                            <%= user.email %>
                        </td>

                    </tr>

                    <tr>

                        <th>
                            Mobile
                        </th>

                        <td>
                            <%= user.mobile %>
                        </td>

                    </tr>

                    <tr>

                        <th>
                            Report Status
                        </th>

                        <td>

                            <span class="badge text-bg-warning">
                                In Progress
                            </span>

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </section>

</div>

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