<%-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-person-badge" aria-hidden="true"></i>
            </span>

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

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

                <p class="text-muted mb-0">
                    View and manage your personal information.
                </p>
            </div>

        </div>

        <div class="heading-actions">

            <a href="/candidate_admin"
               class="btn btn-outline-secondary btn-sm">

                <i class="bi bi-arrow-left me-1"></i>
                Back to Dashboard

            </a>

        </div>

    </div>


    <!-- Profile Section -->
    <div class="row g-3 mt-1">

        <!-- Profile Card -->
        <div class="col-12 col-lg-4">

            <div class="panel h-100">

                <div class="text-center p-3">

                <!-- Profile Initials -->
                <div class="mb-3">

                    <div class="profile-initials">
                        <%= (user.first_name ? user.first_name.charAt(0) : '') %><%= (user.last_name ? user.last_name.charAt(0) : '') %>
                    </div>

                </div>


                    <!-- Name -->
                    <h4 class="mb-1">

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

                    </h4>


                    <!-- Email -->
                    <p class="text-muted mb-3">

                        <%= user.email %>

                    </p>


                    <!-- Account Status -->
                    <span class="badge text-bg-success">

                        <i class="bi bi-check-circle me-1"></i>
                        Active Account

                    </span>

                </div>


                <hr class="my-0">


                <!-- Profile Summary -->
                <div class="p-3">

                    <div class="d-flex justify-content-between mb-3">

                        <span class="text-muted">
                            Account Type
                        </span>

                        <strong>
                            Candidate
                        </strong>

                    </div>




                    <div class="d-flex justify-content-between">

                        <span class="text-muted">
                            Member Since
                        </span>

                        <strong>
                            <%= user.created_at ? new Date(user.created_at).toLocaleDateString('en-IN') : '-' %>
                        </strong>

                    </div>

                </div>

            </div>

        </div>


        <!-- Personal Information -->
        <div class="col-12 col-lg-8">

            <div class="panel">

                <div class="panel-header">

                    <div>

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

                            <i class="bi bi-person-vcard"
                               aria-hidden="true"></i>

                            <span>
                                Personal Information
                            </span>

                        </h2>

                        <p class="text-muted mb-0">
                            Your registered account information.
                        </p>

                    </div>

                </div>


                <div class="p-3">

                    <div class="row g-4">


                        <!-- First Name -->
                        <div class="col-12 col-md-6">

                            <label class="form-label text-muted small">
                                First Name
                            </label>

                            <div class="fw-semibold">
                                <%= user.first_name || '-' %>
                            </div>

                        </div>


                        <!-- Last Name -->
                        <div class="col-12 col-md-6">

                            <label class="form-label text-muted small">
                                Last Name
                            </label>

                            <div class="fw-semibold">
                                <%= user.last_name || '-' %>
                            </div>

                        </div>


                        <!-- Email -->
                        <div class="col-12 col-md-6">

                            <label class="form-label text-muted small">
                                Email Address
                            </label>

                            <div class="fw-semibold">

                                <i class="bi bi-envelope me-1"></i>

                                <%= user.email || '-' %>

                            </div>

                        </div>


                        <!-- Mobile -->
                        <div class="col-12 col-md-6">

                            <label class="form-label text-muted small">
                                Mobile Number
                            </label>

                            <div class="fw-semibold">

                                <i class="bi bi-phone me-1"></i>

                                <%= user.mobile || '-' %>

                            </div>

                        </div>


                    </div>

                </div>

            </div>


            <!-- Security -->
            <div class="panel mt-3">

                <div class="panel-header">

                    <div>

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

                            <i class="bi bi-shield-lock"
                               aria-hidden="true"></i>

                            <span>
                                Account Security
                            </span>

                        </h2>

                        <p class="text-muted mb-0">
                            Manage your account security settings.
                        </p>

                    </div>

                </div>


                <div class="p-3">

                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">

                        <div>

                            <p class="fw-semibold mb-1">
                                Password
                            </p>

                            <p class="text-muted small mb-0">
                                Keep your account secure with a strong password.
                            </p>

                        </div>


                        <a href="/candidate_admin/change-password"
                           class="btn btn-outline-secondary btn-sm">

                            <i class="bi bi-key me-1"></i>

                            Change Password

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>


</div>

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