{% extends "base.html" %}

{% block extrastyle %}
<style>
table.perms td, table.perms th { border: 1px dotted gray; text-align: center }
th { width: 1.5em; } 
th div { vertical-align: bottom; writing-mode: vertical-rl; text-orientation: mixed;  }
td.obj_label { text-align: left !important; font-weight: bold; background-color: #eee; }
td.pcode { text-align: left !important; }
</style>
{% endblock %}

{% block content %}
<table class="perms">
<thead><tr><td></td>{% for grp in groups %}<th><div>{{ grp.name }}</div></th>{% endfor %}</tr></thead>
<tbody>
    {% for label, plist in perms_by_categ.items %}
    <tr><td class="obj_label" colspan="{{ groups|length|add:1 }}">{{ label }}</td></tr>
        {% for pcode, pverb in plist %}
            <tr><td class="pcode">{{ pverb }}</td>
                {% for grp, pcodes in grp_perms.items %}
                <td>{% if pcode in pcodes %}<img src="{% static 'admin/img/icon-yes.svg' %}">{% endif %}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    {% endfor %}
</tbody>
</table>
{% endblock %}