{% extends "bootstrap/base.html" %}
{% import "bootstrap/utils.html" as utils %}

{% block title %}
Haldis - Order {{ order.id }}
{% endblock %}

{% block styles %}
	{{ super() }}
	<link rel="stylesheet" href="{{ url_for('static', filename='css/shop_view.css') }}" media="screen">
{% endblock %}

{% block scripts %}
	{{ super() }}
	<script type="text/javascript" src="{{ url_for('static', filename='js/timer.js') }}"></script>
	<script type="text/javascript">
		$("#open-message").html("Wait until order is closed!");
	</script>
{% endblock %}

{% block content -%}
	{{ utils.flashed_messages(container=True) }}

	<div class="ticket" id="items-ordered">
		<h1>Haldis order {{ order.id }}</h1>

		{% if not order.is_closed() %}
		<div class="open-order-warning">
			{{ order.stoptime|countdown }}
			<div id="open-message">Refresh page when closed!</div>
		</div>
		{% endif %}

		{% for dish_name, dish_quantity, dish_comment_groups in order.group_by_dish() -%}
			<div class="dish">
				<h2><span class="quantity">{{ dish_quantity }}</span> × {{ dish_name }}</h2>
				{% if dish_comment_groups | map("first") | any -%}
					<ul class="comments">
					{% for comment, items in dish_comment_groups -%}
					<li><span class="quantity">{{ items | length }}</span> ×
						{% if comment %}{{ comment }}
						{% else %}<i>No comment</i>
						{% endif %}</li>
					{% endfor %}
					</ul>
				{%- endif %}
				</p>
			</div>
		{%- endfor %}
		<div class="total">Total {{ order.items.count() }} items — {{ total_price|euro }}</div>
	</div>

{%- endblock %}