{% load static %}
<!DOCTYPE html>
<html lang="en">

  <head>

    
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    <title>Notes Sharing System|| Home Page</title>

    <!-- Bootstrap core CSS -->
    <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">


    <!-- Additional CSS Files -->
    <link rel="stylesheet" href="{% static 'css/fontawesome.css' %}">
    <link rel="stylesheet" href="{% static 'css/templatemo-scholar.css' %}">
    <link rel="stylesheet" href="{% static 'css/owl.css' %}">
    <link rel="stylesheet" href="{% static 'css/animate.css' %}">
    <link rel="stylesheet"href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<!--

TemplateMo 586 Scholar

https://templatemo.com/tm-586-scholar

-->
  </head>

<body>



  <!-- ***** Header Area Start ***** -->
  <header class="header-area header-sticky">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <nav class="main-nav">
                    <!-- ***** Logo Start ***** -->
                  
                        <h1 style="color: white;">Notes Sharing System</h1>
                  
                  
                    <ul class="nav">
                      <li class="scroll-to-section"><a href="{% url 'index' %}" class="active">Home</a></li>
                      <li class="scroll-to-section"><a href="#services">Notes</a></li>
                     
                      <li class="scroll-to-section"><a href="{% url 'usersignup' %}">Register Now!</a></li>
                      <li class="scroll-to-section"><a href="{% url 'login' %}">Login</a></li>
                  </ul>   
                    <a class='menu-trigger'>
                        <span>Menu</span>
                    </a>
                    <!-- ***** Menu End ***** -->
                </nav>
            </div>
        </div>
    </div>
  </header>
  <!-- ***** Header Area End ***** -->

  <div class="main-banner" id="top">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="owl-carousel owl-banner">
           
          
          
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="services section" id="services">
    <div class="container">
      <div class="row">
        {% for i in data_list %}
        <div class="col-lg-4 col-md-6">
          <div class="service-item">
            <div class="icon">
              <img src="{% static 'images/service-01.png' %}" alt="online degrees">
            </div>
            <div class="main-content">
              <h4>{{i.subject}}</h4>
              <p>{{i.notestitle}} by {{ i.nsuser.admin.first_name}} {{ i.nsuser.admin.last_name}}.</p>
              <p>{{i.notesdesc}}</p>
              <div class="main-button">
                <p><table class="table table-bordered" border="1"><tr>
                    <th width="200"><strong>File 1</strong></th>
                    <td colspan="3" style="text-align: center;"><a href="{{ i.file1.url }}" width="100" height="100" target="_blank" class="btn btn-primary btn-sm">Download</a></td>
                    
                    </tr>
                    {% if i.file2 %}
                      <tr>
                    <th width="200"><strong>File 2</strong></th>
                    <td colspan="3" style="text-align: center;"><a href="{{ i.file2.url }}" width="100" height="100" target="_blank" class="btn btn-primary">Download</a></td>
                    
                    </tr> {% else %}
                    <tr>
                    <th width="200"><strong>File 2</strong></th>
                   
                    <td colspan="3" style="text-align: center;"><span style="color: red">File is not available</span></td>
                    </tr> {% endif %}
                    

                    {% if i.file3 %}
                      <tr>
                    <th width="200"><strong>File 3</strong></th>
                    <td colspan="3" style="text-align: center;"><a href="{{ i.file3.url }}" width="100" height="100" target="_blank" class="btn btn-primary">Download</a></td>
                    
                    </tr> {% else %}
                    <tr>
                    <th width="200"><strong>File 3</strong></th>
                   
                    <td colspan="3" style="text-align: center;"><span style="color: red">File is not available</span></td>
                    </tr> {% endif %}
                    
                    {% if i.file4 %}
                    <tr>
                  <th width="200"><strong>File 3</strong></th>
                  <td colspan="3" style="text-align: center;"><a href="{{ i.file4.url }}" width="100" height="100" target="_blank" class="btn btn-primary">Download</a></td>
                  
                  </tr> {% else %}
                  <tr>
                  <th width="200"><strong>File 4</strong></th>
                 
                  <td colspan="3" style="text-align: center;"><span style="color: red">File is not available</span></td>
                  </tr> {% endif %}</p></table>
              </div>
             
            </div>
          </div>
        </div>{% endfor %}
     
      
      </div>
    </div>
  </div>

  <div class="pagination">
    <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>

  <footer>
    <div class="container">
      <div class="col-lg-12">
        <p>Notes Sharing System @ Python(Django)</p>
      </div>
    </div>
  </footer>

  <!-- Scripts -->
  <!-- Bootstrap core JavaScript -->
  <script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
  <script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
  <script src="{% static 'js/isotope.min.js' %}"></script>
  <script src="{% static 'js/owl-carousel.js' %}"></script>
  <script src="{% static 'js/counter.js' %}"></script>
  <script src="{% static 'js/custom.js' %}"></script>

  </body>
</html>