{% extends "epic/base_layout.html" %}
{% load crispy_forms_tags %}
{% load humanize %}

{% block buttons %}
  <a class="btn btn-default" href="{% url 'epic:epic_index' %}">
    Up <i class="glyphicon glyphicon-chevron-up"></i>
  </a>

  <a class="btn btn-primary" href="{% url 'epic:order_add' %}">
    Add New Order <i class="glyphicon glyphicon-plus"></i></a>
{% endblock buttons %}

{% block content %}
{{ block.super }}

<div class="panel panel-default">
  <div class="panel-heading">
    <form class="form-horizontal" role="form" method="GET" id="filter_by">
      <div class="form-group">
	<div class="col-md-6">
	  <select class="form-control" name="st"
		  onchange="javascript:$('#filter_by').submit();">
	    <option value='all' {% if st == "all" %}selected{% endif %}>
	      View All Orders</option>
	    <option value='open' {% if st == "open" %}selected{% endif %}>
	      View Open Orders</option>
	    <option value='closed' {% if st == "closed" %}selected{% endif %}>
	      View Closed Orders</option>
	  </select>
	</div>
      </div>
    </form>
  </div>

  <div class="panel-body">
    <table class="table-responsive table-condensed bootstrap-extended-table"
            style="background-color: white"
            data-toggle="table"
            data-striped="true"
            data-search="true"
            data-sortable="true"
            data-pagination="true"
            data-side-pagination="client"
            data-page-number="1"
            data-page-size="50"
            data-pagination-first-text="First"
            data-pagination-pre-text="Previous"
            data-pagination-next-text="Next"
            data-pagination-last-text="Last"
            data-show-pagination-switch="true"
            data-pagination-v-align="top"
            data-pagination-h-align="right">
      <thead>
	<tr>
	  <th data-sortable="true">PO#</th>
	  <th data-sortable="true">Order Date</th>
	  <th data-sortable="true">Exp. Arrival</th>
	  <th data-sortable="true">Status</th>
	  <th data-sortable="true">Vendor</th>
	  <th data-sortable="true">Ship-To</th>
	  <th>Cost</th>
	  <th data-sortable="true">Notes</th>
	</tr>
      </thead>
      {% for order in order_list %}
      <tr
	 {% with order.days_until_past_due as days_to_live %}
         {%   if order.is_open %}
         {%     if days_to_live <= 0 %}class="danger"
	 {%     elif days_to_live > 0 and days_to_live < 7 %}class="warning"
	 {%     elif days_to_live >= 7 %}class="success"
         {%     endif %}
         {%   endif %}
	 {% endwith %}>
	<td>{{ order.html_link|safe }}</td>
	<td>{{ order.ts|date:"Y‑m‑d" }}</td>
	<td>{{ order.expected_arrival_date|date:"Y‑m‑d" }}</td>
	<td>{{ order.get_status_display }}</td>
	<td>{{ order.vendor.html_link|safe }}</td>
	<td>{{ order.warehouse.html_link|safe }}</td>
	<td class='text-right'>
	  $&nbsp;{{ order.total_cost|floatformat:2|intcomma }}
	</td>
	<td>{{ order.notes|linebreaksbr }}</td>
      </tr>
      {% endfor %}
    </table>
  </div>
</div>

{% endblock content %}
