@props(['profile'])

<div class="border rounded row">
    <!-- Profile Image -->
    <div class="col-lg-2 col-md-2 col-sm-12 ">
        <div class="profile-photo image-container">
        <img src="{{ $profile['avatar'] ? config('app.api_assets_url') . '/avatar/' . $profile['avatar'] : 'http://crm10x.nsolbpo.com/crm/public/assets/images/profile/profile.png' }}" 
             class="img-fluid rounded-circle img-thumbnail" alt="Profile Image" 
             style="width: 100px; height: 100px; object-fit: cover;">
        </div>
    </div>
    
    
    <!-- Profile Details -->
    <div class="col-lg-7 col-md-8 col-sm-12 d-flex align-items-center">
        <div class="profile-name">
            <h4 class="text-primary mb-2 mt-1">
                {{ $profile['f_name'] }} {{ $profile['m_name'] }} {{ $profile['l_name'] }}
            </h4>
            <p class="mb-1">{{ $profile['title'] ?? '--' }}</p>
            <h5 class="mb-0">
                <span class="text-muted">Email:</span> {{ $profile['email'] }}
            </h5>
        </div>
    </div>
    
    <!-- 2FA Switch -->
    <div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-end">
        <div class="form-check form-switch ms-auto">
            <input class="form-check-input" type="checkbox" id="2faSwitch" @if($profile['is_two_factor'] === "enabled") checked @endif>
            <label class="form-check-label" for="2faSwitch">Two-Factor Authentication</label>
        </div>
    </div>
</div>