{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<style>
    img {
        vertical-align: middle;
        border-style: none;
        height: 60px;
    }
</style>
<title>Investment Edu | Customer Details</title>
<div class="container-fluid">
    <div class="inner-content">
        <!-- Page Heading -->
        <div class="top-bar mb-4">
            <div class="left-side-bar">
                <h2 class="f-22 mb-2 bold">User</h2>
            </div>
        </div>
        <div class="user-view-details mt-4">    
                <div class="row">
                    <div class="col-12 col-md-4 col-lg-3">
                        <div class="card space">
                            <div class="user-details-lft use-details spc text-center mx-5">
                                <img src="{% if cust_obj.avatar %}{{cust_obj.avatar}}{% else %}{% static '/admin/images/user-default.png' %}{% endif %}"
                                    class="view-user-img details">
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-8 col-lg-9">
                        <div class="card  user-card  space">
                            <div class="row user-data-rw spc">
                                <div class="col-12 col-md-4 mb-3">
                                    <div class="appointmnt-detls">
                                        <p class="f-15 bold mb-0">User Name</p>
                                        <p class="f-14 mb-0">{{cust_obj.username }}</p>
                                    </div>
                                </div>
                                <div class="col-12 col-md-4 mb-3">
                                    <div class="appointmnt-detls">
                                        <p class="f-15 bold mb-0">Phone Number</p>
                                        <p class="f-14 mb-0">{{ cust_obj.phone_number }}</p>
                                    </div>
                                </div>
                                <div class="col-12 col-md-4 mb-3">
                                    <div class="appointmnt-detls">
                                        <p class="f-15 bold mb-0">Email ID</p>
                                        <p class="f-14 mb-0">{{ cust_obj.email }}</p>
                                    </div>
                                </div>
                                <div class="col-12 col-md-4 mb-3">
                                    <div class="appointmnt-detls">
                                        <p class="f-15 bold mb-0">Job Function</p>
                                        <p class="f-14 mb-0">{{ cust_obj.job_function.title }}</p>
                                    </div>
                                </div>
                                <div class="col-12 col-md-4 mb-3">
                                    <div class="appointmnt-detls">
                                        <p class="f-15 bold mb-0">Job Level</p>
                                        <p class="f-14 mb-0">{{ cust_obj.job_level.title }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>   
    </div>
</div>

{% endblock %}