{% load i18n %}
<div class="village-consent-banner">
  <h2 class="village-h6">
    {{ self.title }}
  </h2>
  <div class="village-consent-banner__content">
    <p class="village-text--sm">
      {{ self.content|safe }}
    </p>
  </div>
  <ul class="village-consent-banner__buttons village-btns-group village-btns-group--right village-btns-group--inline-reverse village-btns-group--inline-sm">
    <li>
      {% translate "Allow all cookies" as allow_all_cookies %}
      <button class="village-btn"
              id="consent-accept-all"
              title="{{ allow_all_cookies }}">
        {% translate "Accept all" %}
      </button>
    </li>
    <li>
      {% translate "Reject all cookies" as reject_all_cookies %}
      <button class="village-btn"
              id="consent-reject-all"
              title="{{ reject_all_cookies }}">
        {% translate "Reject all" %}
      </button>
    </li>
    <li>
      {% translate "Customize cookies" as customize_cookies %}
      <button class="village-btn village-btn--secondary"
              id="consent-customize"
              data-village-opened="false"
              aria-controls="village-consent-modal"
              title="{{ customize_cookies }}">
        {% translate "Customize" %}
      </button>
    </li>
  </ul>
</div>
