<!DOCTYPE html>
<html lang="en">

<head>
  {% block title %}<title>Local Library</title>{% endblock %}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
  <style>
    p.count {
      color: #FFFFFF;
      background-color: #515151;
      border: 1px #303030;
      border-radius: 0.5rem;
      padding: .2rem .25rem;
      margin: 0.1rem 0.1rem .1rem;

    }

    table {
      width: 100%;
      table-layout: fixed;
    }

    th {
      text-align: center;
    }

    .title {
      width: 30%;
    }

    .author {
      width: 20%;
    }

    .rating {
      width: 5%;
    }

    .tags {
      width: 25%;
    }

    .added {
      width: 10%;
    }

    .published {
      width: 10%;
    }
  </style>
</head>

<body>



  <div class="navbar-fixed">
    <nav>
      <div class="nav-wrapper row green darken-1">

        <ul class="right">
          {% if user.is_authenticated %}
          <li class="active"><a href="{{user.get_absolute_url}}"> {{ user.get_username }}</a></li>
          <li><a href="{% url 'logout'%}?next={{request.path}}">Logout</a></li>
        </ul>
        {% load cache %}
        {% cache 500 sidebar request.user.username %}
        <!--Maybe i'm retarded but this is not caching versions per user-->
        <ul class="left">
          <li><a href="{% url 'books' %}">Books</a></li>
          <li><a class="dropdown-trigger" href={% url 'authors' %} data-target="dropdown-authors">Authors<i
                class="material-icons right">arrow_drop_down</i></a></li>
          <li><a class="dropdown-trigger" href={% url "ratings" %} data-target="dropdown-ratings">Ratings<i
                class="material-icons right">arrow_drop_down</i></a></li>
          <li><a class="dropdown-trigger" href={% url "tags" %} data-target="dropdown-tags">Tags<i
                class="material-icons right">arrow_drop_down</i></a></li>

          <li><a class="dropdown-trigger" href={% url "series" %} data-target="dropdown-series">Series<i
                class="material-icons right">arrow_drop_down</i></a></li>

          <li><a class="dropdown-trigger" href={% url "publishers" %} data-target="dropdown-pubishers">Publishers<i
                class="material-icons right">arrow_drop_down</i></a></li>

          <li><a href="{% url 'search' %}">Advanced search</a></li>
          <li>
            <!-- stefan, this div. can we have this int the navbar? -->
            <div class="container">
              <form action="{% url 'results' %}" method="get" style="padding-top:2em">
                <label for="generic"></label>
                <input id="generic" type="text" name="generic" value="">
                <button class="waves-effect waves-light btn green accent-4" type="submit">search</button>
              </form>
            </div>
            <!-- this is the end of the div, stefan -->
          </li>
        </ul>
        <ul id="dropdown-authors" class="dropdown-content">
          {% for author in unique_authors %}
          <li><a href="{{author.get_absolute_url}}">{{author}}</a></li>
          {% endfor %}
        </ul>
        <ul id="dropdown-ratings" class="dropdown-content">
          {% for rating in unique_ratings %}
          <li><a href="{{rating.get_absolute_url}}">{{rating}}</a></li>
          {% endfor %}
        </ul>
        <ul id="dropdown-tags" class="dropdown-content">
          {% for tag in unique_tags %}
          <li><a href="{{tag.get_absolute_url}}">{{tag}} ({{tag.num_books}})</a></li>
          {% endfor %}
        </ul>

        <ul id="dropdown-series" class="dropdown-content">
          {% for tag in unique_series %}
          <li><a href="{{tag.get_absolute_url}}">{{tag}} ({{tag.num_books}})</a></li>
          {% endfor %}
        </ul>
        <ul id="dropdown-pubishers" class="dropdown-content">
          {% for pub in unique_publishers %}
          <!-- stefan here's my shit count  -->
          <li><a href="{{pub.get_absolute_url}}">{{pub}} <p class="count">{{pub.num_books}}</p> </a> </li>
          {% endfor %}
        </ul>
        {% endcache %}
        {% else %}
        <li><a href="{% url 'sign-up'%}?next={{request.path}}">Sign up</a></li>
        <li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li>
        </ul>
        {% endif %}
      </div>

    </nav>
  </div>
  <script>
    $(".dropdown-trigger").dropdown({
      hover: true,
      constrainWidth: false,
      coverTrigger: false
    });
  </script>

  {% if user.is_authenticated %}
  {% block content %} {% endblock %}
  {% else %}
  <div class="valign-wrapper" style="width:100%;height:100%;position: absolute;">
    <div class="valign" style="width:100%;">
      <div class="container">
        <div class="row">
          <div class="col s12 m6 offset-m3">
            <div class="card">
              <div class="card-content center">
                <p>You don't have permission to view this.</p>
              </div>
              <div class="card-action center">
                <a class="waves-effect waves-light btn-large green accent-4"
                  href="{% url 'login'%}?next={{request.path}}">Login</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% endif %}

  <script>
    function sortTable(n) {
      var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
      table = document.getElementById("books");
      switching = true;
      // Set the sorting direction to ascending:
      dir = "asc";
      /* Make a loop that will continue until
      no switching has been done: */
      while (switching) {
        // Start by saying: no switching is done:
        switching = false;
        rows = table.rows;
        /* Loop through all table rows (except the
        first, which contains table headers): */
        for (i = 1; i < (rows.length - 1); i++) {
          // Start by saying there should be no switching:
          shouldSwitch = false;
          /* Get the two elements you want to compare,
          one from current row and one from the next: */
          x = rows[i].getElementsByTagName("TD")[n];
          y = rows[i + 1].getElementsByTagName("TD")[n];
          /* Check if the two rows should switch place,
          based on the direction, asc or desc: */
          if (dir == "asc") {
            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
              // If so, mark as a switch and break the loop:
              shouldSwitch = true;
              break;
            }
          } else if (dir == "desc") {
            if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
              // If so, mark as a switch and break the loop:
              shouldSwitch = true;
              break;
            }
          }
        }
        if (shouldSwitch) {
          /* If a switch has been marked, make the switch
          and mark that a switch has been done: */
          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
          switching = true;
          // Each time a switch is done, increase this count by 1:
          switchcount++;
        } else {
          /* If no switching has been done AND the direction is "asc",
          set the direction to "desc" and run the while loop again. */
          if (switchcount == 0 && dir == "asc") {
            dir = "desc";
            switching = true;
          }
        }
      }
    }
  </script>

</body>

</html>