<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <td class="text-left">{{ column_date_added }}</td>
        <td class="text-left">{{ column_comment }}</td>
        <td class="text-left">{{ column_status }}</td>
        <td class="text-left">{{ column_notify }}</td>
      </tr>
    </thead>
    <tbody>
      {% if histories %}
      {% for history in histories %}
      <tr>
        <td class="text-left">{{ history.date_added }}</td>
        <td class="text-left">{{ history.comment }}</td>
        
		{% if history.status == 'Shipped' %} <td class="text-left"><span style="color:orange">{{ history.status }}</span></td>
		{% elseif history.status == 'Pending' %} <td class="text-left"><span style="color:red">{{ history.status }}</span></td>
		{% elseif history.status == 'Complete' %} <td class="text-left"><span style="color:green">{{ history.status }}</span></td>
		{% elseif history.status == 'Collected' %} <td class="text-left"><span style="color:green">{{ history.status }}</span></td>
		{% elseif history.status == 'Processing' %} <td class="text-left"><span style="color:blue">{{ history.status }}</span></td>
		{% elseif history.status == 'Store Collection' %} <td class="text-left"><span style="color:orange">{{ history.status }}</span></td>
		{% elseif history.status == 'Pre-order' %} <td class="text-left"><span style="color:orange">{{ history.status }}</span></td>
		{% elseif history.status == 'Canceled' %} <td class="text-left"><span style="color:red">{{ history.status }}</span></td>
		{% elseif history.status == 'Processed' %} <td class="text-left"><span style="color:#0096ff">{{ history.status }}</span></td>
		{% else %} <td class="text-left">{{ history.status }}</td>
		{% endif %}
			
        <td class="text-left">{{ history.notify }}</td>
      </tr>
      {% endfor %}
      {% else %}
      <tr>
        <td class="text-center" colspan="4">{{ text_no_results }}</td>
      </tr>
      {% endif %}
    </tbody>
  </table>
</div>
<div class="row">
  <div class="col-sm-6 text-left">{{ pagination }}</div>
  <div class="col-sm-6 text-right">{{ results }}</div>
</div>
