{# ============================================================
   APEP Macro Showcase - Part 1
   breadcrumb, btn, checkbox, date_picker, download_btn,
   dropdown, faq, faq_list, file_upload, footer_nav,
   header_banner, hero_btn, image, image_gallery, logo_scroller, nav
   ============================================================ #}

<style>
  .sc-section {
    margin-top: 3rem;
    border-top: 2px solid var(--color-border-strong, #ccc);
    padding-top: 1rem;
  }

  .sc-section-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    font-family: monospace;
    color: var(--color-text, #333);
  }

  .sc-section-desc {
    font-size: 0.8rem;
    color: var(--color-text-muted, #666);
    margin: 0 0 1rem;
    font-family: monospace;
  }

  .sc-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
  }

  .sc-box {
    background: var(--color-bg-elevated, #fff);
    border: 1px solid var(--color-border, #ddd);
    border-radius: 6px;
    padding: 1rem;
  }

  .sc-box-label {
    font-size: 0.7rem;
    font-family: monospace;
    color: var(--color-text-muted, #888);
    margin: 0 0 0.6rem;
    border-bottom: 1px solid var(--color-border, #eee);
    padding-bottom: 0.4rem;
  }

  .sc-flex-row  { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
  .sc-list      { font-size: 0.8rem; margin: 0; padding-left: 1.2rem; color: var(--color-text, #333); }
  .sc-note      { font-size: 0.75rem; color: var(--color-text-muted, #888); margin: 0.5rem 0 0; }

  .sc-w-sm   { width: 280px; }
  .sc-w-md   { width: 400px; }
  .sc-w-lg   { width: 600px; }
  .sc-w-xl   { width: 780px; }
  .sc-w-full { width: 100%; }

  .sc-tall   { min-height: 300px; }
  .sc-xtall  { min-height: 460px; }
</style>


{# ================================================================
   1. breadcrumb
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">breadcrumb</p>
  <p class="sc-section-desc">breadcrumb(items, separator="/")</p>
  <div class="sc-grid">

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">default separator "/"</p>
      {{ apep.macros.breadcrumb([
        {"label": "Home",    "url": "/"},
        {"label": "Blog",    "url": "/blog"},
        {"label": "Article"}
      ]) }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">separator "›"</p>
      {{ apep.macros.breadcrumb([
        {"label": "Home",     "url": "/"},
        {"label": "Products", "url": "/products"},
        {"label": "Widget"}
      ], separator="›") }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">two levels only</p>
      {{ apep.macros.breadcrumb([
        {"label": "Home", "url": "/"},
        {"label": "Contact"}
      ]) }}
    </div>

    <div class="sc-box sc-w-lg">
      <p class="sc-box-label">deep path + separator "»"</p>
      {{ apep.macros.breadcrumb([
        {"label": "Home",   "url": "/"},
        {"label": "Docs",   "url": "/docs"},
        {"label": "API",    "url": "/docs/api"},
        {"label": "Macros", "url": "/docs/api/macros"},
        {"label": "breadcrumb"}
      ], separator="»") }}
    </div>

  </div>
</section>


{# ================================================================
   2. btn
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">btn</p>
  <p class="sc-section-desc">btn(label, variant, size, url, disabled)</p>
  <div class="sc-grid">

    <div class="sc-box">
      <p class="sc-box-label">all variants - md</p>
      <div class="sc-flex-row">
        {{ apep.macros.btn("Primary",   variant="primary") }}
        {{ apep.macros.btn("Secondary", variant="secondary") }}
        {{ apep.macros.btn("Ghost",     variant="ghost") }}
        {{ apep.macros.btn("Danger",    variant="danger") }}
      </div>
    </div>

    <div class="sc-box">
      <p class="sc-box-label">primary - sm / md / lg</p>
      <div class="sc-flex-row">
        {{ apep.macros.btn("Small",  variant="primary", size="sm") }}
        {{ apep.macros.btn("Medium", variant="primary", size="md") }}
        {{ apep.macros.btn("Large",  variant="primary", size="lg") }}
      </div>
    </div>

    <div class="sc-box">
      <p class="sc-box-label">as anchor (url set)</p>
      {{ apep.macros.btn("Visit Docs", variant="secondary", url="/docs") }}
    </div>

    <div class="sc-box">
      <p class="sc-box-label">disabled states</p>
      <div class="sc-flex-row">
        {{ apep.macros.btn("Disabled Primary",  variant="primary",  disabled=True) }}
        {{ apep.macros.btn("Disabled Ghost",    variant="ghost",    disabled=True) }}
        {{ apep.macros.btn("Disabled Danger",   variant="danger",   disabled=True) }}
      </div>
    </div>

  </div>
</section>


{# ================================================================
   3. checkbox
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">checkbox</p>
  <p class="sc-section-desc">checkbox(name, options, hidden_name)</p>
  <div class="sc-grid">

    <div class="sc-box sc-w-sm">
      <p class="sc-box-label">basic - none checked</p>
      {{ apep.macros.checkbox("fruits", [
        {"label": "Apple"},
        {"label": "Banana"},
        {"label": "Cherry"}
      ]) }}
    </div>

    <div class="sc-box sc-w-sm">
      <p class="sc-box-label">pre-checked items</p>
      {{ apep.macros.checkbox("langs", [
        {"label": "Python",     "checked": True},
        {"label": "JavaScript", "checked": False},
        {"label": "Rust",       "checked": True}
      ]) }}
    </div>

    <div class="sc-box sc-w-sm">
      <p class="sc-box-label">with hidden_name</p>
      {{ apep.macros.checkbox("colors", [
        {"label": "Red",   "value": "red"},
        {"label": "Green", "value": "green"},
        {"label": "Blue",  "value": "blue", "checked": True}
      ], hidden_name="colors_csv") }}
    </div>

    <div class="sc-box sc-w-sm">
      <p class="sc-box-label">label ≠ value pairs</p>
      {{ apep.macros.checkbox("roles", [
        {"label": "Administrator", "value": "admin"},
        {"label": "Editor",        "value": "edit", "checked": True},
        {"label": "Viewer",        "value": "view"}
      ]) }}
    </div>

  </div>
</section>


{# ================================================================
   4. date_picker
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">date_picker</p>
  <p class="sc-section-desc">date_picker(name, id, format, display, value, required, min_date, max_date, placeholder)</p>
  <div class="sc-grid">

    <div class="sc-box sc-w-md sc-xtall">
      <p class="sc-box-label">default format yyyy.mm.dd</p>
      {{ apep.macros.date_picker(name="birth_date") }}
    </div>

    <div class="sc-box sc-w-md sc-xtall">
      <p class="sc-box-label">prefilled value</p>
      {{ apep.macros.date_picker(name="start_date", value="2025.06.01") }}
    </div>

    <div class="sc-box sc-w-md sc-xtall">
      <p class="sc-box-label">required + custom placeholder</p>
      {{ apep.macros.date_picker(name="deadline", required=True, placeholder="Pick a deadline") }}
    </div>

    <div class="sc-box sc-w-md sc-xtall">
      <p class="sc-box-label">min/max range</p>
      {{ apep.macros.date_picker(name="booking", min_date="2025.01.01", max_date="2025.12.31") }}
    </div>

  </div>
</section>


{# ================================================================
   5. download_btn
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">download_btn</p>
  <p class="sc-section-desc">download_btn(label, file_path, variant)</p>
  <div class="sc-grid">

    <div class="sc-box">
      <p class="sc-box-label">variant="default"</p>
      {{ apep.macros.download_btn("Download Report", "report_q3.pdf") }}
    </div>

    <div class="sc-box">
      <p class="sc-box-label">variant="icon"</p>
      {{ apep.macros.download_btn("Download CSV", "data.csv", variant="icon") }}
    </div>

    <div class="sc-box">
      <p class="sc-box-label">variant="minimal"</p>
      {{ apep.macros.download_btn("Download Slides", "slides.pptx", variant="minimal") }}
    </div>

  </div>
</section>


{# ================================================================
   6. dropdown
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">dropdown</p>
  <p class="sc-section-desc">dropdown(name, label, options, selected, required)</p>
  <div class="sc-grid">

    <div class="sc-box sc-w-sm">
      <p class="sc-box-label">basic</p>
      {{ apep.macros.dropdown("country", "Country", [
        {"label": "Germany"},
        {"label": "France"},
        {"label": "Spain"}
      ]) }}
    </div>

    <div class="sc-box sc-w-sm">
      <p class="sc-box-label">pre-selected</p>
      {{ apep.macros.dropdown("size", "Size", [
        {"label": "Small",  "value": "s"},
        {"label": "Medium", "value": "m"},
        {"label": "Large",  "value": "l"}
      ], selected="m") }}
    </div>

    <div class="sc-box sc-w-sm">
      <p class="sc-box-label">required</p>
      {{ apep.macros.dropdown("plan", "Subscription Plan", [
        {"label": "Free",       "value": "free"},
        {"label": "Pro",        "value": "pro"},
        {"label": "Enterprise", "value": "ent"}
      ], required=True) }}
    </div>

  </div>
</section>


{# ================================================================
   7. faq (single item)
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">faq</p>
  <p class="sc-section-desc">faq(question, answer, open)</p>
  <div class="sc-grid">

    <div class="sc-box sc-w-lg">
      <p class="sc-box-label">closed (default)</p>
      {{ apep.macros.faq(
        "What is APEP?",
        "APEP is a macro-driven component system for Jinja2 templates."
      ) }}
    </div>

    <div class="sc-box sc-w-lg">
      <p class="sc-box-label">open=True</p>
      {{ apep.macros.faq(
        "Why use macros instead of components?",
        "Macros keep logic server-side. No client-side JS is needed for rendering.",
        open=True
      ) }}
    </div>

    <div class="sc-box sc-w-lg">
      <p class="sc-box-label">HTML in answer</p>
      {{ apep.macros.faq(
        "How do I pass HTML inside an answer?",
        "<p>The answer param supports raw HTML.</p><ul><li>Lists work</li><li>Links work</li></ul>"
      ) }}
    </div>

  </div>
</section>


{# ================================================================
   8. faq_list
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">faq_list</p>
  <p class="sc-section-desc">faq_list(items, open_all)</p>
  <div class="sc-grid">

    <div class="sc-box sc-w-lg">
      <p class="sc-box-label">all closed (default)</p>
      {{ apep.macros.faq_list([
        {"question": "Is Jinja2 server-side?",   "answer": "Yes, it renders on the server."},
        {"question": "Does APEP require Python?", "answer": "Yes, via Flask or similar backends."},
        {"question": "Can I extend macros?",      "answer": "Not directly, but you can compose them."}
      ]) }}
    </div>

    <div class="sc-box sc-w-lg">
      <p class="sc-box-label">open_all=True</p>
      {{ apep.macros.faq_list([
        {"question": "What does open_all do?",  "answer": "It expands every item on page load."},
        {"question": "Can I still close them?", "answer": "Yes, via the toggle button per item."}
      ], open_all=True) }}
    </div>

    <div class="sc-box sc-w-lg">
      <p class="sc-box-label">individual open states mixed</p>
      {{ apep.macros.faq_list([
        {"question": "First - starts open",    "answer": "This one starts open.",      "open": True},
        {"question": "Second - starts closed", "answer": "This one starts closed."},
        {"question": "Third - starts open",    "answer": "This one also starts open.", "open": True}
      ]) }}
    </div>

  </div>
</section>


{# ================================================================
   9. file_upload
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">file_upload</p>
  <p class="sc-section-desc">file_upload(name, label, url, mode, accept, multiple, max_size, required, hint)</p>
  <div class="sc-grid">

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">mode="direct"</p>
      {{ apep.macros.file_upload("avatar", "Profile Picture", url="/upload/avatar") }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">mode="cache"</p>
      {{ apep.macros.file_upload("attachment", "Attachment", mode="cache") }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">accept + multiple + required + hint</p>
      {{ apep.macros.file_upload(
        "docs", "Supporting Documents",
        url="/upload/docs",
        accept=".pdf,.docx",
        multiple=True,
        required=True,
        hint="Max 3 files. PDF or DOCX only."
      ) }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">images only + max_size</p>
      {{ apep.macros.file_upload(
        "gallery_img", "Gallery Image",
        url="/upload/gallery",
        accept="image/*",
        max_size=5242880
      ) }}
    </div>

  </div>
</section>


{# ================================================================
   10. footer_nav
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">footer_nav</p>
  <p class="sc-section-desc">footer_nav(links, variant)</p>
  <div class="sc-grid">

    <div class="sc-box sc-w-xl">
      <p class="sc-box-label">variant="blocks" - grouped columns</p>
      {{ apep.macros.footer_nav({
        "Company": {"About": "/about", "Careers": "/careers", "Press": "/press"},
        "Product": {"Features": "/features", "Pricing": "/pricing", "Changelog": "/changelog"},
        "Support": {"Docs": "/docs", "Status": "/status", "Contact": "/contact"}
      }) }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">variant="blocks" - Mixed with title and none)</p>
      {{ apep.macros.footer_nav({
        "Imprint": "/imprint",
        "GDPR": {"Privacy": "/privacy"},
        "Terms":   "/terms"
      }) }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">variant="inline"</p>
      {{ apep.macros.footer_nav({
        "Imprint": "/imprint",
        "Privacy": "/privacy",
        "Terms":   "/terms",
        "Cookies": "/cookies"
      }, variant="inline") }}
    </div>

  </div>
</section>


{# ================================================================
   11. header_banner
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">header_banner</p>
  <p class="sc-section-desc">header_banner(company_name, subtitle, url)</p>
  <div class="sc-grid">

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">name only</p>
      {{ apep.macros.header_banner("APEP") }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">name + subtitle</p>
      {{ apep.macros.header_banner("APEP", subtitle="Component Library") }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">linked (url set)</p>
      {{ apep.macros.header_banner("APEP", subtitle="Go to homepage", url="/") }}
    </div>

  </div>
</section>


{# ================================================================
   12. hero_btn
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">hero_btn</p>
  <p class="sc-section-desc">hero_btn(label, url, subtitle, variant)</p>
  <div class="sc-grid">

    <div class="sc-box">
      <p class="sc-box-label">variant="primary"</p>
      {{ apep.macros.hero_btn("Get Started", url="/signup") }}
    </div>

    <div class="sc-box">
      <p class="sc-box-label">variant="secondary"</p>
      {{ apep.macros.hero_btn("Learn More", url="/docs", variant="secondary") }}
    </div>

    <div class="sc-box">
      <p class="sc-box-label">primary + subtitle</p>
      {{ apep.macros.hero_btn("Start Free Trial", url="/trial", subtitle="No credit card required") }}
    </div>

    <div class="sc-box">
      <p class="sc-box-label">secondary + subtitle</p>
      {{ apep.macros.hero_btn("Watch Demo", url="/demo", variant="secondary", subtitle="3-minute overview") }}
    </div>

  </div>
</section>


{# ================================================================
   13. image
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">image</p>
  <p class="sc-section-desc">image(src, alt, url, on_click, protected, width, height, downloadable)</p>
  <div class="sc-grid">

    <div class="sc-box">
      <p class="sc-box-label">basic path - protected=True (default)</p>
      {{ apep.macros.image("/apep-static/images/examples/unsplash1.svg", alt="Sample landscape", width="280px", height="180px") }}
    </div>

    <div class="sc-box">
      <p class="sc-box-label">linked - protected=False</p>
      {{ apep.macros.image("/apep-static/images/examples/unsplash2.svg", alt="Linked image", url="https://example.com", protected=False, width="280px", height="180px") }}
    </div>

    <div class="sc-box">
      <p class="sc-box-label">downloadable=True</p>
      {{ apep.macros.image("/apep-static/images/examples/unsplash3.svg", alt="Downloadable image", downloadable=True, width="280px", height="180px") }}
    </div>

    <div class="sc-box">
      <p class="sc-box-label">inline SVG src</p>
      {% set _svg_demo %}
      <svg width="280" height="180" viewBox="0 0 280 180" xmlns="http://www.w3.org/2000/svg">
        <rect width="280" height="180" rx="8" fill="#3b82f6"/>
        <circle cx="140" cy="90" r="55" fill="#fff" opacity="0.2"/>
        <text x="140" y="96" text-anchor="middle" fill="#fff" font-size="18" font-family="sans-serif" font-weight="bold">inline SVG</text>
      </svg>
      {% endset %}
      {{ apep.macros.image(_svg_demo, alt="Demo SVG", downloadable=True) }}
    </div>

    <div class="sc-box">
      <p class="sc-box-label">raw &lt;img&gt; tag as src</p>
      {{ apep.macros.image('<img src="/apep-static/images/examples/unsplash4.svg" width="280" height="180" style="object-fit:cover;">', alt="Raw img tag") }}
    </div>

  </div>
</section>


{# ================================================================
   14. image_gallery
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">image_gallery</p>
  <p class="sc-section-desc">image_gallery(images, downloadable)</p>

  <div class="sc-box sc-w-full" style="margin-bottom: 1rem;">
    <p class="sc-box-label">9 images - downloadable=False - mix of short, long and missing captions - click to open overlay</p>
    {{ apep.macros.image_gallery([
      {"src": "/apep-static/images/examples/unsplash1.svg", "alt": "Landscape 1", "caption": "Mountain at dawn"},
      {"src": "/apep-static/images/examples/unsplash2.svg", "alt": "Landscape 2", "caption": "Forest path in autumn - taken during a three-day hiking trip through the Bavarian Alps, early October, just after sunrise when the mist was still sitting in the valley below"},
      {"src": "/apep-static/images/examples/unsplash3.svg", "alt": "Landscape 3", "caption": "Ocean view"},
      {"src": "/apep-static/images/examples/unsplash4.svg", "alt": "Landscape 4"},
      {"src": "/apep-static/images/examples/unsplash5.svg", "alt": "Landscape 5", "caption": "Desert dunes - this shot required waking up at 4am, driving two hours into the Sahara, and waiting another hour for the light to hit the sand at exactly the right angle. Completely worth it."},
      {"src": "/apep-static/images/examples/unsplash6.svg", "alt": "Landscape 6", "caption": "Frozen lake"},
      {"src": "/apep-static/images/examples/unsplash7.svg", "alt": "Landscape 7"},
      {"src": "/apep-static/images/examples/unsplash8.svg", "alt": "Landscape 8", "caption": "Coastal cliffs"},
      {"src": "/apep-static/images/examples/unsplash9.svg", "alt": "Landscape 9", "caption": "Night sky - Milky Way core visible, 25 second exposure at f/2.8, ISO 3200. No editing beyond white balance correction."}
    ]) }}
  </div>

  <div class="sc-box sc-w-full" style="margin-bottom: 1rem;">
    <p class="sc-box-label">9 images - downloadable=True - mix of path + inline SVG</p>
    {% set _gallery_svg_1 %}
    <svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
      <rect width="400" height="300" fill="#6366f1"/>
      <circle cx="200" cy="130" r="70" fill="#fff" opacity="0.15"/>
      <text x="200" y="135" text-anchor="middle" fill="#fff" font-size="22" font-family="sans-serif" font-weight="bold">Inline A</text>
      <text x="200" y="165" text-anchor="middle" fill="#fff" font-size="13" font-family="sans-serif" opacity="0.8">SVG from template</text>
    </svg>
    {% endset %}
    {% set _gallery_svg_2 %}
    <svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
      <rect width="400" height="300" fill="#f59e0b"/>
      <polygon points="200,60 340,240 60,240" fill="#fff" opacity="0.2"/>
      <text x="200" y="175" text-anchor="middle" fill="#fff" font-size="22" font-family="sans-serif" font-weight="bold">Inline B</text>
    </svg>
    {% endset %}
    {% set _gallery_svg_3 %}
    <svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
      <rect width="400" height="300" fill="#10b981"/>
      <rect x="80" y="80" width="240" height="140" rx="12" fill="#fff" opacity="0.15"/>
      <text x="200" y="158" text-anchor="middle" fill="#fff" font-size="22" font-family="sans-serif" font-weight="bold">Inline C</text>
    </svg>
    {% endset %}
    {{ apep.macros.image_gallery([
      {"src": "/apep-static/images/examples/unsplash1.svg", "alt": "Download 1", "caption": "Waterfall"},
      {"src": "/apep-static/images/examples/unsplash2.svg", "alt": "Download 2", "caption": "Summit view - an extremely long caption to test how the overlay handles text that goes well beyond a single line, potentially wrapping across multiple rows in the lightbox caption area"},
      {"src": "/apep-static/images/examples/unsplash3.svg", "alt": "Download 3", "caption": "City lights"},
      {"src": "/apep-static/images/examples/unsplash4.svg", "alt": "Download 4"},
      {"src": "/apep-static/images/examples/unsplash5.svg", "alt": "Download 5", "caption": "River delta"},
      {"src": _gallery_svg_1, "alt": "Inline SVG A", "caption": "Generated inline - this SVG was constructed directly in the Jinja2 template using a set block, no file required"},
      {"src": _gallery_svg_2, "alt": "Inline SVG B"},
      {"src": _gallery_svg_3, "alt": "Inline SVG C", "caption": "Also inline"},
      {"src": "/apep-static/images/examples/unsplash6.svg", "alt": "Download 9", "caption": "Glacier"}
    ], downloadable=True) }}
  </div>

</section>


{# ================================================================
   15. logo_scroller
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">logo_scroller</p>
  <p class="sc-section-desc">logo_scroller(logos, speed, logo_height, width, height)</p>

  <div class="sc-box sc-w-full" style="margin-bottom:1rem;">
    <p class="sc-box-label">default speed=30, logo_height=40 - 9 logos</p>
    {{ apep.macros.logo_scroller([
      {"src": "/apep-static/images/examples/unsplash1.svg", "alt": "Partner A"},
      {"src": "/apep-static/images/examples/unsplash2.svg", "alt": "Partner B"},
      {"src": "/apep-static/images/examples/unsplash3.svg", "alt": "Partner C"},
      {"src": "/apep-static/images/examples/unsplash4.svg", "alt": "Partner D"},
      {"src": "/apep-static/images/examples/unsplash5.svg", "alt": "Partner E"},
      {"src": "/apep-static/images/examples/unsplash6.svg", "alt": "Partner F"},
      {"src": "/apep-static/images/examples/unsplash7.svg", "alt": "Partner G"},
      {"src": "/apep-static/images/examples/unsplash8.svg", "alt": "Partner H"},
      {"src": "/apep-static/images/examples/unsplash9.svg", "alt": "Partner I"}
    ]) }}
  </div>

  <div class="sc-box sc-w-full">
    <p class="sc-box-label">speed=8 (fast), logo_height=60 - 9 linked logos</p>
    {{ apep.macros.logo_scroller([
      {"src": "/apep-static/images/examples/unsplash1.svg", "alt": "Partner A", "url": "https://example.com"},
      {"src": "/apep-static/images/examples/unsplash2.svg", "alt": "Partner B", "url": "https://example.com"},
      {"src": "/apep-static/images/examples/unsplash3.svg", "alt": "Partner C", "url": "https://example.com"},
      {"src": "/apep-static/images/examples/unsplash4.svg", "alt": "Partner D", "url": "https://example.com"},
      {"src": "/apep-static/images/examples/unsplash5.svg", "alt": "Partner E", "url": "https://example.com"},
      {"src": "/apep-static/images/examples/unsplash6.svg", "alt": "Partner F", "url": "https://example.com"},
      {"src": "/apep-static/images/examples/unsplash7.svg", "alt": "Partner G", "url": "https://example.com"},
      {"src": "/apep-static/images/examples/unsplash8.svg", "alt": "Partner H", "url": "https://example.com"},
      {"src": "/apep-static/images/examples/unsplash9.svg", "alt": "Partner I", "url": "https://example.com"}
    ], speed=8, logo_height=60) }}
  </div>

</section>


{# ================================================================
   16. nav
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">nav</p>
  <p class="sc-section-desc">nav(items, variant) - flying navs omitted, not suitable for inline showcase</p>

  <div class="sc-box sc-w-full" style="margin-bottom:1rem;">
    <p class="sc-box-label">variant="top" - flat links only</p>
    {{ apep.macros.nav({
      "Home":     "/",
      "Features": "/features",
      "Pricing":  "/pricing",
      "About":    "/about",
      "Contact":  "/contact"
    }) }}
  </div>

  <div class="sc-box sc-w-full" style="margin-bottom:1rem;">
    <p class="sc-box-label">variant="top" - with dropdown children</p>
    {{ apep.macros.nav({
      "Home": "/",
      "Products": {
        "Widget Pro":  "/products/widget-pro",
        "Widget Lite": "/products/widget-lite",
        "Add-ons":     "/products/addons"
      },
      "Docs": {
        "Getting Started": "/docs/start",
        "API Reference":   "/docs/api",
        "Changelog":       "/docs/changelog"
      },
      "Pricing": "/pricing",
      "Blog":    "/blog"
    }) }}
  </div>

  <div class="sc-grid">

    <div class="sc-box sc-w-md sc-xtall">
      <p class="sc-box-label">variant="left" - with dropdown</p>
      {{ apep.macros.nav({
        "Dashboard": "/dashboard",
        "Analytics": {
          "Overview":  "/analytics/overview",
          "Reports":   "/analytics/reports",
          "Exports":   "/analytics/exports"
        },
        "Reports":   "/reports",
        "Settings":  "/settings",
        "Logout":    "/logout"
      }, variant="left") }}
    </div>

    <div class="sc-box sc-w-md sc-xtall">
      <p class="sc-box-label">variant="right" - with dropdown</p>
      {{ apep.macros.nav({
        "Dashboard": "/dashboard",
        "Users": {
          "All Users": "/users",
          "Roles":     "/users/roles",
          "Invites":   "/users/invites"
        },
        "Settings":  "/settings"
      }, variant="right") }}
    </div>

  </div>
</section>