{% extends "base.html" %}
{% load bootstrap4 %}
{% load static %}
{% load main_tags %}

{% block extra-head %}
<link href="{% static 'css/bootstrap-datetimepicker.min.css' %}" media="screen" rel="stylesheet">
{% endblock %}
{% block content-title %}{{title}}{% endblock %}
{% block content-suptitle %}{{suptitle}}{% endblock %}

{% block content %}

{% block content-filter %}
{% if form %}
<form class="form" method="get">
  {% bootstrap_form form layout='horizontal' size='medium' %}
  <div class="pull-right">
    <br>
  <button type="button" class="btn btn-primary btn-sm" onclick="window.location.replace('?');"><span class="fas fa-sync-alt" aria-hidden="true"></span></button>
  <button type="submit" class="btn btn-primary btn-sm"><span class="fas fa-search" aria-hidden="true"></span></button>
  {% if add_url %}
  <a class="btn btn-sm btn-info" href="{{add_url}}"><span class="fas fa-plus" aria-hidden="true"></span></a>
  {% endif %}
</div>
</form>
{% endif %}
{% endblock %}
<div style="clear: both;"></div>
<br>
<table class="table table-hover">
  <tr>
    <th>#</th>
    {% for key in keys %}
    {% if key == 'location'%}
    <th>System</th>
    {% else %}
    <th>{{ key|title }}</th>
    {% endif %}
    {% endfor%}
  </tr>
  {% for object in objects %}
    <tr class="clickable-row" data-href="{{object.get_absolute_url}}">
      <td>{{ forloop.counter|add:offset }}</td>
      {% for key in keys %}
      {% if key == 'actions' %}
      <td>
        <a class="btn btn-sm btn-danger" href="{{object.get_absolute_url_delete}}"><span class="fas fa-times" aria-hidden="true"></span></a>
        <a class="btn btn-sm btn-primary" href="{{object.get_absolute_url_edit}}"><span class="fa fa-pencil" aria-hidden="true"></span></a>
      </td>
      {% else %}
      <td>{{ object|attr:key }}</td>
      {% endif %}
      {% endfor %}
    </tr>
  {% endfor %}
</table>

<div class="pagination">
  <span class="step-links">
    {% if objects.has_previous %}
    <a href="?page={{ objects.previous_page_number }}&{{q}}"><span class="fas fa-chevron-left" aria-hidden="true"></span></a>
    {% endif %}
  <span class="current">
    Page {{ objects.number }} of {{ objects.paginator.num_pages }}.
  </span>
  {% if objects.has_next %}
  <a href="?page={{ objects.next_page_number }}&{{q}}"><span class="fas fa-chevron-right" aria-hidden="true"></span></a>
  {% endif %}
  </span>
</div>

{% endblock %}

{% block extra-js%}
<script src="{% static 'js/bootstrap-datetimepicker.min.js' %}"></script>
<script type="text/javascript">

  $('.input-group.date').datetimepicker({
    format: "YYYY-MM-DD",
    icons: {
      time: 'far fa-clock',
      date: 'far fa-calendar-alt',
      up: 'fas fa-arrow-up',
      down: 'fas fa-arrow-down',
      previous: 'fas fa-chevron-left',
      next: 'fas fa-chevron-right',
      today: 'far fa-calendar-check',
      clear: 'far fa-trash-alt',
      close: 'fas fa-times'
    }
  });

  $(".clickable-row").click(function() {
    document.location = $(this).data("href");
  });

</script>
{% endblock %}