{% set modal_id = 'fr-consent-modal' %}

<div{{ attributes.addClass('fr-consent-banner') }}>
  {% if title %}<h4 class="fr-h6 fr-mb-3v">{{ title }}</h4>{% endif %}
  <div class="fr-consent-banner__content">
    <p class="fr-text--sm">{{ content }}</p>
  </div>
  {% set buttons = [
    pattern('button', {label: 'Accept all'|t,
      attributes: {title: 'Accept all cookies'|t}
    }),
    pattern('button', {label: 'Refuse all'|t,
      attributes: {title: 'Refuse all cookies'|t}
    }),
    pattern('button', {label: 'Personalize'|t,
      attributes:
      {'data-fr-opened': 'false', 'aria-controls': modal_id, title: 'Personalize cookies'|t}
    }, 'secondary')
  ] %}
  {{ pattern('button_group', {
    attributes: {class: ['fr-consent-banner__buttons', 'fr-btns-group--inline-sm']},
    buttons: buttons
  }, 'inline__inline_reverse__right') }}
</div>

{{ pattern('modal', {
  modal_id: modal_id,
  title: modal_title,
  body: pattern('consent_manager', {
    title: modal_text,
    services: services
  })
}) }}
