{% 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/main.css') }}" media="screen">
	<link rel="stylesheet" href="/css" media="screen">
	<link rel="stylesheet" href="{{ url_for('static', filename='css/print.css') }}" media="print">
{% 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="darker showcase" 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 key, value in order.group_by_dish(True).items() -%}
			<div class="dish">
				<h2><span class="quantity">{{ value["count"] }}</span> × {{ key }}</h2>
				{% if value["comments"]|any -%}
					<ul class="comments">
					{% for comment in value["comments"] -%}
						<li>{% 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 %}