{% extends 'forms/base_widget.html' %}

{% block html %}
    <h3>{%- trans %}Permissions{% endtrans -%}</h3>
    <div id="permissions-widget-{{ field.id }}" class="permissions-widget">
        <input type="hidden" value='{{ field._value()|tojson|forceescape }}' name="{{ field.name }}">
        <ul class="permissions-widget-list"></ul>
        <div class="toolbar">
            <div class="group">
                <a class="i-button label text-color outline add-entry-decoration">
                    {%- trans %}Add{% endtrans -%}
                </a>
                <span id="js-add-user-group" style="white-space: nowrap;"></span>
                {% if field.object_type == 'event' %}
                    <button class="i-button arrow js-dropdown" data-toggle="dropdown">{% trans %}Event Role{% endtrans %}</button>
                    <ul class="i-dropdown entry-role-dropdown" data-items='{{ field.event_roles|tojson|forceescape }}'>
                        <li class="separator default"></li>
                        <li class="entry-item new-role-btn default">
                            <a class="js-new-role"
                               data-href="{{ url_for('event_roles.add_role', field.event) }}"
                               data-title="{% trans %}Add a new role{% endtrans %}"
                               data-ajax-dialog
                               href="">
                                <span class="icon-medal dropdown-icon"></span>
                                <span>{% trans %}New role{% endtrans %}</span>
                            </a>
                        </li>
                    </ul>
                {% endif %}
                {% set category_roles = field.category_roles %}
                {% if category_roles %}
                    <button class="i-button arrow js-dropdown" data-toggle="dropdown">
                        {% trans %}Category role{% endtrans %}
                    </button>
                    <ul class="i-dropdown entry-category-role-dropdown"
                        data-items='{{ category_roles|tojson|forceescape }}'></ul>
                {% endif %}
                {% if field.object_type in ('event', 'category') and field.ip_networks %}
                    <button class="i-button arrow js-dropdown" data-toggle="dropdown">
                        {%- trans %}IP Network{% endtrans -%}
                    </button>
                    <ul class="i-dropdown entry-ip-network-dropdown"
                        data-items='{{ field.ip_networks|tojson|forceescape }}'></ul>
                {% endif %}
                {% if field.registration_forms %}
                    <button class="i-button arrow js-dropdown" data-toggle="dropdown">
                        {%- trans %}Registrants{% endtrans -%}
                    </button>
                    <ul class="i-dropdown entry-reg-form-dropdown"
                        data-items='{{ field.registration_forms|tojson|forceescape }}'></ul>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block javascript %}
    <script>
        $('#permissions-widget-{{ field.id }}').permissionswidget({
            objectType: {{ field.object_type | tojson }},
            isUnlisted: {{ field.is_unlisted | tojson }},
            permissionsInfo: {{ field.permissions_info | tojson }},
            hiddenPermissions: {{ field.hidden_permissions | default([]) | tojson }},
            hiddenPermissionsInfo: {{ field.hidden_permissions_info | tojson }},
            searchToken: {{ field.search_token | tojson }},
        });

        // make sure permission widget updates even if protection widget is not there to trigger an update
        {% if field.object_type == 'event' and field.event.is_unlisted %}
            $('#permissions-widget-{{ field.id }}').trigger('indico:protectionModeChanged');
        {% endif %}
    </script>
{% endblock %}
