{% extends 'base.html' %}
{% block content %}

<h2>Shop</h2>

<p class="lead">
Here you can see your orders and available products in the shop.
</p>
<h3>Orders</h3>
<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Order ID</th>
      <th>Open?</th>
      <th>Paid?</th>
      <th>Delivered?</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
{% for order in orders %}
    <tr {% if order.finalized and order.paid %}style="color: lightgreen"{%endif%}>
        <td>{{ order.id }}</td>
        <td>{{ order.finalized }}</td>
        <td>{{ order.paid }}</td>
        <td>?</td>
        <td>
        {% if order.finalized and not order.paid %}
            {% bootstrap_button "Pay order" href="{% reverse 'shop:order_detail' pk=order.id %}" button_class="btn-primary" %}
            {% bootstrap_button "Cancel order" href="{% reverse 'shop:order_cancel' pk=order.id %}" button_class="btn-primary" %}
        {% endif %}
        </td>
    </tr>
{% endfor %}
  </tbody>
</table>

<h3>Products</h3>
<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Description</th>
      <th>Price</th>
      <th>Availability</th>
      <th>Buy</th>
    </tr>
  </thead>
  <tbody>
{% for product in product_list %}
    <tr {% if not product.is_available %}style="color: lightgrey"{%endif%}>
        <td>{{ product.name }}</td>
        <td>{{ product.price }} DKK</td>
        <td>{{ product.available_in.lower }}
          {% if product.available_in.upper %}
            - {{ product.available_in.upper }}
          {% endif %}
        </td>
        <td>
          {% if product.is_available %}
            {% bootstrap_button "Add to order" href="{% reverse 'shop:product_detail' pk=product.id %}" button_class="btn-primary" %}
          {% else %}
            N/A
          {% endif %}
        </td>
    </tr>
  </tbody>
{% endfor %}
</table>
{% endblock %}