{% load i18n %}

<table id="tabular_permissions" class="table table-condensed table-striped table-hover" cellspacing="0" width="100%"
       data-input-name="{{ input_name }}">
    <thead>
    <tr>
        <th> {% trans 'application' %}</th>
        <th>{% trans 'model' %}</th>
        <th>
            {% trans 'Add' %}
            <div>
                <input type="checkbox" class="checkbox select-all add"
                       id="perm_add_select_all">
                {% trans 'All' %}
            </div>
        </th>
        <th>
            {% trans 'Change' %}
            <div>
                <input type="checkbox" class="checkbox select-all change"
                       id="perm_change_select_all">
                {% trans 'All' %}
            </div>
        </th>
        <th>
            {% trans 'Delete' %}
            <div>
                <input type="checkbox" class="checkbox select-all delete"
                       id="perm_delete_select_all">
                {% trans 'All' %}
            </div>
        </th>
        {% if custom_permissions_available %}
            <th>
            {% trans 'other permissions' %}
            </th>
        {% endif %}
    </tr>
    </thead>
    <tbody>
    {% for app in apps_available %}

        {% for model in app.models %}

            <tr class="{% cycle 'row1' 'row2' %}">

                {% if forloop.counter0 == 0 %}
                    <td rowspan="{{ app.models|length }}" class="app-name"
                        data-app-name="{{ app.label }}">{{ app.verbose_name|capfirst }}
                    </td>
                {% endif %}
                <td>
                    {{ model.verbose_name|capfirst }}
                    <div class="input">
                        {#                        <label>#}
                        <input type="checkbox" class="checkbox select-all select-row"
                               data-model-name="{{ model.model_name }}">
                        {% trans 'All' %}
                        {#                        </label>#}
                    </div>
                </td>
                <td class="add">
                    {% if model.add_perm_id %}
                        <div class="input">
                            <label>
                                <input type="checkbox" class="checkbox add model-{{ model.model_name }}"
                                       id="id_{{ model.add_perm_name }}" data-perm-id="{{ model.add_perm_id }}"
                                        {% if model.add_perm_id in user_permissions %}
                                       checked="checked"
                                        {% endif %}>
                            </label>
                        </div>
                    {% endif %}
                </td>
                <td class="change">
                    {% if model.change_perm_id %}
                        <div class="checkbox ">
                            <label>
                                <input type="checkbox" class="checkbox change model-{{ model.model_name }}"
                                       id="id_{{ model.change_perm_name }}" data-perm-id="{{ model.change_perm_id }}"
                                        {% if model.change_perm_id in user_permissions %}
                                       checked="checked"
                                        {% endif %}>
                            </label>
                        </div>
                    {% endif %}
                </td>
                <td class="delete">
                {% if model.delete_perm_id %}
                    <div class="checkbox ">
                        <label>
                            <input type="checkbox" class="checkbox delete model-{{ model.model_name }}"
                                   id="id_{{ model.delete_perm_name }}" data-perm-id="{{ model.delete_perm_id }}"
                                    {% if model.delete_perm_id in user_permissions %}
                                   checked="checked"
                                    {% endif %}>
                        </label>
                    </div>
                {% endif %}
                </td>
            {% if custom_permissions_available %}
            <td>
            {% for custom_permission in model.custom_permissions %}
                <div class="checkbox ">
                        <label>
                            <input type="checkbox" class="checkbox custom model-{{ model.model_name }}"
                                   id="id_{{ custom_permission.0 }}" data-perm-id="{{ custom_permission.2 }}"
                                    {% if custom_permission.2 in user_permissions %}
                                   checked="checked"
                                    {% endif %}>
                        {{ custom_permission.1 }}
                        </label>
                    </div>
            {% endfor %}

            </td>
        {% endif %}
            </tr>
        {% endfor %}
        {% if app.models %}
            <tr>
                <td colspan="{% if custom_permissions_available%}6{% else %}5{% endif %}" class="user-permissions-app-separator"></td>
            </tr>
        {% endif %}


    {% endfor %}
    </tbody>
</table>
<hr/>
{% block style %}
    {#    Seems a waste to request those couple of sad lines from the server as separate css file #}
    <style>
        .user-permissions-app-separator {
            border-bottom: 1px solid black;
        }

        .app-name {
            border-right: 1px black solid;
        }

        [dir=rtl] .app-name {
            border-left: 1px black solid;
            border-right: initial;
        }

        th {
            text-decoration: underline;
        }

        .select-all {
            font-style: italic;
        }

    </style>
{% endblock %}