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

<p class="alert alert-info">
    {% trans %}This is the list of blocks present in your system, you can use the filter to display only certain blocks.
    The order in which blocks are listed here is not necessarily the order in which they are displayed in site pages.
    To manage the display order of the blocks click the position name in this table or on the 'edit block placements'
    in the position list table below.{% endtrans %}
</p>

{% include '@ZikulaBlocksModule/Admin/filter_form.html.twig' %}

<div class="table-responsive">
    <table id="block-list" class="table table-bordered table-striped">
        <colgroup>
            <col id="cBlockId" />
            <col id="cBlockTitle" />
            <col id="cBlockDescription" />
            <col id="cBlockModule" />
            <col id="cBlockType" />
            <col id="cBlockPositions" />
            <col id="cBlockLanguage" />
            <col id="cBlockState" />
            <col id="cBlockActions" />
        </colgroup>
        <thead>
            <tr>
                <th id="hBlockId" scope="col"><a href="{{ sort.bid.url }}" title="{% trans %}Sort by ID{% endtrans %}" class="{{ sort.bid.class }}">{% trans %}ID{% endtrans %}</a></th>
                <th id="hBlockTitle" scope="col"><a href="{{ sort.title.url }}" title="{% trans %}Sort by title{% endtrans %}" class="{{ sort.title.class }}">{% trans %}Title{% endtrans %}</a></th>
                <th id="hBlockDescription" scope="col">{% trans %}Description{% endtrans %}</th>
                <th id="hBlockModule" scope="col">{% trans %}Module{% endtrans %}</th>
                <th id="hBlockType" scope="col"><a href="{{ sort.blocktype.url }}" title="{% trans %}Sort by type{% endtrans %}" class="{{ sort.blocktype.class }}">{% trans %}Type{% endtrans %}</a></th>
                <th id="hBlockPositions" scope="col">{% trans %}Positions{% endtrans %}</th>
                <th id="hBlockLanguage" scope="col"><a href="{{ sort.language.url }}" title="{% trans %}Sort by language{% endtrans %}" class="{{ sort.language.class }}">{% trans %}Language{% endtrans %}</a></th>
                <th id="hBlockState" scope="col"><a href="{{ sort.state.url }}" title="{% trans %}Sort by state{% endtrans %}" class="{{ sort.state.class }}">{% trans %}State{% endtrans %}</a></th>
                <th id="hBlockActions" scope="col" class="text-right">{% trans %}Actions{% endtrans %}</th>
            </tr>
        </thead>
        <tbody>
            {% for block in blocks %}
                <tr>
                    <td headers="hBlockId">{{ block.bid }}</td>
                    <td headers="hBlockTitle">{{ block.title }}</td>
                    <td headers="hBlockDescription">{{ block.description }}</td>
                    <td headers="hBlockModule">{{ block.module.name }}</td>
                    <td headers="hBlockType">{{ block.blocktype }}</td>
                    <td headers="hBlockPositions">
                        {% for position in block.positions %}
                            {% if not positionavailable(position.name) %} <i class="fas fa-exclamation-triangle text-danger tooltips" title="{% trans %}Position not available in current default theme.{% endtrans %}"></i>{% endif %}
                            <a href="{{ path('zikulablocksmodule_placement_edit', {pid: position.pid}) }}">{{ position.name }}</a>{% if not loop.last %}, {% endif %}
                        {% endfor %}
                        {% if block.filters|length > 0 %} <i class="fas fa-filter fa-lg text-success float-right" title="{% trans %}This block has filters{% endtrans %}"></i>{% endif %}
                    </td>
                    <td headers="hBlockLanguage">{{ block.language|default( 'All'|trans ) }}</td>
                    <td headers="hBlockState">
                        <a href="#" class="block-state-switch badge badge-success{{ block.active ? '' : ' d-none' }} tooltips" title="{% trans %}Click to deactivate block{% endtrans %}" data-bid="{{ block.bid }}">{% trans %}Active{% endtrans %}</a>
                        <a href="#" class="block-state-switch badge badge-danger{{ block.active ? ' d-none' : '' }} tooltips" title="{% trans %}Click to activate block{% endtrans %}" data-bid="{{ block.bid }}">{% trans %}Inactive{% endtrans %}</a>
                    </td>
                    <td headers="hBlockActions" class="actions">
                        <a class="fas fa-eye tooltips block-preview" href="{{ path('zikulablocksmodule_block_view', {bid: block.bid}) }}" data-toggle="modal" data-target="#zikulablocksmodule-block-view-modal" data-remote="false" title="{% trans %}Preview block{% endtrans %}"></a>
                        <a class="fas fa-pencil-alt tooltips" href="{{ path('zikulablocksmodule_block_edit', {blockEntity: block.bid}) }}" title="{% trans %}Edit block{% endtrans %}"></a>
                        <a class="fas fa-trash-alt tooltips" href="{{ path('zikulablocksmodule_block_delete', {bid: block.bid}) }}" title="{% trans %}Delete block{% endtrans %}"></a>
                    </td>
                </tr>
            {% else %}
                <tr class="table-info"><td colspan="9" class="text-center">{% trans %}No items found.{% endtrans %}</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<h3 id="blockpositions">{% trans %}Block positions list{% endtrans %}</h3>

