{% extends 'base.html' %}

{% block title %}clients{% endblock %}

{% block content %}
<nav class="level">
    <div class="level-item has-text-centered">
        <div>
            <p class="heading">Products</p>
            <p class="title">{{ count_products + filtered }}</p>
        </div>
    </div>
    <div class="level-item has-text-centered">
        <div>
            <p class="heading">Windows</p>
            <p class="title">{{ count_products_windows }}</p>
        </div>
    </div>
    <div class="level-item has-text-centered">
        <div>
            <p class="heading">Office</p>
            <p class="title">{{ count_products_office }}</p>
        </div>
    </div>
    <div class="level-item has-text-centered">
        <div>
            <p class="heading"><abbr title="Empty GLVK or not recognized">Other</abbr></p>
            <p class="title">{{ filtered }}</p>
        </div>
    </div>
</nav>

<hr>

<style scoped>
    td.glvk {
        width: 24rem;
    }

    pre.glvk {
        width: min-content;
    }
</style>

{% for group_name, group_products in products | dictsort %}
<h1 class="title">{{ group_name }}</h1>
<table class="table is-bordered is-striped is-hoverable is-fullwidth">
    <thead>
        <tr>
            <th>Name</th>
            <th class="glvk"><abbr title="Group Volume License Key">GVLK</abbr></th>
        </tr>
    </thead>
    <tbody>
        {% for name, gvlk in group_products | dictsort %}
        <tr>
            <td>{{ name }}</td>
            <td class="glvk">
                {% if gvlk %}
                <pre class="glvk">{{ gvlk }}</pre>{% endif %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endfor %}
{% endblock %}