{% 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="{{ 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">
            <h3 class="text-center">Ordered products: {{ order.items.count() }}</h3>
        {% for key, value in order.group_by_product().items() -%}
            <div class="product text-center">
                <p>
                    {{ key }}: {{ value["count"] }}
                    {% if value["extras"] -%}
                        <div class="extras">
                        {% for extra in value["extras"] -%}
                            <div>{{ extra }}</div>
                        {% endfor %}
                        </div>
                    {%- endif %}
                </p>
            </div>
        {%- endfor %}
        </div>
    </div>

{%- endblock %}