{% extends '_dashboard/base.html.twig' %}

{% block page_content %}
    <table class="table" style="width: 100%;">
        <thead>
            <tr>
                {#<th>Id</th>#}
                <th>Name</th>
                {#<th>Icon</th>#}
                {#<th>GridHeight</th>#}
                {#<th>GridWidth</th>#}
                <th>Version</th>
                <th>SortOrder</th>
                <th>isActive</th>
                <th style="width: 260px">actions</th>
            </tr>
        </thead>
        <tbody>
            {% for _region in regions %}
                <tr>
                    {#<td>{{ region.id }}</td>#}
                    <td><img {% if _region.icon %}data-src="{{ asset(assets.img.region ~ _region.icon) }}{% endif %}" src="{{ asset(assets.img._black_xs) }}" alt style="height: 48px; width: auto;"> {{ _region.name }}</td>
                    {#<td>{{ region.icon }}</td>#}
                    {#<td>{{ region.gridHeight }}</td>#}
                    {#<td>{{ region.gridWidth }}</td>#}
                    <td>{{ _region.version }}</td>
                    <td>{{ _region.sortOrder }}</td>
                    <td>{{ _region.isActive ? 'yes' : 'no' }}</td>
                    <td>
                        <div style="display: grid; grid-template-columns: repeat(3, 1fr); text-align: center">
                            <a href="{{ path('bo_region_grid_index', {'regionId': _region.id}) }}">Show map</a>
                            <a href="{{ path('bo_region_edit', {'id': _region.id}) }}">Edit region</a>
                            <a href="{{ path('bo_region_grid_edit', {'regionId': _region.id}) }}">Edit grid</a>
                        </div>
                    </td>
                </tr>
                {% for _subRegion in _region.subRegions %}
                    <tr>
                        {#<td>{{ region.id }}</td>#}
                        <td><img src="{{ asset(_subRegion.icon ? assets.img.region ~ _subRegion.icon : assets.img._black_xs) }}" alt style="height: 48px; width: auto;"> {{ _subRegion.name }}</td>
                        {#<td>{{ region.icon }}</td>#}
                        {#<td>{{ region.gridHeight }}</td>#}
                        {#<td>{{ region.gridWidth }}</td>#}
                        <td>{{ _subRegion.version }}</td>
                        <td>{{ _subRegion.sortOrder }}</td>
                        <td>{{ _subRegion.isActive ? 'yes' : 'no' }}</td>
                        <td>
                            <div style="display: grid; grid-template-columns: repeat(3, 1fr); text-align: center">
                                {% if _subRegion.isAlias %}
                                    <a href="{{ path('bo_region_edit', {'id': _subRegion.id}) }}">Edit region</a>
                                {% else %}
                                    <a href="{{ path('bo_region_grid_index', {'regionId': _subRegion.id}) }}" style="margin-right: 20px;">Show map</a>
                                    <a href="{{ path('bo_region_edit', {'id': _subRegion.id}) }}">Edit region</a>
                                    <a href="{{ path('bo_region_grid_edit', {'regionId': _region.id}) }}">Edit grid</a>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                {% endfor %}
            {% else %}
                <tr>
                    <td colspan="6">no records found</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    <a href="{{ path('bo_region_new') }}">Create new</a>
{% endblock %}