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

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

{# ========================================================================= #}
{# :: Settings #}
{# ========================================================================= #}
{% set state %}
  {{"is-open" if pageParams.activeOverlay == "overlay-message-detail"}}
{% endset %}

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

<div class="p-notifications-detail">
  {{header.overlay("", {
    overlay: "overlay-message-detail",
    title: "Wat verandert er voor uw producten?",
    actions: button.default("a-button--ghost a-button--theme-black a-button--icon icon-trash u-tablet-show")
  })}}

  <section class="p-notifications-detail__content l-section">
    <div class="l-container">

      <header class="l-section__header l-section__header--spacing-small">
        <small class="l-section__sub-title l-section__sub-title--grey">10-01-2019</small>
      </header>

      <div class="l-section__content l-content">
        <p class="l-content__item">
          Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.
          Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus
          posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus
          eget urna mollis ornare vel eu leo.
        </p>

        {{downloadButton.default("l-content__item", {
          icon: "icon-file-pdf",
          text: "informatie.pdf"
        })}}
      </div>
    </div>
  </section>
</div>

{% endset %}

{# ========================================================================= #}
{# :: Overlay - footer #}
{# ========================================================================= #}
{% set footer %}
  <div class="l-container">
    {{button.link("a-button--outline a-button--fill-space a-button--secondary icon-trash", {
      text: "Verwijderen"
    })}}
  </div>
{% endset %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
{{overlay.default(
  "js-overlay o-overlay--right " + state,
  {
    hasBackground: true,
    id: "overlay-message-detail",
    content: content,
    footer: footer,
    footerClasses: "u-tablet-hide"
  }
)}}