{% extends 'base2.html' %}
{% load static %}
{% block title %}Login{% endblock %}
{% block content %}
<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="col-lg-8">
          <div class="row">

            <!-- Sales Card -->
            <div class="col-xxl-4 col-md-6">
              <div class="card info-card sales-card">



                <div class="card-body">
                  <h5 class="card-title">Application </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-xxl-4 col-md-6">
              <div class="card info-card revenue-card">



                <div class="card-body">
                  <h5 class="card-title">Member Type </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-xxl-4 col-md-6">
              <div class="card info-card revenue-card">



                <div class="card-body">
                  <h5 class="card-title">Membership Status </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-xxl-4 col-md-6">
              <div class="card info-card revenue-card">



                <div class="card-body">
                  <h5 class="card-title">My invoices </h5>

                  <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">



                <div class="card-body">
                  <h5 class="card-title">My Application </h5>
                   <a class="button" href="{% url 'membership:regtype' %}">Continue Application</a>
                   <style>
                       .button {
                            display: inline-block;
                            position: absolute;
                            top: 10px;
                            right: 10px;
                            padding: 10px 20px;
                            background-color: #4CAF50;
                            color: white;
                            text-decoration: none;
                            border-radius: 4px;
                            transition: background-color 0.3s ease;
                          }

                  .button:hover {
                    background-color: #45a049;
                            th {
                              padding: 10px; /* Adjust the value as needed */
                            }
                            tr {
                              margin-bottom: 10px;
                   </style>
                  <div>
                   <table>
                    <thead>
                      <tr>
                        <th>No</th>
                        <th>Type</th>
                        <th>Membership No</th>
                        <th>Status</th>
                        <th>Action</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td></td>
                        <td></td>
                        <td> </td>
                        <td> </td>
                        <td></td>
                      </tr>

                      <!-- Add more rows as needed -->
                    </tbody>
                  </table>
                    </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 %}