{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{# atoms #}
{% import "styleguides/general/atoms/icon-button/icon-button-macros.njk" as iconButton %}

{# molecules #}
{% import "styleguides/general/molecules/feedback/feedback-macros.njk" as feedback %}

{# organisms #}
{% import "styleguides/general/organisms/overlay/overlay-macros.njk" as overlay %}

{# ========================================================================= #}
{# :: Settings #}
{# ========================================================================= #}
{% set state %}
  {{"is-open" if pageParams.activeOverlay and "overlay-overbooking-warning" in pageParams.activeOverlay }}
{% endset %}

{# ========================================================================= #}
{# :: Overlay - content #}
{# ========================================================================= #}
{% set content %}

<div class="p-transaction-feedback">
  {{iconButton.default("p-transaction-feedback__close a-icon-button--inverted", {
    overlay: "overlay-overbooking-warning-desktop overlay-overbooking-warning-mobile",
    icon: "icon-cross"
  })}}

  {{feedback.warning("", {
    title: "Sorry",
    text: "We couldn't download your report."
  })}}
</div>

{% endset %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
{{overlay.default(
  "o-overlay--center u-tablet-hide js-overlay " + state,
  {
    hasBackground: true,
    id: "overlay-overbooking-warning-desktop",
    overlay: "overlay-overbooking-warning-mobile",
    content: content
  }
)}}

{{overlay.default(
  "o-overlay--full-width u-tablet-show js-overlay " + state,
  {
    hasBackground: true,
    id: "overlay-overbooking-warning-mobile",
    overlay: "overlay-overbooking-warning-desktop",
    content: content
  }
)}}