<template data-orderly-template="layout" data-orderly-for="home-page">
  <orderly-page-layout primary-nav-mobile-placement="header">
    <div slot="utility" data-orderly-slot="utility"></div>
    <a slot="header" class="orderly-home-page__brand" id="brandLink" href="/">
      <span data-orderly-bind="brandLabel"></span>
    </a>
    <orderly-search-box slot="header-actions" id="homeSearch" mode="icon"></orderly-search-box>
    <orderly-basket-icon slot="header-actions" id="basketIcon"></orderly-basket-icon>
    <div slot="header-actions" data-orderly-slot="header-actions"></div>
    <orderly-navigation slot="primary-nav" id="homeNavigation" layout-desktop="horizontal" layout-mobile="burgermenu" aria-label="Hovednavigation"></orderly-navigation>
    <div slot="content-before" data-orderly-slot="content-before"></div>
    <section slot="content" class="orderly-home-page">
      <header class="orderly-home-page__intro">
        <p class="orderly-home-page__eyebrow" data-orderly-bind="eyebrow"></p>
        <h1 data-orderly-bind="title"></h1>
      </header>
      <div id="homeRails" class="orderly-home-page__rails" data-orderly-slot="rails"></div>
    </section>
    <div slot="content-after" data-orderly-slot="content-after"></div>
    <orderly-shop-footer slot="footer"></orderly-shop-footer>
    <div slot="footer" data-orderly-slot="footer"></div>
    <aside slot="overlay" class="orderly-category-page__basket-panel" id="basketPanel" hidden>
      <div class="orderly-category-page__basket-panel-header">
        <h2>Kurv</h2>
        <button id="basketClose" type="button">Luk</button>
      </div>
      <orderly-basket id="basket"></orderly-basket>
    </aside>
    <dialog slot="overlay" class="orderly-category-page__product-dialog" id="productDialog">
      <div class="orderly-category-page__product-dialog-actions">
        <div class="orderly-category-page__product-dialog-mobile-actions" aria-label="Navigation">
          <orderly-search-box id="productSearch" mode="icon"></orderly-search-box>
          <orderly-basket-icon id="productBasketIcon"></orderly-basket-icon>
        </div>
        <a class="orderly-category-page__product-dialog-expand" id="productExpand" href="/product.html" aria-label="Åbn produktside" title="Åbn produktside" hidden>
          <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true" width="20" height="20">
            <path d="M8 7H6.75A1.75 1.75 0 0 0 5 8.75v8.5c0 .97.78 1.75 1.75 1.75h8.5c.97 0 1.75-.78 1.75-1.75V16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M13 5h6v6M12 12l7-7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
        <button class="orderly-category-page__product-dialog-close" id="productClose" type="button" aria-label="Luk" title="Luk">
          <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true" width="20" height="20">
            <path d="m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z" fill="currentColor"></path>
          </svg>
        </button>
      </div>
      <orderly-product-page id="productDetail" add-label="Læg i kurven"></orderly-product-page>
    </dialog>
    <div slot="overlay" data-orderly-slot="overlay"></div>
  </orderly-page-layout>
</template>

<template data-orderly-template="layout" data-orderly-for="category-page">
  <orderly-page-layout primary-nav-desktop-placement="left" primary-nav-mobile-placement="header">
    <div slot="utility" data-orderly-slot="utility"></div>
    <a slot="header" class="orderly-category-page__brand" id="brandLink" href="/">
      <span data-orderly-bind="brandLabel"></span>
    </a>
    <orderly-search-box slot="header-actions" id="categorySearch" mode="icon" for="productGrid" data-orderly-bind="searchPlaceholder"></orderly-search-box>
    <orderly-basket-icon slot="header-actions" id="basketIcon"></orderly-basket-icon>
    <div slot="header-actions" data-orderly-slot="header-actions"></div>
    <orderly-navigation slot="primary-nav" id="categoryNavigation" layout-desktop="vertical" layout-mobile="burgermenu" aria-label="Hovednavigation"></orderly-navigation>
    <div slot="content-before" data-orderly-slot="content-before"></div>
    <orderly-collection-page slot="content" id="collectionPage">
      <template data-orderly-template="grid">
        <orderly-product-grid id="productGrid" paging="dynamic">
          <template data-orderly-template="empty">
            <p class="orderly-category-page__empty-state" data-orderly-bind="emptyLabel"></p>
          </template>
          <template data-orderly-template="product">
            <orderly-product-tile class="orderly-category-page__product-card" add-label="Læg i kurven" remove-label="Fjern fra kurven"></orderly-product-tile>
          </template>
        </orderly-product-grid>
      </template>
    </orderly-collection-page>
    <div slot="content-after" data-orderly-slot="content-after"></div>
    <orderly-shop-footer slot="footer"></orderly-shop-footer>
    <div slot="footer" data-orderly-slot="footer"></div>
    <aside slot="overlay" class="orderly-category-page__basket-panel" id="basketPanel" hidden>
      <div class="orderly-category-page__basket-panel-header">
        <h2>Kurv</h2>
        <button id="basketClose" type="button">Luk</button>
      </div>
      <orderly-basket id="basket" empty-label="Kurven er tom." continue-label="Fortsæt med at handle" quantity-label="Antal" remove-label="Fjern"></orderly-basket>
    </aside>
    <dialog slot="overlay" class="orderly-category-page__product-dialog" id="productDialog">
      <div class="orderly-category-page__product-dialog-actions">
        <div class="orderly-category-page__product-dialog-mobile-actions" aria-label="Navigation">
          <orderly-search-box id="productSearch" mode="icon" for="productGrid" data-orderly-bind="searchPlaceholder"></orderly-search-box>
          <orderly-basket-icon id="productBasketIcon"></orderly-basket-icon>
        </div>
        <a class="orderly-category-page__product-dialog-expand" id="productExpand" href="/product.html" aria-label="Åbn produktside" title="Åbn produktside" hidden>
          <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true" width="20" height="20">
            <path d="M8 7H6.75A1.75 1.75 0 0 0 5 8.75v8.5c0 .97.78 1.75 1.75 1.75h8.5c.97 0 1.75-.78 1.75-1.75V16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M13 5h6v6M12 12l7-7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
        <button class="orderly-category-page__product-dialog-close" id="productClose" type="button" aria-label="Luk" title="Luk">
          <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true" width="20" height="20">
            <path d="m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z" fill="currentColor"></path>
          </svg>
        </button>
      </div>
      <orderly-product-page id="productDetail" add-label="Læg i kurven"></orderly-product-page>
    </dialog>
    <div slot="overlay" data-orderly-slot="overlay"></div>
  </orderly-page-layout>
