{% set blockedDisabledCountry = null %}
{% if blockedCountryCode %}
  {% for disabledCountry in config.disableCountries %}
    {% if disabledCountry.country == blockedCountryCode %}
      {% set blockedDisabledCountry = disabledCountry %}
    {% endif %}
  {% endfor %}
{% endif %}

<div class="mx-auto my-10 w-full max-w-7xl px-6 md:my-16 md:px-10 lg:my-20 lg:px-20">
  <div class="border border-foreground/10 bg-surface px-6 py-8 shadow-sm md:px-10 md:py-10 lg:px-12">
    <p class="text-xs font-semibold uppercase tracking-status text-accent">
      {{ 'shop.title'|trans }}
    </p>
    <h2 class="mt-3 text-lg font-semibold text-foreground md:text-xl">
      {{ 'shop.blockShop'|trans({'%country%': blockedCountryCode|country_name}) }}
    </h2>

    {% if blockedDisabledCountry and blockedDisabledCountry.description|default('')|striptags|trim is not empty %}
      <div class="mt-5 text-sm leading-7 text-foreground/80 md:text-base [&_p]:mb-4 [&_p:last-child]:mb-0">
        {{ blockedDisabledCountry.description|raw }}
      </div>
    {% endif %}

    <p class="mt-5 text-sm leading-7 text-foreground/70 md:text-base">
      {{ 'shop.blockShopContact'|trans }}
    </p>

    <a
      href="{{ path('contact') }}"
      class="mt-5 inline-flex items-center justify-center border border-foreground/15 bg-foreground px-6 py-3 text-center text-sm font-semibold uppercase tracking-status text-on-foreground transition hover:border-foreground hover:bg-transparent hover:text-foreground">
      {{ 'shop.blockShopContactLink'|trans }}
    </a>
  </div>
</div>
