{% block 'nav'  %}
{% include 'base/test_nav_emp.html' %}
{% endblock   %}
{% block 'bodycontent'  %}


<body>
  {% if obj_help %}
  <div class="accordion accordian-pad" id="accordionExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <b>{{obj_help.heading}}</b>
        </button>
      </h2>
      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          {{obj_help.content_HTML|safe}}
        </div>
      </div>
    </div>
   
  </div>
  {% endif %}
    <div class="form_align mb-4"> 
        <div class=" pad border line " >
    <div>
       <div class="heading " >
          <h3><b>Employee Details</b></h3>
       </div>
       <div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
        <nav>
       <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
        <button class="nav-link active " id="nav-person-tab" data-bs-toggle="tab" data-bs-target="#nav-person" type="button" role="tab" aria-controls="nav-person" aria-selected="false"><i class="fa-solid fa-person"></i> Personal</button>
        <button class="nav-link  " id="nav-zone-tab" data-bs-toggle="tab" data-bs-target="#nav-zone" type="button" role="tab" aria-controls="nav-zone" aria-selected="false"><i class="fa-solid fa-city"></i> Zone</button>
        <button class="nav-link" id="nav-location-tab" data-bs-toggle="tab" data-bs-target="#nav-location" type="button" role="tab" aria-controls="nav-location" aria-selected="false"><i class="fa-solid fa-location-dot"></i> Location</button>
        <button class="nav-link" id="nav-con-tab" data-bs-toggle="tab" data-bs-target="#nav-con" type="button" role="tab" aria-controls="nav-con" aria-selected="false"><i class="fa-solid fa-phone"></i> Contact</button>
        <button class="nav-link" id="nav-photo-tab" data-bs-toggle="tab" data-bs-target="#nav-photo" type="button" role="tab" aria-controls="nav-photo" aria-selected="false"><i class="fa-solid fa-camera-retro"></i> Photo</button>
       </nav>


        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-person" role="tabpanel" aria-labelledby="nav-person-tab">
             
                {% if obj_employee.Title %}
                <label for="#"><h6><b> Title :</b></h6> </label>
                 {{obj_employee.Title}}<br>
                 {% endif %}
                
                 {% if obj_employee.employee_name %}
                <label for="#"><h6><b>Employee Name  : </b></h6> </label>
                 {{obj_employee.employee_name}}<br>
                 {% endif %}

                 {% if obj_employee.last_name %}
                <label for="#"><h6><b>Last Name/Initial : </b></h6> </label>
                 {{obj_employee.last_name}}<br>
                 {% endif %}    

                 {% comment %} {% if obj_employee.first_name %}
                <label for="#"><h6><b>First Name  :  </b></h6></label>
                 {{obj_employee.first_name}}<br>
                {% endif %}


                {% if obj_employee.middle_name %}
                <label for="#"><h6><b>Middle Name  :  </b></h6></label>
                 {{obj_employee.middle_name}}<br>
                {% endif %}

                {% if obj_employee.last_name %}
                <label for="#"><h6><b> Last Name  :</b></h6> </label>
                 {{obj_employee.last_name}}<br>
                {% endif %} {% endcomment %}

                {% if obj_employee.gender %}
                <label for="#"><h6><b>Gender : </b></h6> </label>
                 {{obj_employee.gender}}<br>
                 {% endif %}

                 {% if obj_employee.DoB %}
                <label for="#"><h6><b>DOB : </b></h6></label>
                 {{obj_employee.DoB}}<br>
                 {% endif %}

                 
                 {% if obj_employee.education_qualification %}
                 <label for="#"><h6><b>Education Qualification : </b></h6></label>
                  {{obj_employee.education_qualification}}<br>
                  {% endif %}
            </div>

            <div class="tab-pane fade" id="nav-zone" role="tabpanel" aria-labelledby="nav-zone-tab">

              {% if obj_employee.fk_zone %}
              <label for="#"><h6><b>Zone : </b></h6></label>
                {{obj_employee.fk_zone}}<br>
                {% endif %}

                <label for="#"><h6><b>Employee Id : </b></h6></label>
                {{obj_employee.id}}<br>

                <label for="#"><h6><b>Employee Role : </b></h6></label>
                {{obj_employee.fk_group}}<br>

                
                
            </div>
            <div class="tab-pane fade" id="nav-location" role="tabpanel" aria-labelledby="nav-location-tab">
              {% if obj_employee.Address1 %}
              <label for="#"><h6><b>Address  : </b></h6> </label>
                {{obj_employee.Address1}}<br>
                {% endif %}
              
              {% if obj_employee.locality %}
              <label for="#"><h6><b>Locality  : </b></h6> </label>
                {{obj_employee.locality}}<br>
              {% endif %}

              {% if obj_employee.city %}
              <label for="#"><h6><b>City :</b></h6> </label>
                {{obj_employee.city}}<br>
                {% endif %}
              
                {% if obj_employee.Pincode %}
              <label for="#"><h6><b> Pincode  :</b></h6> </label>
                {{obj_employee.Pincode}}<br>
                {% endif %}
              
                {% if obj_employee.District %}
              <label for="#"><h6><b>District  :  </b></h6></label>
                {{obj_employee.District}}<br>
                {% endif %}
              

                {% if obj_employee.State %}
              <label for="#"><h6><b>State  : </b></h6> </label>
                {{obj_employee.State}}<br>
                {% endif %}
              

            </div>

            <div class="tab-pane fade" id="nav-con" role="tabpanel" aria-labelledby="nav-con-tab">

            {% if obj_employee.email %}
            <label for="#"><h6><b>Email  : </b></h6> </label>
              {{obj_employee.email}}<br>
              {% endif %}

              {% if obj_employee.phone_number %}
            <label for="#"><h6><b>Phone Number  : </b></h6> </label>
              {{obj_employee.phone_number}}<br>
              {% endif %}

            {% if obj_employee.alt_phone_number %}
            <label for="#"><h6><b>Alt Phone Number  : </b></h6> </label>
              {{obj_employee.alt_phone_number}}<br>
            {% endif %}



            </div>
            <div class="tab-pane fade" id="nav-photo" role="tabpanel" aria-labelledby="nav-photo-tab">
                
            {% if obj_employee.profile_pic %}
            <br><img src="/{{obj_employee.profile_pic}}" style=" hieght:400px width:400px" alt="Photo Missing" class="image">
            <p> Update Photo</p>
            {% else %}
            <p>Take a New Photo</p>
            {% endif %}
            <br>
            <p>Please Enable Camera Access to take photo.</p>
            {% include 'test/photo.html' %}
            </div>  

        </div>

   </div>
   
</div>





<style>
    .form_align{

        margin-top:3rem;
        width:auto;
        padding-left:1rem;
        padding-right:1rem;
      }
      .heading{
        display:flex;
        justify-content:center;
    
        
      }
      .line {
        line-height: 200%;
      }
      .accordian-pad{
        margin-top:13rem;
        padding-right:1rem;
        padding-left:1rem;
      }
    
      .border{
        border:2px solid;
        
      }
      .pad{
        padding:1rem;
      }
      
  
  </style>

</body>



{% endblock %}