{% extends 'base.html' %}
{% load commonmark %}
{% load static %}
{% load imageutils %}
{% block extra_head %}
<script src="{% static "js/jquery.dataTables.min.js" %}"></script>
<link rel="stylesheet" href="{% static 'css/jquery.dataTables.min.css' %}">
{% endblock extra_head %}
{% block content %}
<div class="row">
  <h2>Merchandise To Order</h2>
  <div class="lead">
    This is a list of merchandise to order from our supplier
  </div>
  <div>
    This table shows all different merchandise that needs to be ordered
  </div>
</div>
<br>
<div class="row">
    <table class="table table-hover">
      <thead>
      <tr>
          <th>Merchandise Type</th>
          <th>Quantity</th>
       </tr>
      </thead>
      <tbody>
      {% for key, val in merchandise.items %}
      <tr>
        <td>{{ key }}</td>
        <td>{{ val }}</td>
      </tr>
      {% endfor %}
      </tbody>
    </table>
</div>
<script>
{% endblock content %}