{% extends 'forms/base_widget.html' %}
{% from 'message_box.html' import message_box %}


{% block html %}
    <div>
        <div id="category-title-{{ field.id }}" class="text-holder-box flexrow f-a-center" data-tooltip-anchor></div>
        <div id="category-warning-{{ field.id }}" class="hidden">
            <div class="action-box mid-form for-form warning">
                <div class="section">
                    <div class="icon icon-warning"></div>
                    <div class="text">
                        <div>
                            {% trans %}
                                The selected category does not contain any events, only subcategories.
                                Please make sure that you really want to create an event there.
                            {% endtrans %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button type="button"
                class="i-button"
                id="categorynav-button-{{ field.id }}"
                data-title='{% trans %}Choose category{% endtrans %}'>
            {%- trans %}Choose category{% endtrans -%}
        </button>
        <input type="hidden" id="{{ field.id }}" name="{{ field.name }}" value="{{ field._value() | tojson | forceescape }}">
    </div>
{% endblock %}


{% block javascript %}
    <script>
        setupCategoryPickerWidget({
            fieldId: {{ field.id | tojson }},
            navigatorCategoryId: {{ field.navigator_category_id | tojson }},
            requireEventCreationRights: {{ field.require_event_creation_rights | tojson }},
            requireCategoryManagementRights: {{ field.require_category_management_rights | tojson }},
            showEventCreationWarning: {{ field.show_event_creation_warning | tojson }},
        });
    </script>
{% endblock %}
