<h3>
    <span class="fas fa-cubes"></span>
    {% trans %}Block placements{% endtrans %}
    {{ pageSetVar('title', 'Block placements'|trans) }}
</h3>

<div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Jump to position... <span class="caret"></span>
    </button>
    <div class="dropdown-menu">
        {% for pid, choice in positionChoices %}
            <a href="{{ path('zikulablocksmodule_placement_edit', {pid: pid}) }}" class="dropdown-item">{{ choice }}</a></li>
        {% endfor %}
    </div>
</div>
<br /><br />
<p class="alert alert-info">{% trans %}Notice: Use drag and drop to arrange the blocks in this position into your desired order. The new block order will be saved automatically.{% endtrans %}</p>

<h4 id="position" data-position="{{ position.pid }}">{% trans with {'%name%': position.name} %}Blocks placed in the '%name%' position{% endtrans %} <span id="feedback" class="badge badge-success" style="display: none">Placements updated!</span></h4>

{% if not positionavailable(position.name) %}<div class="alert alert-warning"><i class="fas fa-exclamation-triangle fa-2x text-danger text-left"></i> {% trans with {'%name%':position.name} %}WARNING: The "%name%" block position is not available in the current default theme.{% endtrans %}</div>{% endif %}
<table id="assignedblocklist" class="table table-bordered table-striped">
    <colgroup>
        <col id="cAssignedDnd" />
        <col id="cAssignedId" />
        <col id="cAssignedTitle" />
        <col id="cAssignedModule" />
        <col id="cAssignedType" />
        <col id="cAssignedLanguage" />
        <col id="cAssignedState" />
    </colgroup>
    <thead>
        <tr id="assignedblocklistheader">
            <th id="hAssignedDnd" scope="col" style="width: 20px"></th>
            <th id="hAssignedId" scope="col">{% trans %}Block ID{% endtrans %}</th>
            <th id="hAssignedTitle" scope="col">{% trans %}Title, Description{% endtrans %}</th>
            <th id="hAssignedModule" scope="col">{% trans %}Module{% endtrans %}</th>
            <th id="hAssignedType" scope="col">{% trans %}Type{% endtrans %}</th>
            <th id="hAssignedLanguage" scope="col">{% trans %}Language{% endtrans %}</th>
            <th id="hAssignedState" scope="col">{% trans %}State{% endtrans %}</th>
        </tr>
    </thead>
    <tbody>
        <tr class="sortable-placeholder table-info{% if assignedblocks is not empty %} d-none{% endif %}">
            <td colspan="7" class="text-center">{% trans %}No blocks placed in this position yet.{% endtrans %}</td>
        </tr>
        {% for block in assignedblocks %}
        <tr style="cursor: move" data-bid="{{ block.bid }}">
            <td headers="hAssignedDnd"><span class="fas fa-arrows-alt"></span></td>
            <td headers="hAssignedId">{{ block.bid }}</td>
            <td headers="hAssignedTitle" id="blockdrag_{{ block.bid }}">
                {{ block.title|safeHtml|default('') }}{% if block.title and block.description %},&nbsp;{% endif %}{{ block.description|safeHtml }}
            </td>
            <td headers="hAssignedModule">{{ block.module.name }}</td>
            <td headers="hAssignedType">{{ block.blocktype }}</td>
            <td headers="hAssignedLanguage">{{ block.language|default('') }}</td>
            <td headers="hAssignedState">
                <a class="badge badge-success tooltips{% if block.active == 0 %} d-none{% endif %}" href="#" title="{% trans %}Click to deactivate this block{% endtrans %}" data-bid="{{ block.bid }}">{% trans %}Active{% endtrans %}</a>
                <a class="badge badge-danger tooltips{% if block.active %} d-none{% endif %}" href="#" title="{% trans %}Click to deactivate this block{% endtrans %}" data-bid="{{ block.bid }}">{% trans %}Inactive{% endtrans %}</a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<h4>{% trans with {'%name%': position.name} %}Blocks not placed in '%name%' position{% endtrans %}</h4>
<table id="unassignedblocklist" class="table table-bordered table-striped">
    <colgroup>
        <col id="cUnassignedDnd" />
        <col id="cUnassignedId" />
        <col id="cUnassignedTitle" />
        <col id="cUnassignedModule" />
        <col id="cUnassignedType" />
        <col id="cUnassignedLanguage" />
        <col id="cUnassignedState" />
    </colgroup>
    <thead>
        <tr id="unassignedblocklistheader">
            <th id="hUnassignedDnd" scope="col" style="width: 20px"></th>
            <th id="hUnassignedId" scope="col">{% trans %}Block ID{% endtrans %}</th>
            <th id="hUnassignedTitle" scope="col">{% trans %}Title, Description{% endtrans %}</th>
            <th id="hUnassignedModule" scope="col">{% trans %}Module{% endtrans %}</th>
            <th id="hUnassignedType" scope="col">{% trans %}Type{% endtrans %}</th>
            <th id="hUnassignedLanguage" scope="col">{% trans %}Language{% endtrans %}</th>
            <th id="hUnassignedState" scope="col">{% trans %}State{% endtrans %}</th>
        </tr>
    </thead>
    <tbody>
        <tr class="sortable-placeholder table-info{% if unassignedblocks is not empty %} d-none{% endif %}">
            <td colspan="7" class="text-center">{% trans %}All blocks placed.{% endtrans %}</td>
        </tr>
        {% for block in unassignedblocks %}
        <tr style="cursor: move" data-bid="{{ block.bid }}">
            <td headers="hUnassignedDnd"><span class="fas fa-arrows-alt"></span></td>
            <td headers="hUnassignedId">{{ block.bid }}</td>
            <td headers="hUnassignedTitle" id="blockdrag_{{ block.bid }}">
                {{ block.title|safeHtml|default('') }}{% if block.title and block.description %},&nbsp;{% endif %}{{ block.description|safeHtml }}
            </td>
            <td headers="hUnassignedModule">{{ block.module.name }}</td>
            <td headers="hUnassignedType">{{ block.blocktype }}</td>
            <td headers="hUnassignedLanguage">{{ block.language|default('') }}</td>
            <td headers="hUnassignedState">
                <a class="badge badge-success tooltips{% if block.active == 0 %} d-none{% endif %}" href="#" title="{% trans %}Click to deactivate this block{% endtrans %}" data-bid="{{ block.bid }}">{% trans %}Active{% endtrans %}</a>
                <a class="badge badge-danger tooltips{% if block.active %} d-none{% endif %}" href="#" title="{% trans %}Click to deactivate this block{% endtrans %}" data-bid="{{ block.bid }}">{% trans %}Inactive{% endtrans %}</a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{{ pageAddAsset('javascript', zasset('@ZikulaBlocksModule:js/Zikula.Blocks.Admin.Common.js')) }}
{{ pageAddAsset('javascript', zasset('@ZikulaBlocksModule:js/Zikula.Blocks.Admin.Modifyposition.js')) }}
{{ pageAddAsset('javascript', asset('jquery-ui/jquery-ui.min.js'), constant('Zikula\\ThemeModule\\Engine\\AssetBag::WEIGHT_JQUERY_UI')) }}
