{% 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 async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
{% endblock %}

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

    <div class="row">
        <div class="col-sm-6 col-sm-offset-3 darker showcase" id="items-ordered">
            <h1 class="text-center">Ordered dishes: {{ order.items.count() }}</h1>
            {% for key, value in order.group_by_dish().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>
    </div>

{%- endblock %}