{% set amountOfProviderAreas = providerAreas|length %}
<div id="registeredProviderAreas">
    <fieldset>
        <legend>
            {% trans with {'%sub%': currentmodule} %}%sub% module provides the following connections:{% endtrans %}
        </legend>
        <div>
            <ol>
            {% for providerArea in providerAreas %}
                <li><strong>{{ providerAreasToTitles[providerArea] }}</strong> <span class="small">({{ providerArea }})</span></li>
            {% endfor %}
            </ol>
        </div>
        <div class="alert alert-info">{% trans with {'%sub%': currentmodule} %}To connect %sub% to one of the modules from the list below, click on the checkbox(es) next to the corresponding area.{% endtrans %}</div>

        <table class="table table-bordered table-striped" id="subscribersListForProvider">
            <colgroup>
                <col id="cId" />
                <col id="cName" />
                <col id="cConnections" />
            </colgroup>
            <thead>
                <tr>
                    <th id="hId" scope="col" class="col-md-1">{% trans %}ID{% endtrans %}</th>
                    <th id="hName" scope="col" class="col-md-2">{% trans %}Display name{% endtrans %}</th>
                    <th id="hConnections" scope="col" class="col-md-9">{% trans %}Connections{% endtrans %}</th>
                </tr>
            </thead>
            <tbody>
            {% for subscriber in hookSubscribers|filter(s => s.areas is not empty) %}
                <tr>
                    <td headers="hId">{{ subscriber.id }}</td>
                    <td headers="hName">{{ subscriber.displayname|default(subscriber.name) }}</td>
                    <td headers="hConnections">
                        {% set connection_exists = false %}
                        {% for sarea in subscriber.areas %}
                            {# preliminary check to see if binding is allowed, if no bindings are allowed we don't show this row. Better usability. #}
                            {% set total_bindings = 0 %}
                            {% for parea in providerAreas|filter(p => hookDispatcher.isAllowedBindingBetweenAreas(sarea, p)) %}
                                {% set total_bindings = total_bindings + 1 %}
                                {% set connection_exists = true %}
                            {% endfor %}
                            {% if total_bindings > 0 %}
                                {% set sarea_md5 = sarea|php('md5') %}
                                <div class="row">
                                    <div class="col-md-5">
                                        {{ subscriber.areasToTitles[sarea]|default('Area') }} <span class="small">({{ sarea }})</span>
                                    </div>
                                    <div class="col-md-1 text-right">
                                        <span class="fas fa-paperclip"></span>
                                    </div>
                                    <div class="col-md-6">
                                        {% for parea in providerAreas|filter(p => hookDispatcher.isAllowedBindingBetweenAreas(sarea, p)) %}
                                            {% set parea_md5 = parea|php('md5') %}
                                            {% set binding = hookDispatcher.getBindingBetweenAreas(sarea, parea) %}
                                            <input type="checkbox" id="chk_{{ sarea_md5 }}_{{ parea_md5 }}" name="chk[{{ sarea_md5 }}][{{ parea_md5 }}]" class="subscriber-toggle" data-sarea="{{ sarea|e('html_attr') }}" data-parea="{{ parea|e('html_attr') }}"{% if binding %} checked="checked"{% endif %} /> {{ providerAreasToTitles[parea] }} <span class="small">({{ parea }})</span><br />
                                        {% endfor %}
                                    </div>
                                </div>
                            {% else %}
                                {% if not connection_exists %}
                                    <span class="small">{% trans with {'%module1%': currentmodule, '%module2%': subscriber.name} %}%module1% module can't connect to %module2% module. No connections are supported{% endtrans %}</span>
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                    </td>
                </tr>
            {% else %}
                <tr class="table-info"><td colspan="3" class="text-center">{% trans %}No possible subscribers found.{% endtrans %}</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </fieldset>
</div>