<p class="alert alert-info">{% trans %}This is the list of block positions currently existing for your site's pages.
You can create a new block position by clicking 'Create block position' in the menu. To edit the settings for a block position,
click on the 'Edit' icon beside that particular position. To reorder the blocks within a block position, click on the
'Edit placements' (blocks) icon for that position or on the position name in the block list above.
To delete a block position, click on the 'Delete' icon and confirm the action in the confirmation prompt that will display.{% endtrans %}</p>

<div class="table-responsive">
    <table class="table table-bordered table-striped">
        <colgroup>
            <col id="cPosName" />
            <col id="cPosDescription" />
            <col id="cPosTwig" />
            <col id="cPosActions" />
        </colgroup>
        <thead>
            <tr>
                <th id="hPosName" scope="col">{% trans %}Name{% endtrans %}</th>
                <th id="hPosDescription" scope="col">{% trans %}Description{% endtrans %}</th>
                <th id="hPosTwig" scope="col">{% trans %}Twig tag{% endtrans %}</th>
                <th id="hPosActions" scope="col" class="text-right">{% trans %}Actions{% endtrans %}</th>
            </tr>
        </thead>
        <tbody>
        {% for position in positions %}
        <tr{% if not positionavailable(position.name) %} class="danger"{% endif %}>
            <td headers="hPosName">
                {{ position.name }}
                {% if not positionavailable(position.name) %} <i class="fas fa-exclamation-triangle text-danger tooltips" title="{% trans %}Position not available in current default theme.{% endtrans %}"></i>{% endif %}
            </td>
            <td headers="hPosDescription">{{ position.description|slice(0, 25)|safeHtml }}</td>
            <td headers="hPosTwig"><code>&#123;&#123; showblockposition('{{ position.name }}') &#125;&#125;</code></td>
            <td headers="hPosActions" class="actions">
                <a class="fas fa-cubes tooltips" href="{{ path('zikulablocksmodule_placement_edit', {pid:position.pid}) }}" title="{% trans %}Edit block placements{% endtrans %}"></a>
                <a class="fas fa-pencil-alt tooltips" href="{{ path('zikulablocksmodule_position_edit', {positionEntity:position.pid}) }}" title="{% trans %}Edit block position{% endtrans %}"></a>
                <a class="fas fa-trash-alt tooltips" href="{{ path('zikulablocksmodule_position_delete', {pid:position.pid}) }}" title="{% trans %}Delete block position{% endtrans %}"></a>
            </td>
        </tr>
        {% else %}
        <tr class="table-info"><td colspan="4" class="text-center">{% trans %}No items found.{% endtrans %}</td></tr>
        {% endfor %}
        </tbody>
    </table>
</div>
<p class="alert alert-warning"><i class="fas fa-exclamation-triangle text-danger"></i> {% trans %}Marked positions are not available in the current default theme.{% endtrans %}</p>

{# block preview modal #}
<div class="modal fade" id="zikulablocksmodule-block-view-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans %}Block View{% endtrans %}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <div class="text-center"><i class="fas fa-spin fa-3x fa-spinner"></i></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans %}Close{% endtrans %}</button>
            </div>
        </div>
    </div>
</div>

{{ pageAddAsset('javascript', zasset('@ZikulaBlocksModule:js/Zikula.Blocks.Admin.Common.js')) }}
{{ pageAddAsset('javascript', zasset('@ZikulaBlocksModule:js/Zikula.Blocks.Admin.View.js')) }}
