{% extends 'base2.html' %}
{% load static %}
{% block title %}Login{% endblock %}
{% block content %}
 <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
    /* Style the tab buttons */
    .tab {
        overflow: hidden;
    }

    .tab button {
        background-color: #f1f1f1;
        float: left;
        border: 1px solid #ccc;
        outline: none;
        cursor: pointer;
        padding: 8px 16px;
        transition: 0.3s;
    }

    .tab button:hover {
        background-color: #ddd;
    }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 20px;
        border: 1px solid #ccc;
    }
</style>
<main id="main" class="main">


    <div class="pagetitle">
      <h1>Dashboard</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="index.html">Home</a></li>
          <li class="breadcrumb-item active">Dashboard</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->

    <section class="section dashboard">
      <div class="row">
        <div class="tab">

          <!-- Add tabs for each model -->
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#Registration_type">Registration type</a></li>
                <li><a data-toggle="tab" href="#Member_type">Member type</a></li>
                <li><a data-toggle="tab" href="#Applicant_details">Applicant details</a></li>
                <li><a data-toggle="tab" href="#Academic_qualification">Academic qualification</a></li>
                <li><a data-toggle="tab" href="#Specialized_area">Specialized area</a></li>
                <li><a data-toggle="tab" href="#Information_on_present_position">Information on present position</a></li>
                <li><a data-toggle="tab" href="#Length_of_tenure">Length of tenure</a></li>
                <li><a data-toggle="tab" href="#Code_of_conduct">Code of conduct</a></li>
              </ul>

              <div class="tab-content">
                <div id="Registration_type" class="tab-pane fade in active">

                    <h3>Reg type</h3>
                  <p>reg type: {{ data.reg_type.reg_type }}</p>

                </div>
                <div id="Member_type" class="tab-pane fade">
                  <h3>Member type</h3>
                  <p>member type: {{ data.member_type.member_type }}</p>
                  <p>years trained: {{ data.member_type.years_trained }}</p>
                </div>
                <div id="Applicant_details" class="tab-pane fade">
                  <h3>Applicant details</h3>
                  <p>Tittle: {{ data.applicant_detail.tittle }}</p>
                  <p>First name: {{ data.applicant_detail.first_name }}</p>
                  <p>Last name: {{ data.applicant_detail.last_name }}</p>
                  <p>Identification card: {{ data.applicant_detail.identification_card }}</p>
                  <p>Mobile: {{ data.applicant_detail.mobile }}</p>
                  <p>Email: {{ data.applicant_detail.email }}</p>
                  <p>Profession: {{ data.applicant_detail.profession }}</p>
                  <p>Organization name: {{ data.applicant_detail.organization_name }}</p>
                  <p>Organization address: {{ data.applicant_detail.organization_address }}</p>
                  <p>Organization telephone: {{ data.applicant_detail.organization_telephone }}</p>
                  <p>Business email: {{ data.applicant_detail.business_email }}</p>
                  <p>Nature of organization: {{ data.applicant_detail.nature_of_organization }}</p>
                </div>
                <div id="Academic_qualification" class="tab-pane fade">
                  <h3>Academic qualification</h3>
                  <p>Name of institution: {{ data.academic_qualification.name_of_institution }}</p>
                  <p>Date from: {{ data.academic_qualification.date_from }}</p>
                  <p>Date to: {{ data.academic_qualification.date_to }}</p>
                  <p>Course duration in years: {{ data.academic_qualification.course_duration_years }}</p>
                  <p>Certificate awarded: {{ data.academic_qualification.certificate_awarded }}</p>
                  <p>Certificate file: {{ data.academic_qualification.certificate_file }}</p>
                </div>
                <div id="Specialized_area" class="tab-pane fade">
                    <h3>Specialized area</h3>
                    <p>Trainer: {{ data.specialized_area.Trainer }}</p>
                    <p>Auditor: {{ data.specialized_area.Auditor }}</p>
                    <p>Assesor: {{ data.specialized_area.Assesor }}</p>
                    <p>Implementor: {{ data.specialized_area.Implementor }}</p>
                    <p>Management representative: {{ data.specialized_area.Management_representative }}</p>
                    <p>Process owner: {{ data.specialized_area.Process_owner }}</p>
                    <p>Member of quality improvement team: {{ data.specialized_area.Member_of_quality_improvement_team }}</p>
                    <p>Quality assurance manager: {{ data.specialized_area.Quality_assurance_manager }}</p>
              </div>
              <div id="Information_on_present_position" class="tab-pane fade">
                  <h3>Information on present position</h3>
                  <p>Description on current quality: {{ data.information_on_present_position.description_on_current_quality }}</p>
                  <p>Any other specify: {{ data.information_on_present_position.any_other_specify }}</p>
                  <p>Years: {{ data.information_on_present_position.years }}</p>
                  <p>Months: {{ data.information_on_present_position.months }}</p>
              </div>
              <div id="Length_of_tenure" class="tab-pane fade">
                  <h3>Length of tenure</h3>
                  <p>Name of organization: {{ data.length_of_tenure.Name_of_organization }}</p>
                  <p>Date from: {{ data.length_of_tenure.date_from }}</p>
                  <p>Date to: {{ data.length_of_tenure.date_to }}</p>
              </div>
              <div id="Code_of_conduct" class="tab-pane fade">
                  <h3>Code of conduct</h3>
                  <p>I agree: {{ data.code_of_conduct.I_agree }}</p>
              </div>

        </div>
     </div>              <!-- Tab content -->






          </div>
              </div>
             </div>

             </div>
               </div>
         </section>







                  </div>
                  <!-- Line Chart -->
                  <div id="reportsChart"></div>

                  <!-- End Line Chart -->

                </div>

              </div>
            </div><!-- End Reports -->

            <!-- Recent Sales -->

            <!-- Top Selling -->


          </div>
        </div><!-- End Left side columns -->


    </section>

  </main><!-- End #main -->

{% endblock %}