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

            <div>

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

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

                <p class="text-muted mb-0">
                    View the verification components included in your background verification process.
                </p>

            </div>

        </div>

    </div>


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

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

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

                <div class="metric-top">

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

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

                </div>

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

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

            </article>

        </div>


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

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

                <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>
                        Successfully verified
                    </span>
                </div>

            </article>

        </div>


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

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

                <div class="metric-top">

                    <span class="metric-label">
                        In Progress
                    </span>

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

                </div>

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

                <div class="metric-meta">
                    <span>
                        Under verification
                    </span>
                </div>

            </article>

        </div>


        <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>
                        Need attention
                    </span>
                </div>

            </article>

        </div>

    </section>


    <!-- Components -->
    <section class="panel mt-3">

        <div class="panel-header">

            <div>

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

                    <i class="bi bi-shield-check"></i>

                    <span>
                        Verification Components
                    </span>

                </h2>

                <p class="text-muted mb-0">
                    Current status of each background verification check.
                </p>

            </div>

        </div>


        <div class="table-responsive">

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

                <thead>

                    <tr>

                        <th>
                            #
                        </th>

                        <th>
                            BGV Component
                        </th>

                        <th>
                            Description
                        </th>

                        <th>
                            Status
                        </th>

                        <th>
                            Remarks
                        </th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td>
                            01
                        </td>

                        <td>
                            <strong>
                                Identity Verification
                            </strong>
                        </td>

                        <td>
                            Verification of candidate identity and submitted documents.
                        </td>

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

                        <td>
                            -
                        </td>

                    </tr>


                    <tr>

                        <td>
                            02
                        </td>

                        <td>
                            <strong>
                                Address Verification
                            </strong>
                        </td>

                        <td>
                            Verification of the candidate's residential address.
                        </td>

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

                        <td>
                            -
                        </td>

                    </tr>


                    <tr>

                        <td>
                            03
                        </td>

                        <td>
                            <strong>
                                Employment Verification
                            </strong>
                        </td>

                        <td>
                            Verification of previous employment details.
                        </td>

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

                        <td>
                            -
                        </td>

                    </tr>


                    <tr>

                        <td>
                            04
                        </td>

                        <td>
                            <strong>
                                Education Verification
                            </strong>
                        </td>

                        <td>
                            Verification of educational qualifications and records.
                        </td>

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

                        <td>
                            -
                        </td>

                    </tr>


                    <tr>

                        <td>
                            05
                        </td>

                        <td>
                            <strong>
                                Criminal Verification
                            </strong>
                        </td>

                        <td>
                            Background verification related to criminal records.
                        </td>

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

                        <td>
                            -
                        </td>

                    </tr>


                    <tr>

                        <td>
                            06
                        </td>

                        <td>
                            <strong>
                                Reference Verification
                            </strong>
                        </td>

                        <td>
                            Verification of candidate-provided professional references.
                        </td>

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

                        <td>
                            -
                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </section>


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

        <div class="panel-header">

            <div>

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

                    <i class="bi bi-person-badge"></i>

                    <span>
                        Candidate Information
                    </span>

                </h2>

            </div>

        </div>


        <div class="p-3">

            <div class="row g-3">

                <div class="col-md-4">

                    <small class="text-muted d-block">
                        Candidate Name
                    </small>

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

                </div>


                <div class="col-md-4">

                    <small class="text-muted d-block">
                        Email Address
                    </small>

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

                </div>


                <div class="col-md-4">

                    <small class="text-muted d-block">
                        Mobile Number
                    </small>

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

                </div>

            </div>

        </div>

    </section>

</div>

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