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

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

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

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
<section class="l-section p-settings__tabs">
  <div class="l-container">
    <div class="l-content">
      <h2 class="l-content__item u-visual-h4">Hoofdapparaat</h2>
      {{summary.device("l-content__item", {
        image: "/assets/general/img/logos/logo-apple.svg",
        title: "Iphone 7 van Jan",
        info: [
          { text: "Registered: 12-04-2019 18:33"},
          { text: "Last login: 12-04-2019 18:33" }
        ]
      })}}
      <h2 class="l-content__item u-visual-h4">Secundair apparaat</h2>
      {{summary.device("l-content__item", {
        image: "/assets/general/img/logos/logo-android.svg",
        title: "Huawei P20 van Eline",
        info: [
          { text: "Registered: 12-04-2019 18:33"},
          { text: "Last login: 12-04-2019 18:33" }
        ]
      })}}
      {{button.default("a-button--outline a-button--mobile-wide l-content__item", {
        text: "Instellen als hoofdapparaat"
      })}}
      <p class="l-content__item">
        <em>Je ontvangt voortaan alle bevestigingscodes op dit scherm.</em>
      </p>
    </div>
  </div>
</section>