{% extends 'admin/@layout.html.twig' %}

{% set pageName = 'page_name_country_index'|trans({}, 'admin') %}

{% block content %}
    <section class="content" data-controller="country">
        <div class="card col-8">
            <div class="card-header">
                {{ 'enabled_countries'|trans({}, 'admin') }}
            </div>
            <div class="card-body">
                {% if countries|length %}
                    <table class="table no-first-border no-footer enabled-countries">
                        <thead>
                        <tr>
                            <th>
                                {{ 'dt.columns.default'|trans({}, 'admin') }}
                            </th>
                            <th>
                                {{ 'dt.columns.country'|trans({}, 'admin') }}
                            </th>
                            <th>
                                {{ 'dt.columns.preferred'|trans({}, 'admin') }}
                            </th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for country in countries %}
                            {{ _self.enableCountryTableRow(country) }}
                        {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    {{ component('alert', {type: 'info', message: 'alert_no_enabled_countries', translationDomain: 'admin'}) }}
                {% endif %}
            </div>
        </div>


        <div class="card col-6">
            <div class="card-header">
                {{ 'available_countries'|trans({}, 'admin') }}
            </div>
            <div class="card-body">
                {% if availableCountries|length %}
                    <table class="table no-first-border no-footer">
                        <tbody>
                        {% for country in availableCountries %}
                            {{ _self.availableCountryTableRow(country) }}
                        {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    {{ component('alert', {type: 'info', message: 'alert_no_available_countries', translationDomain: 'admin'}) }}
                {% endif %}
            </div>
        </div>
    </section>
{% endblock %}

{% macro enableCountryTableRow(country) %}
    {% set countryName = country.name|trans({}, 'country') %}
    <tr data-country-code="{{ country.isoAlpha2 }}">
        <td>
            <input type="radio" value="{{ country.isoAlpha2 }}"
                   {% if country.default %}checked="checked"{% endif %}
                   data-action="change->country#selectDefault"/>
        </td>
        <td class="country-name">
            <twig:flag countryCode="{{ country.isoAlpha2 }}" text="{{ countryName }}"/>
        </td>
        <td>
            <a href="{{ path('admin_shop_country_toggle_preferred', {
                'countryCode': country.isoAlpha2,
            }) }}"
            class="btn {{ country.preferred ? 'btn-outline-danger' : 'btn-outline-primary' }}">
                {% if country.preferred %}
                    {{ 'button_unmark_preferred'|trans({}, 'admin') }}
                {% else %}
                    {{ 'button_mark_preferred'|trans({}, 'admin') }}
                {% endif %}
            </a>
        </td>
        <td class="text-right">
            <a href="{{ path('admin_shop_country_remove', {
                'countryCode': country.isoAlpha2,
            }) }}"
               class="btn bg-danger"
               data-delete-confirm="{{ 'alert_admin_country_remove'|trans({'{value}': countryName}, 'admin') }}"
            >
                {{ 'button_prohibit'|trans({}, 'admin') }}
            </a>
        </td>
    </tr>
{% endmacro %}

{% macro availableCountryTableRow(country) %}
    {% set countryName = country.name|trans({}, 'country') %}
    <tr>
        <td>
            <twig:flag countryCode="{{ country.isoAlpha2 }}" text="{{ countryName }}"/>
        </td>
        <td class="text-right">
            <a href="{{ path('admin_shop_country_add', {
                'countryCode': country.isoAlpha2,
            }) }}" class="btn bg-primary">
                {{ 'button_allow'|trans({}, 'admin') }}
            </a>
        </td>
    </tr>
{% endmacro %}