{% load i18n %}
{% load thumbnail %}
{% load templatetags %}

<section class='resources'>
    <div class='container'>

        <div class='filter-bar container-fluid'>
            <h2 class="pull-left">{% trans 'Unit management' %}</h2>
            <div class='filter pull-right'>

                <form name="filter-dropdowns" method="get">

                    <div class='select-dropdown btn btn-primary'>
                        <select id="place-dropdown" name="selected_unit" onchange="this.form.submit();">
                            <option {% if not selected_unit %} selected="selected" {% endif %} value="">
                                {% trans "Filter by unit" %}...
                            </option>
                            {% for unit in all_available_units %}
                            <option {% if unit.id == selected_unit %} selected="selected" {% endif %}
                                value="{{ unit.id }}">
                                {{ unit.name }}
                            </option>
                            {% endfor %}
                        </select>
                        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                    </div>
                </form>
            </div>
        </div>

        <div class='container-fluid'>
            {% for unit in units %}
            <span class="sub-header">{{ unit.name }}</span>

                {% for authorization in unit.authorizations.all %}
                {% with authorization.authorized as unit_user %}
                {% user_has_permission unit_user 'can_approve_reservation' unit as user_can_approve %}

                <div class="row panel management-list list-item">
                    <div class="col-md-2">
                        <span>{{ unit_user.first_name }} {{ unit_user.last_name }}</span>
                    </div>
                    <div class="col-md-3">
                        <span>{{ unit_user.email }}</span>
                    </div>
                    <div class="col-md-4 text-nowrap">
                        <div class="col-md-4">
                            <div>
                                <span class="{% if unit_user.is_staff %}shape-success{% else %}shape-danger{% endif %}"></span>
                                <span>{% trans 'Staff' %}</span>
                            </div>
                            <div>
                                <span class="{% if authorization.level == authorization.level.admin %}shape-success{% else %}shape-danger{% endif %}"></span>
                                <span>{% trans 'Admin' %}</span>
                            </div>
                            <div>
                                <span class="{% if authorization.level == authorization.level.viewer %}shape-success{% else %}shape-danger{% endif %}"></span>
                                <span>{% trans 'Viewer' %}</span>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div>
                                <span class="{% if authorization.level == authorization.level.manager %}shape-success{% else %}shape-danger{% endif %}"></span>
                                <span>{% trans 'Manager' %}</span>
                            </div>
                            <div>
                                <span class="{% if user_can_approve %}shape-success{% else %}shape-danger{% endif %}"></span>
                                <span>{% trans 'Can approve reservations' %}</span>
                            </div>
                        </div>
                    </div>
                    {% if unit_user != request.user %}
                    <div class="col-md-3">
                        <div class="icon-text-container">
                        <svg class="person-edit-icon" width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g id="icons/edit-user" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
                                <g id="a-edit-outline-64" stroke="#000000" stroke-width="2">
                                    <path d="M5.25,6.53333333 C5.25,2.92506667 8.188125,0 11.8125,0 C15.436875,0 18.375,2.92506667 18.375,6.53333333 C18.375,10.1416 15.436875,14 11.8125,14 C8.188125,14 5.25,10.1416 5.25,6.53333333 Z" id="Shape"></path>
                                    <path d="M17.5,18.8591375 C15.9526723,18.5699062 14.1147601,18.375 11.9733691,18.375 C6.84324097,18.375 3.45661956,19.4967938 1.63344386,20.3418688 C0.635049078,20.80435 0,21.838075 0,22.9791188 L0,28 L11.9733691,28" id="Shape"></path>
                                    <polygon id="Shape" points="19.3641304 27.5434783 16.625 28 17.0815217 25.2608696 24.8423913 17.5 27.125 19.7826087">
                                    </polygon>
                                </g>
                            </g>
                        </svg>
                        <h6>
                            <a href="{% url 'respa_admin:edit-user' user_id=unit_user.id %}">{% trans 'Edit permissions' %}</a>
                        </h6>
                        </div>
                    </div>
                    {% endif %}
                </div>

                {% endwith %}
                {% endfor %}
            {% endfor %}

            <div class="page-navigation">
                <nav aria-label="page-navigation">
                    <ul class="pagination pagination-lg">
                        {% if page_obj.has_previous %}
                            <li>
                                <a
                                    aria-label="Previous"
                                    class="btn previous"
                                    href="?page={{ page_obj.previous_page_number }}&selected_unit={{ selected_unit }}"
                                >
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                </a>
                            </li>
                        {% endif %}
                        {% for page_no in paginator.page_range %}
                            {% if page_no > page_obj.number|add:"-3" and page_no < page_obj.number|add:"3" %}
                                <li>
                                    <a
                                        class="btn {% if page_no == page_obj.number %}active-page{% endif %}"
                                        href="?page={{ page_no }}&selected_unit={{ selected_unit }}"
                                    >
                                        {{ page_no }}
                                    </a>
                                </li>
                            {% elif page_no == page_obj.number|add:"-4" or page_no == page_obj.number|add:"4" %}
                                <li>
                                    <a
                                        class="btn"
                                        href="?page={{ page_no }}&selected_unit={{ selected_unit }}"
                                    >
                                        ...
                                    </a>
                                </li>
                            {% endif %}
                        {% endfor %}
                        {% if page_obj.has_next %}
                            <li>
                                <a
                                    aria-label="Next"
                                    class="btn next"
                                    href="?page={{ page_obj.next_page_number }}&selected_unit={{ selected_unit }}"
                                >
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>

        </div>
    </div>
</section>