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

{# molecules #}
{% import "styleguides/general/molecules/show-more/show-more-macros.njk" as showMore %}
{% import "styleguides/general/molecules/button-group/button-group-macros.njk" as buttonGroup %}

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

{# ========================================================================= #}
{# :: Transactions - content #}
{# ========================================================================= #}
{% set desktopContent %}        
  <section class="l-section">
    <div class="l-container">
      <header class="l-section__header l-section__header--with-action">
        <h2 class="l-section__header-title"><span>Alle transacties</span></h2>

        <div class="l-section__header-actions">
          {{buttonGroup.default("", {
            items: [
              button.default(
                "a-button--ghost a-button--theme-grey icon-search",
                { overlay: "overlay-search-transactions-filters", text: "Zoeken" }
              ),
              button.default(
                "a-button--ghost a-button--theme-grey icon-download",
                { overlay: "overlay-download-statement-desktop overlay-download-statement-mobile", text: "Downloaden" }
              )
            ]
          })}}
        </div>
      </header>

      <div class="l-section__content l-content">
        {{transactions.table("l-content__item", {
          overlay: "overlay-transaction-detail-desktop overlay-transaction-detail-mobile"
        })}}
      </div>

      <div class="l-section__footer l-section__footer--center">
        {{button.link("a-button--outline", {
          text: "Toon meer transacties"
        })}}
      </div>
    </div>
  </section>
{% endset %}

{% set mobileContent %}        
  <section class="l-section">
    <div class="l-container">
      <header class="l-section__header l-section__header--with-action">
        <h2 class="l-section__header-title"><span>Alle transacties</span></h2>

        <div class="l-section__header-actions">
          {{buttonGroup.default("", {
            items: [
              button.default(
                "a-button--ghost a-button--theme-black a-button--icon icon-search",
                { overlay: "overlay-search-transactions-filters" }
              ),
              button.default(
                "a-button--ghost a-button--theme-black a-button--icon icon-download",
                { overlay: "overlay-download-statement-desktop overlay-download-statement-mobile" }
              )
            ]
          })}}
        </div>
      </header>

      <div class="l-section__content flex flex-col gap-0-5">
        {{toggle.default("a-toggle--white a-toggle--fill-space a-toggle--small", {
          name: "content-toggle",
          id: "afschrijvingen",
          value: "afschrijvingen",
          text: "Bij- en afschrijvingen",
          isChecked: true
        })}}

        {{toggle.default("a-toggle--white a-toggle--fill-space a-toggle--small", {
          name: "content-toggle",
          id: "overboekingen",
          value: "overboekingen",
          text: "Geplande overboekingen",
          isChecked: false
        })}}
      </div>

      <div class="l-section__content l-content">
        {{transactions.table("l-content__item", {
          overlay: "overlay-transaction-detail-desktop overlay-transaction-detail-mobile"
        })}}
      </div>

      <div class="l-section__footer l-section__footer--center">
        {{button.link("a-button--outline", {
          text: "Toon meer transacties"
        })}}
      </div>
    </div>
  </section>
{% endset %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
<div class="u-tablet-show">
  {{mobileContent|safe}}
</div>

{{tabs.default("u-tablet-hide o-tabs--no-spacing", {
  items: [
    { name: "Bij- en afschrijvingen", classes: "is-active" },
    { name: "Geplande overboekingen", classes: "" }
  ],
  content: desktopContent
})}}