{% extends "base.html" %}
{% load i18n %}

{% block page-title %}{% trans "Overview" %}{% endblock %}

{% block sub-navigation %}
  <ul>
    <li><a id="xxx-pointer" href="javascript:JS_toggleSection('xxx');" class="toggled-section ">{% trans "Toggle search options" %}</a></li>
  </ul>
{% endblock %}

{% block actions %}
  <div id="xxx" style="display:{% if not form.errors %}none;{% endif %}">
    <div id="search">
      <form method="get" style="margin-top: 3px;">
        <aside style="width: 0;">
        <table>
          <tr>
            <th><label for="id_date">{{ form.from_date.label }}:</label></th>
            <td>{{ form.from_date }}</td>
          </tr>
          <tr>
            <th><label for="id_date">{{ form.to_date.label }}:</label></th>
            <td>{{ form.to_date }}</td>
          </tr>
          <tr>
            <th></th>
            <td style="font-size:89%;"><a href="">{% trans "last" %}</a>, <a href="">{% trans "current" %}</a> {% trans "Month" %}</td>
          </tr>
        </table>
        </aside>
        <aside style="width: 0;">
        <table>
          <tr>
            <th><label for="id_customer">{{ form.customer.label }}:</label></th>
            <td>{{ form.customer }}</td>
          </tr>
          <tr>
            <th><label for="id_project">{{ form.project.label }}:</label></th>
            <td>{{ form.project }}</td>
          </tr>
          <tr>
            <th><label for="id_step">{{ form.step.label }}:</label></th>
            <td>{{ form.step }}</td>
          </tr>
        </table>
        </aside>
        <aside style="width: 0;">
          <table>
            <tr>
              <th><label for="id_tracker">{{ form.tracker.label }}:</label></th>
              <td>{{ form.tracker }}</td>
            </tr>
            <tr>
              <th><label for="id_issue_no">{{ form.issue_no.label }}:</label></th>
              <td>{{ form.issue_no }}</td>
            </tr>
          </table>
        </aside>
        <table width="100%" style="margin-top: 10px;">
          <tr>
            <td style="text-align: center;"><input name="search" type="submit" value="{% trans "Search" %}"></td>
          </tr>
        </table>
      </form>
    </div>
  </div>
{% endblock %}

{% block content %}

<h3>
  <a id="bookings-pointer" href="javascript:JS_toggleSection('bookings');" class="toggled-section">
    {% trans "Search results" %}
  </a>
  </h3>
  <div id="bookings" class="default-list">
    <div class="pagination">
      <div style="float: left">
      </div>
      <div style="float: right;">
        <select name="format">
          <option value="0">{% trans "Please select" %}</option>
          <option value="1">{% trans "Comma seperated list (CSV)" %}</option>
          <option value="2">{% trans "Portable document format (PDF)" %}</option>
        </select>
        <input type="submit" value="{% trans "Export" %}" name="export">
      </div>
    </div>
    <table id="booking-list" class="default-table">
      <thead>
        {% include "overview_booking_heading.html" %}
      </thead>
      <tbody>
        {% for booking in bookings %}
          {% include "overview_booking_row.html" %}
        {% empty %}
          <tr><td colspan="11">{% trans "No entries found" %}</td></tr>
        {% endfor %}
        {% if bookings %}
          <tr>
            <td colspan="5"><strong>{% trans "Sum" %}:</strong></td>
            <td style="text-align: center;"><strong>{{ sum|format_minutes_to_time }}</strong></td>
            <td></td>
          </tr>
        {% endif %}
      </tbody>
    </table>
    <div class="pagination">

    </div>
  </div>
{% endblock %}