{% extends 'base2.html' %}
{% load static %}
{% block title %}Login{% endblock %}
{% block content %}
<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">
        <!-- Left side columns -->

          <div class="row">
            <!-- Sales Card -->
            <div class="col-4">
              <div class="card info-card sales-card">
                <div class="card-body">
                  <h5 class="card-title">All </h5>
                  <div class="d-flex align-items-center">
                    <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                    </div>
                  </div>
                </div>
              </div>
            </div><!-- End Sales Card -->
            <!-- Revenue Card -->
            <div class="col-4">
              <div class="card info-card revenue-card">
                <div class="card-body">
                  <h5 class="card-title">Approved</h5>
                  <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                  <div class="d-flex align-items-center">
                  </div>
                    <div class="ps-3">
                    </div>
                  </div>
                </div>
              </div>
            </div><!-- End Revenue Card -->
             <div class="col-4">
              <div class="card info-card revenue-card">
                <div class="card-body">
                  <h5 class="card-title">Rejected </h5>
                  <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                  <div class="d-flex align-items-center">
                  </div>
                    <div class="ps-3">
                    </div>
                  </div>
                </div>
              </div>
            </div><!-- End Revenue Card -->

                  <div class="d-flex align-items-center">

                    </div>
                    <div class="ps-3">



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

              </div>
            </div><!-- End Revenue Card -->

            <!-- Reports -->
            <div class="col-12">
              <div class="card">





                  <section class="section">
      <div class="row">
        <div class="col-lg-12">

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Datatables</h5>
              <p>Add lightweight datatables to your project with using the <a href="https://github.com/fiduswriter/Simple-DataTables" target="_blank">Simple DataTables</a> library. Just add <code>.datatable</code> class name to any table you wish to conver to a datatable</p>

              <!-- Table with stripped rows -->
              <table class="table datatable">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">first_name</th>
                    <th scope="col">last_name</th>
                    <th scope="col">email</th>
                    <th scope="col">Action</th>
                  </tr>
                </thead>
                <tbody>
                    {% for applicant in data %}

                  <tr>
                    <th scope="row">{{ forloop.counter }}</th>
                    <td>{{ applicant.first_name }}</td>
                    <td>{{ applicant.last_name }}</td>
                    <td>{{ applicant.email }}</td>
                    <td>
                       <a href="{% url  'membership:detailed_applicant' applicant.user_id %}" class="btn btn-primary view-btn" data-user-id="">Views</a>
                      <!-- Actions for the applicant (if any) --></td>
                  </tr>
                  {% endfor %}

                  </tbody>
                  </table>
              <!-- End Table with stripped rows -->
              <!-- Tab container -->
                </div>
              </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 %}