{% extends 'base_structure/layout/base_template.html' %}
{% load static %}
{% block stylesheet %}
    <!-- include required css cdn link through html here -->

{% endblock %}

{% block content %}

<div class="row layout-top-spacing">
    <div class="col-lg-12">
        <div class="row mb-2">
          <div class="col">
              <a onclick="history.back()" style="height: fit-content;width: fit-content;display: inline-block;">
              <h3 class="card-title m-2 d-flex align-items-center gap-2" style="width: fit-content;"><span class="fw-bold material-symbols-outlined">
                  arrow_back
                  </span><span>Profile</span></h3>
              </a>
          </div>
        </div>

        <div class="row layout-spacing">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 layout-spacing">
                <div class="user-profile">
                    <div class="widget-content widget-content-area">
                        <div class="d-flex justify-content-between">
                            <h3 class=""></h3>
                            <a href="{% url 'module_iam:profile_details_edit' %}" class="mt-2 edit-profile"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-3"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg></a>
                        </div>
                        <div class="mb-5">
                            <div class="row">
                                <div class="col-4 text-center">
                                  {% if not data_obj.profile_photo%}
                                    <img alt="avatar" src="{% static 'img/default_profile.jpg' %}" class="rounded-circle" style="height: 150px; width: 150px">
                                  {% else %}
                                    <img src="{{ data_obj.profile_photo.url }}" alt="avatar" class="rounded-circle" style="height: 150px; width: 150px">
                                  {%endif%}
                                </div>
                                <div class="col-8 d-flex align-items-center">
                                    <span class="material-symbols-outlined" style="font-size: 60px;">
                                        person
                                        </span>
                                    <h1 class="">{{data_obj.first_name}} {{data_obj.last_name}}</h1>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="card mb-4">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-sm-3">
                                              <p class="mb-0">Type</p>
                                            </div>
                                            <div class="col-sm-9">
                                              <p class="text-muted mb-0">{{data_obj.principal_type.name}}</p>
                                            </div>
                                        </div>
                                        <hr>
                                      <div class="row">
                                        <div class="col-sm-3">
                                          <p class="mb-0">Phone</p>
                                        </div>
                                        <div class="col-sm-9">
                                          <p class="text-muted mb-0">{{data_obj.phone_no}}</p>
                                        </div>
                                      </div>
                                      <hr>
                                      <div class="row">
                                        <div class="col-sm-3">
                                          <p class="mb-0">Gender</p>
                                        </div>
                                        <div class="col-sm-9">
                                          <p class="text-muted mb-0">{{data_obj.gender}}</p>
                                        </div>
                                      </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card mb-4">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-sm-3">
                                              <p class="mb-0">Email</p>
                                            </div>
                                            <div class="col-sm-9">
                                              <p class="text-muted mb-0">{{data_obj.email}}</p>
                                            </div>
                                          </div>
                                          <hr>
                                          <div class="row">
                                            <div class="col-sm-3">
                                              <p class="mb-0">Date Of Birth</p>
                                            </div>
                                            <div class="col-sm-9">
                                              <p class="text-muted mb-0">{{data_obj.date_of_birth}}</p>
                                            </div>
                                          </div>
                                          <hr>
                                    </div>
                                  </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

{% endblock content %}

{% block javascript %}

    <!-- include required css cdn link through html here -->

    
    <script>
       

    </script>
{% endblock %}