{% load static %}
<!DOCTYPE html>
<html>
   <head>
      
      <!-- site metas -->
      <title>Directory Management</title>
      
      <!-- bootstrap css -->
      <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
      <!-- style css -->
      <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
      <!-- Responsive-->
      <link rel="stylesheet" href="{% static 'css/responsive.css' %}">
      <!-- fevicon -->
      <link rel="icon" href="{% static 'images/fevicon.png' %}" type="image/gif" />
      <!-- font css -->
      <link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2:400,600,700|Poppins:400,600,700&display=swap" rel="stylesheet">
      <!-- Scrollbar Custom CSS -->
      <link rel="stylesheet" href="{% static 'css/jquery.mCustomScrollbar.min.css' %}">
      <!-- Tweaks for older IEs-->
      <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
   </head>
   <body>
      <div class="header_section">
         <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
               <h2 style="color: white;">Directory Management</h2>
               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
               </button>
               <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav ml-auto">
                     <li class="nav-item">
                        <a class="nav-link" href="{% url 'index' %}">Home</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="{% url 'login' %}">Admin</a>
                     </li>
                    
                  </ul>
                
               </div>
            </nav>
         </div>
      </div>
      <!-- header section end -->
      <!-- banner section start --> 
      <div class="banner_section layout_padding">
         <div class="container">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
              
               <div class="carousel-inner">
                  <div class="carousel-item active">
                     <div class="row">
                        <div class="col-md-6">
                           <div class="banner_img"><img src="{% static 'images/banner.jpg' %}"></div>
                        </div>
                        <div class="col-md-6">
                           <div class="banner_taital_main">
                              <h1 class="banner_taital">Search By Name / Contact Number</h1>
                              <form method="get">
                                {% csrf_token %}
                                
                                 <input type="text" id="query" name="query" class="form-control" required="">
                              <br>
                                 <button type="submit" class="btn btn-dark">Submit</button>
                              </form>
                           </div>
                        </div>
                     </div>
                  </div>
                 
                 
               </div>
            </div>
         </div>
      </div>
      <!-- banner section end -->
     
     
      <!-- blog section start -->
      <div class="blog_section layout_padding">
         <div class="container">
            <div class="row">
               <div class="col-md-12">
                  <h1 class="blog_taital">Person Details</h1>
               </div>
            </div>
            {% if messages %}
            {% for message in messages %}
             {% if message.tags == 'error' %}
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
            {{message}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
             </button>
              </div>
            {% endif %}
            {% endfor %}
            {% endif %}
               {% if messages %}
            {% for message in messages %}
             {% if message.tags == 'info' %}
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
            {{message}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
             </button>
              </div>
            {% endif %}
            {% endfor %}
            {% endif %}
            <div class="blog_section_2">
               <div class="row">
                {% for i in data_list %}
                  <div class="col-md-4" style="padding-bottom: 20px;">
                    
                    
                     <div class="blog_box">
                        
                        <h3 class="blog_text">{{ i.fullname }}</h3>
  <table class="table table-bordered">

    <tbody>
      <tr>
        <th>Mobile Number</th>
        <td>{{ i.mobilenumber }}</td>
      </tr>

        <tr>
        <th>Email</th>
        <td>{{ i.email }}</td>
      </tr>

            <tr>
        <th>Profession</th>
        <td>{{ i.profession }}</td>
      </tr>


            <tr>
        <th>Address</th>
        <td>{{ i.address }}</td>
      </tr>
                  <tr>
        <th>City</th>
        <td>{{ i.city }}</td>
      </tr>
</tbody>
</table>
                         </div>
                   
                  </div> <hr>{% endfor %}
                 
                 
               </div>
            </div>
         </div>
       
      </div>
      <!-- blog section end -->
      <div class="row">
             
        <div class="copyright_section">
            <div class="container">
                <span class="step-links">
                    {% if data_list.has_previous %}
                        <a href="?page=1">&laquo; first</a>
                        <a href="?page={{ data_list.previous_page_number }}">previous</a>
                    {% endif %}
            
                    <span class="current" style="padding-left: 10px;padding-bottom: 10px;">
                        Page {{ data_list.number }} of {{ data_list.paginator.num_pages }}.
                    </span>
            
                    {% if data_list.has_next %}
                        <a href="?page={{ data_list.next_page_number }}">next</a>
                        <a href="?page={{ data_list.paginator.num_pages }}">last &raquo;</a>
                    {% endif %}
                </span>
            </div>
         </div>
    </div>
     <br>
      <!-- contact section end -->
      <!-- footer section start -->
      <div class="footer_section layout_padding">
         <div class="container">
            <div class="row">
             
                <div class="copyright_section">
                    <div class="container">
                       <p class="copyright_text">Directory Management @ Python(Django Framework)</p>
                    </div>
                 </div>
            </div>
         </div>
      </div>
      <!-- footer section end -->
      <!-- copyright section start -->
     
      <!-- copyright section end -->
      <!-- Javascript files-->
      <script src="{% static 'js/jquery.min.js' %}"></script>
      <script src="{% static 'js/popper.min.js' %}"></script>
      <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
      <script src="{% static 'js/jquery-3.0.0.min.js' %}"></script>
      <script src="{% static 'js/plugin.js' %}"></script>
      <!-- sidebar -->
      <script src="{% static 'js/jquery.mCustomScrollbar.concat.min.js' %}"></script>
      <script src="{% static 'js/custom.js' %}"></script>
   </body>
</html>