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

{# ========================================================================= #}
{# :: Private macro's #}
{# ========================================================================= #}
{% macro _summaryTitle(data) %}
  {% set level = data.titleLevel | default(2) %}
  {% if level == 3 %}
    <h3 class="m-summary__title" {% if data.ariaHidden %}aria-hidden="true"{% endif %}>{{data.title}}</h3>
  {% else %}
    <h2 class="m-summary__title" {% if data.ariaHidden %}aria-hidden="true"{% endif %}>{{data.title}}</h2>
  {% endif %}
{% endmacro %}

{% macro _visual(data) %}

<div class="m-summary__visual" {% if data.ariaHidden %}aria-hidden="true"{% endif %}>
  {% if data.image %}
    <div class="m-summary__image-container">
      <img class="m-summary__image" src="{{data.image}}" alt="{{data.name}}" title="{{data.name}}" />
    </div>
  {% elseif data.icon %}
    <span class="m-summary__icon {{data.icon}}"></span>
  {% endif %}
</div>

{% endmacro %}

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

<article class="m-summary {{classes}}">
  {% set summaryLabel = data.ariaLabel or data.title %}

  {% if data.label %}
    {{label.default("m-summary__label " + data.label.classes, {
      text: data.label.text
    })}}
  {% endif %}

  <div class="m-summary__container">

    {% if data.url or data.asButton %}
      {% if data.asButton %}
        <button
          type="button"
          class="m-summary__link {{'js-overlay-trigger' if data.overlay}}"
          {% if data.tabindex %}tabindex="{{data.tabindex}}"{% endif %}
          {% if summaryLabel %}aria-label="{{summaryLabel}}"{% endif %}
          {% if data.overlay %}data-overlay-target="{{data.overlay}}"{% endif %}
        ></button>
      {% else %}
        <a href="{{data.url}}"
          class="m-summary__link {{'js-overlay-trigger' if data.overlay}}"
          {% if data.tabindex %}tabindex="{{data.tabindex}}"{% endif %}
          {% if summaryLabel %}aria-label="{{summaryLabel}}"{% endif %}
          {% if data.overlay %}data-overlay-target="{{data.overlay}}"{% endif %}
        ></a>
      {% endif %}
    {% endif %}

    {% if data.image or data.icon %}
      {{_visual(data)}}
    {% endif %}

    <div class="m-summary__block">
      <div class="m-summary__wrapper">
        <div>
          <header class="m-summary__header">
            {{_summaryTitle(data)}}
          </header>

          <ul class="m-summary__info">
            {% for item in data.info %}

              <li class="m-summary__info-item {{item.classes}} {{'m-summary__info-item--with-copy' if data.copyButton and loop.last}}">
                <span {% if data.ariaHidden %}aria-hidden="true"{% endif %}>{{item.text}}</span>

                {% if data.copyButton and loop.last %}
                  <span class="m-summary__copy-inline">
                    <button
                      type="button"
                      class="m-summary__copy"
                      aria-label="{{data.copyButton.label}}"
                    >
                      <span class="icon-id" aria-hidden="true"></span>
                      <span class="sr-only">{{data.copyButton.label}}</span>
                    </button>
                  </span>
                {% endif %}
              </li>

            {% endfor %}
          </ul>

          {% if data.copyButton %}
            <div class="sr-only" role="status"></div>
          {% endif %}
        </div>

        {% if data.budget %}
          <div {% if data.ariaHidden %}aria-hidden="true"{% endif %}>
            {{budget.default("m-summary__budget " + data.budget.classes, {
              text: data.budget.text,
              unit: "€",
              amount: data.budget.amount
            })}}
          </div>
        {% endif %}
      </div>

      {% if data.content %}
        <div class="m-summary__content" {% if data.ariaHidden %}aria-hidden="true"{% endif %}>
          {{data.content | safe}}
        </div>
      {% endif %}
    </div>

  </div>
</article>

{% endmacro %}

{# ========================================================================= #}
{# :: Editable #}
{# ========================================================================= #}
{% macro editable(classes, data) %}

<article class="m-summary {{classes}}">
  <div class="m-summary__container">

    {% if data.url %}
      <a href="{{data.url}}"
        class="m-summary__link {{'js-overlay-trigger' if data.overlay}}"
        {% if data.tabindex %}tabindex="{{data.tabindex}}"{% endif %}
        aria-label="{{data.ariaLabel or data.title}}"
        {% if data.overlay %}data-overlay-target="{{data.overlay}}"{% endif %}
      ></a>
    {% endif %}

    {% if data.image or data.icon %}
      {{_visual(data)}}
    {% endif %}

    <div class="m-summary__block">
      <header class="m-summary__header">
        {{_summaryTitle(data)}}
      </header>

      <ul class="m-summary__info">
        {% for item in data.info %}

          <li class="m-summary__info-item {{item.classes}}">{{item.text}}</li>

        {% endfor %}
      </ul>
    </div>

    <div class="m-summary__action">
      <button
        type="button"
        class="m-summary__edit {{'js-overlay-trigger' if data.overlay}}"
        aria-label="{{data.editLabel or 'Bewerken'}}"
        {% if data.overlay %}data-overlay-target="{{data.overlay}}"{% endif %}>
      </button>
    </div>

  </div>
</article>

{% endmacro %}

{# ========================================================================= #}
{# :: Device #}
{# ========================================================================= #}
{% macro device(classes, data) %}

<article class="m-summary m-summary--contained {{classes}}">
  <div class="m-summary__container">


    {% if data.image or data.icon %}
      {{_visual(data)}}
    {% endif %}

    <div class="m-summary__block">
      <header class="m-summary__header">
        {{_summaryTitle(data)}}
      </header>

      <ul class="m-summary__info">
        {% for item in data.info %}

          <li class="m-summary__info-item {{item.classes}}">{{item.text}}</li>

        {% endfor %}
      </ul>
    </div>

    <div class="m-summary__action">
      <button
        type="button"
        class="m-summary__remove"
        aria-label="{{data.removeLabel or 'Verwijderen'}}" >
      </button>
    </div>

  </div>
</article>

{% endmacro %}

{# ========================================================================= #}
{# :: Button #}
{# ========================================================================= #}
{% macro button(classes, data) %}

<a href="" class="m-summary m-summary--button {{classes}}">
  <div class="m-summary__container">
    {% if data.iconFront %}
       {{icon.default("a-icon--3x-large m-summary__icon", {
          name: data.iconFront
        })}}
    {% endif %}

    <div class="m-summary__block">
      <header class="m-summary__header">
        {{_summaryTitle(data)}}
      </header>

      {% if data.iconBack %}
        {{icon.default("a-icon--2x-large m-summary__action", {
            name: data.iconBack
          })}}
      {% endif %}
    </div>

  </div>
</a>

{% endmacro %}