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

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

{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro primary(classes, data) %}

<header class="o-header {{classes}}">
  {% set hasTitle = data and data.title %}
  <div class="o-header__container l-container {{'o-header__container--no-title' if not hasTitle}}">
    {% if hasTitle %}
      <h1 class="o-header__title" tabindex="0">{{data.title}}</h1>
    {% endif %}

    <div class="o-header__right-actions">
      {{button.default("a-button--ghost icon-turn-off a-button--icon-after", {
        text: "Uitloggen"
      })}}
    </div>
  </div>
</header>

{% endmacro %}

{# ========================================================================= #}
{# :: Detail #}
{# ========================================================================= #}
{% macro detail(classes, data) %}

<header class="o-header o-header--detail {{classes}}">
  <div class="o-header__container l-container">

    {{iconButton.default("", {
      icon: "icon-chevron-left"
    })}}

    <div class="o-header__content">
      {% if data.title %}
        <h1 class="o-header__title">{{data.title}}</h1>
      {% endif %}

      {% if data.subtitle %}
        <small class="o-header__subtitle">{{data.subtitle}}</small>
      {% endif %}
    </div>

    <div class="o-header__right-actions">
      {{data.actions | safe}}
    </div>

  </div>
</header>

{% endmacro %}

{# ========================================================================= #}
{# :: Overlay #}
{# ========================================================================= #}
{% macro overlay(classes, data) %}

<header class="o-header o-header--overlay {{classes}}">
  <div class="o-header__container l-container">

    {{iconButton.default("u-tablet-show " + data.icon, {
      icon: "icon-chevron-left"
    })}}

    {{iconButton.default("u-tablet-hide " + data.icon, {
      overlay: data.overlay,
      icon: "icon-cross"
    })}}

    {% if data.title %}
      <h2 class="o-header__title">{{data.title}}</h2>
    {% endif %}

    <div class="o-header__right-actions">
      {{data.actions}}
    </div>

  </div>
</header>

{% endmacro %}