<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>User Profile Details</h2>
    <a href="/admin/users" class="btn btn-secondary">Back to Users</a>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">Photos</div>
            <div class="card-body text-center">
                {{#if profile.photo_1}}
                    <img src="{{profile.photo_1}}" class="img-fluid rounded mb-3 shadow-sm w-100" alt="Photo 1" style="max-height: 250px; object-fit: cover;">
                {{else if profile.profile_photo}}
                    <img src="{{profile.profile_photo}}" class="img-fluid rounded mb-3 shadow-sm w-100" alt="Profile Photo" style="max-height: 250px; object-fit: cover;">
                {{else}}
                    <div class="text-muted p-4 bg-light mb-3 rounded shadow-sm d-flex justify-content-center align-items-center" style="height: 200px;">
                        <div><i class="bi bi-person-circle fs-1"></i><br>No Primary Photo</div>
                    </div>
                {{/if}}
                
                {{#if profile.photo_2}}
                    <div class="mt-3 text-start fw-bold mb-1">Photo 2</div>
                    <img src="{{profile.photo_2}}" class="img-fluid rounded mb-3 shadow-sm w-100" alt="Photo 2" style="max-height: 250px; object-fit: cover;">
                {{/if}}
                
                {{#if profile.photo_3_family}}
                    <div class="mt-3 text-start fw-bold mb-1">Family Photo</div>
                    <img src="{{profile.photo_3_family}}" class="img-fluid rounded mb-3 shadow-sm w-100" alt="Family Photo" style="max-height: 250px; object-fit: cover;">
                {{/if}}
            </div>
        </div>
        
        <div class="card mb-4 border-info">
            <div class="card-header bg-info text-dark">Raw JSON Dump</div>
            <div class="card-body p-0">
                <pre class="bg-light p-3 m-0" style="max-height: 300px; overflow-y: auto; font-size: 0.8rem;"><code>{{json profile}}</code></pre>
            </div>
        </div>
    </div>
    
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header bg-dark text-white">Account Information</div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <tbody>
                        <tr><th width="30%" class="bg-light">User ID</th><td>{{viewUser.id}}</td></tr>
                        <tr><th class="bg-light">Mobile Number</th><td>{{viewUser.mobile}}</td></tr>
                        <tr><th class="bg-light">Account Status</th>
                            <td>
                                {{#if viewUser.is_blocked}}
                                    <span class="badge bg-danger">Blocked</span>
                                {{else}}
                                    <span class="badge bg-success">Active</span>
                                {{/if}}
                            </td>
                        </tr>
                        <tr><th class="bg-light">Registered On</th><td>{{formatDate viewUser.created_at}}</td></tr>
                        <tr><th class="bg-light">Profile Created For</th><td><span class="badge bg-primary text-white">{{profile.profile_for}}</span></td></tr>
                        <tr><th class="bg-light">Managed By</th><td><span class="badge bg-info text-dark">{{#if profile.managed_by}}{{profile.managed_by}}{{else}}{{#if (eq profile.profile_for 'Myself')}}Self{{else}}Parents{{/if}}{{/if}}</span></td></tr>
                        <tr><th class="bg-light">Candidate Aadhaar</th>
                            <td>
                                {{#if profile.aadhaar_verified}}
                                    <span class="badge bg-success">Verified ({{profile.aadhaar_number}})</span>
                                {{else}}
                                    <span class="badge bg-warning text-dark">Pending</span>
                                {{/if}}
                            </td>
                        </tr>
                        {{#if profile.creator_relation}}
                        <tr><th class="bg-light">Manager Aadhaar ({{profile.creator_relation}})</th>
                            <td>
                                {{#if profile.creator_aadhaar_verified}}
                                    <span class="badge bg-success">Verified ({{profile.creator_aadhaar_number}})</span>
                                    <small class="text-muted ms-1">({{profile.creator_name}})</small>
                                {{else}}
                                    <span class="badge bg-warning text-dark">Pending</span>
                                    {{#if profile.creator_name}}<small class="text-muted ms-1">({{profile.creator_name}})</small>{{/if}}
                                {{/if}}
                            </td>
                        </tr>
                        {{/if}}
                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="card mb-4">
            <div class="card-header bg-secondary text-white">Basic Profile Details</div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <tbody>
                        <tr><th width="30%" class="bg-light">Profile ID</th><td>{{profile.profile_id}}</td></tr>
                        <tr><th class="bg-light">Profile Created For</th><td><span class="badge bg-info text-dark">{{profile.profile_for}}</span></td></tr>
                        <tr><th class="bg-light">Full Name</th><td>{{profile.first_name}} {{profile.last_name}}</td></tr>
                        <tr><th class="bg-light">Gender</th><td>{{profile.gender}}</td></tr>
                        <tr><th class="bg-light">Date of Birth</th><td>{{formatDate profile.dob}}</td></tr>
                        <tr><th class="bg-light">Marital Status</th><td>{{profile.marital_status}}</td></tr>
                        <tr><th class="bg-light">Height / Weight</th><td>{{profile.height}} / {{profile.weight}}</td></tr>
                        <tr><th class="bg-light">Mother Tongue</th><td>{{profile.mother_tongue}}</td></tr>
                        <tr><th class="bg-light">About Me</th><td>{{profile.about_me}}</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="card mb-4">
            <div class="card-header bg-secondary text-white">Religious Information</div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <tbody>
                        <tr><th width="30%" class="bg-light">Religion</th><td>{{profile.religion}}</td></tr>
                        <tr><th class="bg-light">Caste / Sub-Caste</th><td>{{profile.caste}} {{#if profile.sub_caste}}/ {{profile.sub_caste}}{{/if}}</td></tr>
                        <tr><th class="bg-light">Gothram</th><td>{{profile.gothram}}</td></tr>
                        <tr><th class="bg-light">Manglik</th><td>{{profile.manglik}}</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="card mb-4">
            <div class="card-header bg-secondary text-white">Education & Career</div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <tbody>
                        <tr><th width="30%" class="bg-light">Education</th><td>{{profile.education}}</td></tr>
                        <tr><th class="bg-light">Occupation</th><td>{{profile.occupation}}</td></tr>
                        <tr><th class="bg-light">Employed In</th><td>{{profile.employed_in}}</td></tr>
                        <tr><th class="bg-light">Annual Income</th><td>{{profile.annual_income}}</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="card mb-4">
            <div class="card-header bg-secondary text-white">Lifestyle & Location</div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <tbody>
                        <tr><th width="30%" class="bg-light">Diet</th><td>{{profile.diet}}</td></tr>
                        <tr><th class="bg-light">Hobbies</th><td>{{profile.hobbies}}</td></tr>
                        <tr><th class="bg-light">Interests</th><td>{{profile.interests}}</td></tr>
                        <tr><th class="bg-light">City, State</th><td>{{profile.city}}, {{profile.state}}</td></tr>
                        <tr><th class="bg-light">Country</th><td>{{profile.country}}</td></tr>
                        <tr><th class="bg-light">Current Address</th><td>{{profile.current_address}}</td></tr>
                        <tr><th class="bg-light">Permanent Address</th><td>{{profile.permanent_address}}</td></tr>
                        <tr><th class="bg-light">Native Village / Place</th><td>{{profile.native_village_address}}</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="card mb-4">
            <div class="card-header bg-secondary text-white">Family Background</div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <tbody>
                        <tr><th width="30%" class="bg-light">Father's Name</th><td>{{profile.father_name}}</td></tr>
                        <tr><th class="bg-light">Mother's Name</th><td>{{profile.mother_name}}</td></tr>
                        <tr><th class="bg-light">Siblings</th><td>{{profile.siblings_name}}</td></tr>
                        <tr><th class="bg-light">Family Type</th><td>{{profile.family_type}}</td></tr>
                        <tr><th class="bg-light">Family Values</th><td>{{profile.family_values}}</td></tr>
                        <tr><th class="bg-light">Family Income</th><td>{{profile.family_income}}</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="card mb-4">
            <div class="card-header bg-secondary text-white">Extended Relatives Details</div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <tbody>
                        <tr><th width="30%" class="bg-light">Mama Name 1</th><td>{{profile.mama_name_1}}</td></tr>
                        <tr><th class="bg-light">Mama Name 2</th><td>{{profile.mama_name_2}}</td></tr>
                        <tr><th class="bg-light">Nana Name</th><td>{{profile.nana_name}}</td></tr>
                        <tr><th class="bg-light">Fupa Name</th><td>{{profile.fupa_name}}</td></tr>
                        <tr>
                            <th class="bg-light">Mandatory Relatives (4)</th>
                            <td>
                                {{#if relativeList.length}}
                                    <ol class="mb-0 ps-3">
                                        {{#each relativeList}}
                                            <li><strong>{{this}}</strong></li>
                                        {{/each}}
                                    </ol>
                                {{else}}
                                    {{profile.relatives}}
                                {{/if}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
