<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" type="text/css" href="app.css"> -->
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!--<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <img id="image"/>
    <script>
    var ticket = {"image1":{{i.section1}}}
    document.querySelectorAll('[id="image"]')[0].src = 'data:image/png;base64, '+ticket["image1"];
    </script> data:image/png;charset=utf-8;base64,{{i.section1}}-->

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <style>
      
        .h1{
          margin: 50px 50px 50px 250px;
          
        }

        /* .card{
          margin: 25px 250px;
        }
        .form{
            margin: 25px 75px 50px 250px;
            padding: 6px 0;
            
          } */

        .fa-plus{
          font-size: 30px;
        }
        body{
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        }
        .dropdown{
		margin: 10px;
	}

    </style>

    <title>Timetable</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      
        <div class="container">
          
          <a class="navbar-brand" href="{% url 'resources' %}">Sports Resources</a>
          <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 mr-auto">
                <!-- <li class="nav-item active">
                <a class="nav-link" href="#">Home </a>
                </li> -->
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'about' %}">About</a>
                </li>
        
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'bookingHistory' %}">Booking History</a>
                </li>
        
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'bookingRequests' %}">Booking Requests</a>
                </li>
        
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'blockedUsers' %}">Blocked Users</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="{% url 'timetable' %}">Timetable</a>
                  </li>
              </ul>
      
              <ul class="nav navbar-nav navbar-right">
              
                <!--<li class="nav-item"><a class="nav-link" href ="{% url 'logout' %}">Logout</a></li>-->
                <div class="bs-example">
                <div class="btn-group-vertical">
                    <div class="btn-group">
                        <button id="butn-1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Account</button>
                        <div class="dropdown-menu">
                            <a href="{% url 'updatePassword' %}" class="dropdown-item">Change Password</a>
                            <a href="{% url 'logout' %}" class="dropdown-item">Logout</a>
                        </div>
                    </div>
                <!-- <li class="nav-item"><a class="nav-link"href ="#">Login <i class="fa fa-user-plus" aria-hidden="true"></i></a></li> -->
              
               </ul>
    
            </div>
  
        </div> 
    
      </nav>
  
      <div class="container">
    <h1 class="mt-4 pt-4">Time table</h1>
    <!--<button class="fa fa-plus pull-right d-inline text-secondary" aria-hidden="true" style="margin-right: 250px; margin-top: 15px; outline: none; background-color: transparent; border: none;"></button>-->
    <center>
    <form class="form" method="GET" action="{%url 'timetable'%}">
      <select  class="dropdown px-2" name="branch" style="height: 35px; width: 120px;">
        <option disabled selected>Branch</option>
        <option>CSE</option>
        <option>IT</option>  
        <option>ECE</option>
        <option>EEE</option>
        <option>CIVIL</option>
        <option>MECHANICAL</option>
        <option>CHEMICAL</option>
      </select>
      <select  class="dropdown px-2" name="year" style="height: 35px; width: 120px;">
        <option disabled selected>Year</option>
        <option> 1 </option>
        <option> 2 </option>  
        <option> 3 </option>
        <option> 4 </option>
      </select>
      <select class="dropdown px-2" name="section" style="height: 35px; width: 120px">
        <option disabled selected>Section</option>
        <option> 1 </option>
        <option> 2 </option>  
        <option> 3 </option>
      </select>
      <button class="btn btn-outline-success mb-1" type='submit' style="height: 37px; width: 120px">Submit</button>
      </form>
    {% for i in data %}
    </center>
    <center><img src="data:image/png;charset=utf-8;base64,{{i.time_table}}"></center>

    {% endfor %}
    </div>

    <script
    src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>