<div id="cookie-consent-wrapper">
  <div class="fixed inset-0 z-50 bg-black opacity-75"></div>
  <div id="cookie-banner"
       role="dialog"
       aria-label="Cookie consent"
       class="fixed bottom-0 left-0 right-0 z-[60] bg-base-100 border-t-2 border-base-300 shadow-2xl px-6 py-5 flex flex-col sm:flex-row items-start sm:items-center gap-4">
    <p class="text-sm flex-1 ds-text">
      {{ message }}
      <a href="{{ policy_href }}" class="underline ds-text">{{ policy_link }}</a>
      {{ policy_suffix }}
    </p>
    <div class="flex items-center gap-2 shrink-0">
      <a href="{{ policy_href }}" class="btn btn-ghost btn-sm rounded-full ds-text no-underline">{{ manage_label }}</a>
      <button type="button"
              hx-post="{{ endpoint }}"
              hx-vals='{"level":"essential"}'
              hx-target="#cookie-consent-wrapper"
              hx-swap="outerHTML"
              class="btn btn-ghost btn-sm rounded-full ds-text">{{ reject_label }}</button>
      <button type="button"
              hx-post="{{ endpoint }}"
              hx-vals='{"level":"all"}'
              hx-target="#cookie-consent-wrapper"
              hx-swap="outerHTML"
              class="btn btn-neutral btn-sm rounded-full">{{ accept_label }}</button>
    </div>
  </div>
</div>
