{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{# atoms #}
{% import "styleguides/general/atoms/sort-button/sort-button-macros.njk" as sortButton %}
{% import "styleguides/general/atoms/budget/budget-macros.njk" as budget %}
{% import "styleguides/general/atoms/time/time-macros.njk" as time %}
{% import "styleguides/general/atoms/button/button-macros.njk" as button %}

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

{# ========================================================================= #}
{# :: Table #}
{# ========================================================================= #}
{% macro table(classes, data) %}

<div class="o-interest-overview l-table {{classes}}">

  <div class="o-interest-overview__header l-table__header u-tablet-hide">
    <div class="l-table__row">
      <div class="l-table__col l-table__col--3-12 u-desktop-hide">
        {{sortButton.default("", {
          text: "Datum afrekening"
        })}}
      </div>

      <div class="l-table__col l-table__col--3-12">
        {{sortButton.default("", {
          text: "Bedr. v. interesten"
        })}}
      </div>

      <div class="l-table__col l-table__col--4-12">
        {{sortButton.default("", {
          text: "Aangerek. rekening"
        })}}
      </div>

      <div class="o-interest-overview__action l-table__col l-table__col--2-12">
        {{sortButton.default("", {
          text: "Actie"
        })}}
      </div>
    </div>
  </div>

  <div class="o-interest-overview__content l-table__body">

    {% for i in range(0, 8) %}

      <div class="o-interest-overview__item l-table__row">
        <div class="l-table__col l-table__col--3-12 u-desktop-hide">
          {{time.default("", {
            text: "01-10-2018",
            format: "2018-10-01"
          })}}
        </div>

        <div class="l-table__col l-table__col--3-12 u-tablet-hide">
          {{budget.default("", {
            unit: "€",
            amount: "2,20"
          })}}
        </div>

        <div class="o-interest-overview__summary l-table__col l-table__col--4-12">
          {{summary.default("", {
            url: "#",
            image: "/assets/general/img/logos/logo-nibc.png",
            title: "Dhr.Bogaerts",
            info: [
              { text: "BE96 5120 0240 4605", classes: "m-summary__info-item--uppercase" },
              { text: "01-10-2018", classes: "m-summary__info-item--uppercase u-desktop-show" },
              { text: "Bedr. v. interesten: € 2,20", classes: "m-summary__info-item--uppercase u-tablet-show" }
            ]
          })}}
        </div>

        <div class="o-interest-overview__action l-table__col l-table__col--2-12">
          {{button.default("a-button--ghost a-button--theme-grey icon-download u-desktop-hide", {
            text: "Download"
          })}}

          {{button.default("a-button--ghost a-button--icon a-button--theme-grey icon-download u-desktop-show")}}
        </div>
      </div>

    {% endfor %}
  </div>

</div>

{% endmacro %}