{% extends "base_order.html" %}
<!-- Load internationalisation utils-->
{% load i18n %}
{% load rules %}

{% block title %} {% trans 'View Order' %} {% endblock %}

{% block content %}
{% has_perm 'sous_chef.edit' request.user as can_edit_data %}

<div class="ui secondary pointing fluid menu">
    <h1 class="ui header">{% trans "Order" %} #{{ order.id }}</h1>
    <div class="right menu">
        <h4 class="ui header" style="margin-top: 1.1em;">{% trans "Update Status:" %}</h4>
        <div class="ui item">
            <div id="order-status " class="ui dropdown order status{% if not can_edit_data %} disabled{% endif %}" data-url="{% url 'order:update_status' pk=order.id %}" data-csrf-token="{{ csrf_token }}">
                <div class="ui large yellow label text">{{ order.get_status_display }}</div>
                <i class="dropdown icon"></i>
                <div class="menu">
                    {% for k,s in status %}
                        <div class="item" data-value={{k}}> {{s}} </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="ui modal status"></div>

<div class="ui row">

<div class="four wide column">
    {% include "_order_info.html" %}
</div>

<div class="twelve wide column">
        <h2 class="ui header">
        <div class="content">
            {% trans "Order detail" %}
            <div class="sub header">
                {% trans "Order items attached to the order" %}.
            </div>
        </div>
    </h2>
    <div class="ui divider"></div>
    <table class="ui celled padded single line table">
      <thead>
        <th>{% trans "Component" %}</th>
        <th>{% trans "Description" %}</th>
        <th class="">{% trans 'Total Quantity' %}</th>
        <th class="">{% trans 'Billable' %}</th>
        <th class="right aligned">{% trans 'Price' %}</th>
      </thead>
      <tbody>
          {% for item in order.orders.all %}
          <tr>
            {% if item.order_item_type == 'meal_component' or item.component_group %}
            <td><strong>{{item.get_order_item_type_display}}</strong></td>
            <td>{{item.get_component_group_display}}</td>
            <td>{{item.total_quantity}}</td>
            <td>{{item.get_billable_flag_display}}</td>
            {% else %}
            <td colspan="4"><strong>{{item.get_order_item_type_display}}</strong></td>
            {% endif %}
            <td class="right aligned"><i class="dollar icon"></i>{{item.price}}</td>
          </tr>
          {% endfor %}
      </tbody>
      <tfoot>
          <tr>
              <th colspan="4">{% trans "Total" %}</th>
              <th class="right aligned"><i class="dollar icon"></i>{{ order.price }}</th>
          </tr>
      </tfoot>
  </table>
</div>
</div>

{% if can_edit_data %}
<div class="ui row">
    <div class="ui column right aligned">
        <a class="ui basic red button order-delete" href="#" data-order-id="{{order.id}}"><i class="icon trash"></i>{% trans "Delete" %}</a>
        <a class="ui blue button" href="{% url 'order:update' pk=order.id %}"><i class="icon edit"></i>{% trans "Modify" %}</a>
    </div>
</div>

{% include 'order_confirm_delete.html' %}
{% endif %}

{% endblock %}
