{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right"> <a href="{{ link_overview }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a> </div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    <div class="well">
      <div class="row">
        <div class="col-sm-5">
          <div class="input-group date">
            <input type="text" class="form-control" id="input-date-start" data-date-format="YYYY-MM-DD" placeholder="{{ entry_date_start }}" value="{{ date_start }}" name="filter_date_start">
            <span class="input-group-btn">
            <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
            </span> </div>
        </div>
        <div class="col-sm-5">
          <div class="input-group date">
            <input type="text" class="form-control" id="input-date-end" data-date-format="YYYY-MM-DD" placeholder="{{ entry_date_end }}" value="{{ date_end }}" name="filter_date_end">
            <span class="input-group-btn">
            <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
            </span> </div>
        </div>
        <div class="col-sm-2 text-right"> <a id="button-filter" class="btn btn-primary" data-toggle="tooltip" title="{{ button_filter }}"><i class="fa fa-filter"></i></a> </div>
      </div>
    </div>
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th class="text-left">{{ column_ref }}</th>
          <th class="text-left">{{ column_status }}</th>
          <th class="text-left">{{ column_date_requested }}</th>
          <th class="text-left">{{ column_date_updated }}</th>
          <th class="text-center">{{ column_sku }}</th>
          <th class="text-center">{{ column_stock }}</th>
        </tr>
      </thead>
      <tbody>
        {% if not table_data %}
          <tr>
            <td class="text-center" colspan="6">{{ text_empty }}</td>
          </tr>
        {% endif %}
        {% for ref, row in table_data %}
          <tr>
            <td class="text-left" rowspan="{{ row.data|length + 1 }}">{{ ref }}</td>
            <td class="text-left" rowspan="{{ row.data|length + 1 }}">{{ row.status }}</td>
            <td class="text-left" rowspan="{{ row.data|length + 1 }}">{{ row.date_requested }}</td>
            <td class="text-left" rowspan="{{ row.data|length + 1 }}">{{ row.date_updated }}</td>
            {% for dataRow in row.data %}
              <tr>
                <td class="text-center">{{ dataRow.sku }}</td>
                <td class="text-center">{{ dataRow.stock }}</td>
              </tr>
            {% endfor %}
          </tr>
        {% endif %}
      </tbody>
    </table>
  </div>
</div>
<script type="text/javascript"><!--
$('#button-filter').on('click', function() {
  url = 'index.php?route=extension/openbay/amazonus/stockUpdates&user_token={{ user_token }}';

  var filter_date_start = $('#input-date-start').val();

  if (filter_date_start) {
    url += '&filter_date_start=' + encodeURIComponent(filter_date_start);
  }

  var filter_date_end = $('#input-date-end').val();

  if (filter_date_end) {
    url += '&filter_date_end=' + encodeURIComponent(filter_date_end);
  }
  location = url;
});

$(document).ready(function() {
  $('#input-date-start').datepicker({dateFormat: 'yy-mm-dd'});
  $('#input-date-end').datepicker({dateFormat: 'yy-mm-dd'});
});

$('.date').datetimepicker({
	language: '{{ datepicker }}',
	pickTime: false
});

$('.datetime').datetimepicker({
	language: '{{ datepicker }}',
	pickDate: true,
	pickTime: true
});

$('.time').datetimepicker({
	language: '{{ datepicker }}',
	pickDate: false
});
//--></script>
{{ footer }}
