<div class="alert alert-info">{% trans %}Drag items from the right column to the left column to connect the hooks. Only areas with the same category can be connected.{% endtrans %}</div>

<div class="row">
<div id="hookSubscriberAreas" class="col-md-6">
    <fieldset>
        <legend>{% trans %}Attached areas{% endtrans %}</legend>
        {% for category, areas in subscriberAreasAndCategories %}
            <fieldset class="sareas_category">
                <legend>{{ category }}</legend>
                {% for sarea in areas %}
                    {% set sarea_md5 = sarea|php('md5') %}
                    <div id="sarea_{{ sarea_md5 }}" class="sarea_wrapper">
                        <input type="hidden" id="sarea_{{ sarea_md5 }}_a" value="{{ sarea }}" />
                        <input type="hidden" id="sarea_{{ sarea_md5 }}_c" value="{{ subscriberAreasToCategories[sarea] }}" />
                        <input type="hidden" id="sarea_{{ sarea_md5 }}_i" value="{{ sarea_md5 }}" />
                        <h4>{{ subscriberAreasToTitles[sarea] }} <span class="small">({{ sarea }})</span></h4>
                        <ol id="sarea_{{ sarea_md5 }}_list" class="">
                            {% if areasSorting[category][sarea] is defined %}
                                {% for parea in areasSorting[category][sarea] %}
                                    {% set parea_md5 = parea|php('md5') %}
                                    {% set attached_area_identifier = parea_md5 ~ '-' ~ sarea_md5 %}
                                    <li id="attachedarea_{{ attached_area_identifier }}" class="clearfix z-sortable list-group-item ui-draggable" style="cursor: move; left: 0; top: 0; opacity: 1; position: relative">
                                        <i class="fas fa-arrows"></i>
                                        <span>
                                            {{ areasSortingTitles[parea] }} <span class="small">({{ parea }})</span>
                                            <a class="detachlink" title="{% trans %}Detach{% endtrans %} {{ areasSortingTitles[parea] }}" href="#" data-sareaid="{{ sarea_md5|e('html_attr') }}" data-sarea="{{ sarea|e('html_attr') }}" data-pareaid="{{ parea_md5|e('html_attr') }}" data-parea="{{ parea|e('html_attr') }}"><i class="fas fa-times"></i></a>
                                        </span>
                                        <input type="hidden" id="attachedarea_{{ attached_area_identifier }}_a" value="{{ parea|e('html_attr') }}" />
                                        <input type="hidden" id="attachedarea_{{ attached_area_identifier }}_c" value="{{ category|e('html_attr') }}" />
                                        <input type="hidden" id="attachedarea_{{ attached_area_identifier }}_i" value="{{ parea_md5|e('html_attr') }}" />
                                    </li>
                                {% endfor %}
                            {% endif %}
                            <li id="sarea_empty_{{ sarea_md5 }}"{% if areasSorting[category][sarea] is defined %} class="d-none"{% endif %}>
                                <span>{% trans %}There aren't any areas attached here.{% endtrans %}<br />{% trans %}Drag an area from the right and drop it here to attach it.{% endtrans %}</span>
                            </li>
                        </ol>
                    </div>
                {% endfor %}
            </fieldset>
        {% else %}
            <p class="alert alert-warning">{% trans with {"%sub%": currentmodule} %}There are no subscribers available for %sub%.{% endtrans %}</p>
        {% endfor %}
    </fieldset>
</div>
<div id="hookProviderAreas" class="col-md-6">
    <fieldset>
        <legend>{% trans %}Available areas{% endtrans %}</legend>
        {% for provider in hookProviders|filter(hp => hp.areas is not empty) %}
            <div class="parea_wrapper">
                <h4><i class="fas fa-caret-right"></i> {{ provider.displayname }}</h4>
                <div class="panel-content">
                    {% for category, areas in provider.areasAndCategories %}
                    <fieldset class="pareas_category">
                        <legend>{{ category }}</legend>
                        {% set draglist_identifier = provider.name ~ '_' ~ category %}
                        {% set draglist_identifier_md5 = draglist_identifier|php('md5') %}
                        <ol id="availableareasdraglist_{{ draglist_identifier_md5 }}" class="list-group">
                            {% for parea in areas %}
                                {% set parea_md5 = parea|php('md5') %}
                                {% set available_area_identifier = parea_md5 ~ '-sarea_identifier' %}
                                <li id="availablearea_{{ available_area_identifier }}" class="z-draggable clearfix list-group-item">
                                    <i class="fas fa-long-arrow-left"></i>
                                    <span>
                                        {{ provider.areasToTitles[parea]|default('Area') }} <span class="small">({{ parea }})
                                    </span>
                                    <a class="detachlink d-none" title="{% trans %}Detach{% endtrans %} {{ provider.areasToTitles[parea] }}" href="#" data-sareaid="##id" data-sarea="##name" data-pareaid="{{ parea_md5|e('html_attr') }}" data-parea="{{ parea|e('html_attr') }}"><i class="fas fa-times"></i></a></span>
                                    <input type="hidden" id="availablearea_{{ available_area_identifier }}_a" value="{{ parea }}" />
                                    <input type="hidden" id="availablearea_{{ available_area_identifier }}_c" value="{{ provider.areasToCategories[parea] }}" />
                                    <input type="hidden" id="availablearea_{{ available_area_identifier }}_i" value="{{ parea_md5 }}" />
                                </li>
                            {% endfor %}
                        </ol>
                    </fieldset>
                    {% endfor %}
                </div>
            </div>
        {% else %}
            <p class="alert alert-warning">{% trans with {"%sub%": currentmodule} %}There are no providers available for %sub%.{% endtrans %}</p>
        {% endfor %}
    </fieldset>
</div>
</div>