</template>

<template data-orderly-template="layout" data-orderly-for="product-detail-page">
  <orderly-page-layout primary-nav-mobile-placement="header">
    <div slot="utility" data-orderly-slot="utility"></div>
    <a slot="header" class="orderly-product-detail-page__brand" id="brandLink" href="/">
      <span data-orderly-bind="brandLabel"></span>
    </a>
    <orderly-basket-icon slot="header-actions" id="basketIcon"></orderly-basket-icon>
    <div slot="header-actions" data-orderly-slot="header-actions"></div>
    <orderly-navigation slot="primary-nav" id="productNavigation" layout-desktop="horizontal" layout-mobile="burgermenu" aria-label="Hovednavigation"></orderly-navigation>
    <div slot="content-before" data-orderly-slot="content-before"></div>
    <section slot="content" class="orderly-product-detail-page">
      <p class="orderly-product-detail-page__status" data-orderly-bind="status"></p>
      <section class="orderly-product-detail-page__product" id="productContainer" aria-live="polite">
        <orderly-product-page id="productDetail"></orderly-product-page>
      </section>
    </section>
    <div slot="content-after" data-orderly-slot="content-after"></div>
    <orderly-shop-footer slot="footer"></orderly-shop-footer>
    <div slot="footer" data-orderly-slot="footer"></div>
    <aside slot="overlay" class="orderly-product-detail-page__basket-panel" id="basketPanel" hidden>
      <div class="orderly-product-detail-page__basket-panel-header">
        <h2>Kurv</h2>
        <button id="basketClose" type="button">Luk</button>
      </div>
      <orderly-basket id="basket"></orderly-basket>
    </aside>
    <div slot="overlay" data-orderly-slot="overlay"></div>
  </orderly-page-layout>
</template>

<template data-orderly-template="layout" data-orderly-for="checkout-page">
  <orderly-page-layout primary-nav-mobile-placement="header">
    <div slot="utility" data-orderly-slot="utility"></div>
    <a slot="header" class="orderly-checkout-page__brand" id="brandLink" href="/">
      <span data-orderly-bind="brandLabel"></span>
    </a>
    <div slot="header-actions" data-orderly-slot="header-actions"></div>
    <orderly-navigation slot="primary-nav" id="checkoutNavigation" layout-desktop="horizontal" layout-mobile="burgermenu" aria-label="Hovednavigation"></orderly-navigation>
    <div slot="content-before" data-orderly-slot="content-before"></div>
    <section slot="content" class="orderly-checkout-page">
      <header class="orderly-checkout-page__header">
        <h1 data-orderly-bind="title"></h1>
        <p data-orderly-bind="description"></p>
      </header>
      <div class="orderly-checkout-page__grid">
        <section class="orderly-checkout-page__card" aria-labelledby="checkoutFormTitle">
          <h2 id="checkoutFormTitle" class="orderly-checkout-page__visually-hidden">Betaling</h2>
          <orderly-checkout id="checkout"></orderly-checkout>
        </section>
        <aside class="orderly-checkout-page__card orderly-checkout-page__card--summary" aria-labelledby="checkoutBasketTitle">
          <h2 id="checkoutBasketTitle" data-orderly-bind="orderTitle"></h2>
          <orderly-basket id="basket" checkout-action="hide"></orderly-basket>
        </aside>
      </div>
    </section>
    <div slot="content-after" data-orderly-slot="content-after"></div>
    <orderly-shop-footer slot="footer"></orderly-shop-footer>
    <div slot="footer" data-orderly-slot="footer"></div>
    <div slot="overlay" data-orderly-slot="overlay"></div>
  </orderly-page-layout>
</template>
