{{ header }}{{ column_left }}
<!-- Content Wrapper. Contains page content -->
<div id="content" class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <div>
      <div class="pull-right">
        <a href="{{ link_overview }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> {{ button_cancel }}</a>
      </div>
      <h1>
        {{ heading_title }}
      </h1>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <ul class="breadcrumb">
          {% for breadcrumb in breadcrumbs %}
          <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </section>

  <!-- Alert -->
  <section class="content-header">
    {% if success %}
    <div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}</div>
    {% endif %}
  </section>
  <!-- /.alert -->

  <!-- Main content -->
  <section class="content">

    <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>
        {% else %}
          {% 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 data_row in row.data %}
                <tr>
                  <td class="text-center">{{ data_row.sku }}</td>
                  <td class="text-center">{{ data_row.stock }}</td>
                </tr>
              {% endfor %}
            </tr>
          {% endfor %}
        {% endif %}
      </tbody>
    </table>

  </section>
  <!-- /.content -->
</div>
<!-- /.content-wrapper -->
<script type="text/javascript"><!--
$('#button-filter').on('click', function() {
  var 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 }}
