{# ============================================================
   APEP Macro Showcase - Part 2
   input, lang_switch, pagination, progress_bar, radio,
   range_slider, review_card, review_gallery, sidescroller,
   split_group, stepper, text_block, theme_switch, timeline,
   toast_container, toggle
   ============================================================ #}

<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; }

  /* Toast demo grid */
  .sc-toast-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 0.5rem;
    width: fit-content;
    margin-bottom: 1rem;
  }

  /* Code example block */
  .sc-code {
    background: var(--color-bg-sunken, #f5f5f5);
    border: 1px solid var(--color-border, #ddd);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--color-text, #333);
    white-space: pre;
    overflow-x: auto;
    line-height: 1.7;
  }
</style>


{# ================================================================
   17. input
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">input</p>
  <p class="sc-section-desc">input(name, label, type, allowed_chars, validate, placeholder, value, required, hint, resize)</p>
  <div class="sc-grid">

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">type="text" - basic</p>
      {{ apep.macros.input("username", "Username") }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">type="email" - required</p>
      {{ apep.macros.input("email", "Email Address", type="email", required=True, placeholder="you@example.com") }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">type="password" + hint</p>
      {{ apep.macros.input("password", "Password", type="password", required=True, hint="At least 8 characters.") }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">prefilled + allowed_chars</p>
      {{ apep.macros.input("code", "Access Code", value="ABC-", allowed_chars=["A-Z", "0-9", "-"]) }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">resize="vertical" (textarea)</p>
      {{ apep.macros.input("message", "Message", resize="vertical", placeholder="Type here...") }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">resize="both" + hint</p>
      {{ apep.macros.input("notes", "Notes", resize="both", hint="Drag the corner to resize.") }}
    </div>

  </div>
</section>


{# ================================================================
   18. lang_switch
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">lang_switch</p>
  <p class="sc-section-desc">lang_switch(current_lang, langs)</p>
  <div class="sc-grid">

    <div class="sc-box">
      <p class="sc-box-label">default (DE + EN), active=de</p>
      {{ apep.macros.lang_switch() }}
    </div>

    <div class="sc-box">
      <p class="sc-box-label">default, active=en</p>
      {{ apep.macros.lang_switch(current_lang="en") }}
    </div>

    <div class="sc-box">
      <p class="sc-box-label">4 custom langs, active=fr</p>
      {{ apep.macros.lang_switch(current_lang="fr", langs=[
        {"code": "en", "label": "EN", "flag": "🇬🇧"},
        {"code": "de", "label": "DE", "flag": "🇩🇪"},
        {"code": "fr", "label": "FR", "flag": "🇫🇷"},
        {"code": "es", "label": "ES", "flag": "🇪🇸"}
      ]) }}
    </div>

    <div class="sc-box">
      <p class="sc-box-label">no flags</p>
      {{ apep.macros.lang_switch(current_lang="en", langs=[
        {"code": "en", "label": "English"},
        {"code": "de", "label": "Deutsch"}
      ]) }}
    </div>

  </div>
</section>


{# ================================================================
   20. progress_bar
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">progress_bar</p>
  <p class="sc-section-desc">progress_bar(value, max, id, label, show_value, variant) - JS demo via ApepProgress.set(id, value)</p>
  <div class="sc-grid">

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">variant="default" - 60%</p>
      {{ apep.macros.progress_bar(60) }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">variant="success" + label + show_value</p>
      {{ apep.macros.progress_bar(80, label="Upload", show_value=True, variant="success") }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">variant="warning" - 45 / 200</p>
      {{ apep.macros.progress_bar(45, max=200, label="Storage", show_value=True, variant="warning") }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">variant="danger" - nearly full</p>
      {{ apep.macros.progress_bar(95, label="Quota", show_value=True, variant="danger") }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">0% start</p>
      {{ apep.macros.progress_bar(0, label="Initializing...") }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">JS-controlled via ApepProgress.set("js-bar", value)</p>
      {{ apep.macros.progress_bar(20, id="js-bar", label="JS-controlled bar", show_value=True, variant="success") }}
      <div class="sc-flex-row" style="margin-top:0.75rem;">
        <button type="button" onclick="ApepProgress.set('js-bar', Math.min((parseInt(document.querySelector('#js-bar [data-progress-fill]').closest('[data-progress-value]').dataset.progressValue || 20) + 10), 100))">+10</button>
        <button type="button" onclick="ApepProgress.set('js-bar', Math.max((parseInt(document.querySelector('#js-bar [data-progress-fill]').closest('[data-progress-value]').dataset.progressValue || 20) - 10), 0))">-10</button>
        <button type="button" onclick="ApepProgress.set('js-bar', 0)">Reset</button>
        <button type="button" onclick="ApepProgress.set('js-bar', 100)">Full</button>
      </div>
    </div>

  </div>
</section>


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

    <div class="sc-box sc-w-sm">
      <p class="sc-box-label">none selected</p>
      {{ apep.macros.radio("plan", [
        {"label": "Free"},
        {"label": "Pro"},
        {"label": "Enterprise"}
      ]) }}
    </div>

    <div class="sc-box sc-w-sm">
      <p class="sc-box-label">selected via option.checked</p>
      {{ apep.macros.radio("size", [
        {"label": "Small"},
        {"label": "Medium", "checked": True},
        {"label": "Large"}
      ]) }}
    </div>

    <div class="sc-box sc-w-sm">
      <p class="sc-box-label">selected param overrides checked</p>
      {{ apep.macros.radio("color", [
        {"label": "Red",   "value": "red"},
        {"label": "Green", "value": "green", "checked": True},
        {"label": "Blue",  "value": "blue"}
      ], selected="blue") }}
    </div>

  </div>
</section>


{# ================================================================
   22. range_slider
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">range_slider</p>
  <p class="sc-section-desc">range_slider(name, label, min, max, value, step, unit, hint)</p>

  <div class="sc-box sc-w-full" style="margin-bottom:1rem;">
    <p class="sc-box-label">basic 0-100</p>
    {{ apep.macros.range_slider("volume", "Volume") }}
  </div>

  <div class="sc-box sc-w-full" style="margin-bottom:1rem;">
    <p class="sc-box-label">unit="%" + prefilled value=75</p>
    {{ apep.macros.range_slider("opacity", "Opacity", min=0, max=100, value=75, unit="%") }}
  </div>

  <div class="sc-box sc-w-full" style="margin-bottom:1rem;">
    <p class="sc-box-label">step=50 + unit="€" + hint</p>
    {{ apep.macros.range_slider("budget", "Monthly Budget", min=0, max=1000, value=250, step=50, unit="€", hint="Adjust in 50 € increments.") }}
  </div>

  <div class="sc-box sc-w-full" style="margin-bottom:1rem;">
    <p class="sc-box-label">narrow range 1-10, unit="★"</p>
    {{ apep.macros.range_slider("rating", "Rating", min=1, max=10, value=7, unit="★") }}
  </div>

  <div class="sc-box sc-w-full">
    <p class="sc-box-label">unit="px" - font size 8-72</p>
    {{ apep.macros.range_slider("font_size", "Font Size", min=8, max=72, value=16, unit="px") }}
  </div>

</section>


{# ================================================================
   23. review_card
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">review_card</p>
  <p class="sc-section-desc">review_card(text, author, role, rating, avatar, logo, date, expandable, expand_text, collapse_text)</p>
  <div class="sc-grid">

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">text only</p>
      {{ apep.macros.review_card("Fantastic product, highly recommended!") }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">rating + author + role</p>
      {{ apep.macros.review_card(
        "This macro system saved our team weeks of work.",
        author="Jane Doe",
        role="Lead Developer",
        rating=5
      ) }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">rating + date</p>
      {{ apep.macros.review_card(
        "Solid and predictable. Exactly what a component system should be.",
        author="Max Müller",
        rating=4,
        date="March 2025"
      ) }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">short - 1 star - author only</p>
      {{ apep.macros.review_card(
        "Not for me.",
        author="Anonymous",
        rating=1
      ) }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">all fields - no expandable</p>
      {{ apep.macros.review_card(
        "Everything works exactly as documented. The team behind this clearly cares about DX. Just a lil to long...",
        author="Petra V.",
        role="Engineering Manager",
        rating=5,
        date="April 2025"
      ) }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">expandable - long text</p>
      {{ apep.macros.review_card(
        "I have been using APEP for six months now and can honestly say it has fundamentally changed how we build templates. The macro system is intuitive, composable, and the server-side rendering means zero client-side bloat. The breadcrumb, nav, and form components have saved us enormous time. We migrated from a custom framework in under a week. I could go on, but the short version is: if you build Jinja2 apps, use this.",
        author="Sofia Ricci",
        role="Fullstack Engineer",
        rating=5,
        expand_text="Read full review",
        collapse_text="Collapse"
      ) }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">expandable - medium text</p>
      {{ apep.macros.review_card(
        "Genuinely surprised by how polished this is for an open-source project. The date picker alone saved us two days of work. Minor gripe: some edge-case docs are thin. Overall very strong.",
        author="Lars B.",
        role="Backend Dev",
        rating=4,
        date="May 2025",
        expand_text="More",
        collapse_text="Less"
      ) }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">3 stars - balanced review</p>
      {{ apep.macros.review_card(
        "Good bones but the documentation needs work in places. Found a few inconsistencies between what the docs say and what the macros actually do. Team is responsive on GitHub though.",
        author="Kim P.",
        rating=3,
        date="Feb 2025"
      ) }}
    </div>

  </div>
</section>


{# ================================================================
   24. review_gallery
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">review_gallery</p>
  <p class="sc-section-desc">review_gallery(reviews, expand_text, collapse_text)</p>

  <div class="sc-box sc-w-full sc-xtall" style="margin-bottom:1rem;">
    <p class="sc-box-label">6 reviews - mix of short and medium - carousel with arrows + dots</p>
    {{ apep.macros.review_gallery([
      {"text": "Excellent quality and great support.",      "author": "Anna K.",  "rating": 5},
      {"text": "Works right out of the box. Recommended.", "author": "Ben S.",   "rating": 4, "date": "Jan 2025"},
      {"text": "Great docs, fast support from the team.",  "author": "Carla M.", "role": "CTO", "rating": 5},
      {"text": "Saved us weeks. Macro system is excellent.", "author": "David R.", "role": "Senior Dev", "rating": 5, "date": "Mar 2025"},
      {"text": "Not perfect but very close. Would recommend with minor reservations about edge-case handling.", "author": "Elena S.", "rating": 3},
      {"text": "We replaced three custom components in one afternoon. Deployment was smooth.", "author": "Frank T.", "role": "DevOps Lead", "rating": 4, "date": "Apr 2025"}
    ]) }}
  </div>

  <div class="sc-box sc-w-full sc-xtall">
    <p class="sc-box-label">5 reviews - mix of expandable long and short - custom expand/collapse labels</p>
    {{ apep.macros.review_gallery([
      {
        "text": "This is a longer review that goes into significant detail about how the product performs under real-world conditions, including edge cases and performance benchmarks not mentioned in the official docs. Truly impressive engineering. We ran it on a project with 40k daily users and had zero issues.",
        "author": "Tom H.",
        "rating": 4,

      },
      {
        "text": "Short one: it just works.",
        "author": "Mia W.",
        "rating": 5,
        "date": "June 2025"
      },
      {
        "text": "The component library is incredibly well thought out. We migrated from a custom CSS framework in under a week and our team was productive almost immediately. The only minor critique is that edge case documentation could be expanded slightly. The form validation, in particular, has a few undocumented behaviours that took us a while to figure out.",
        "author": "Linda Z.",
        "role": "Frontend Architect",
        "rating": 5,

      },
      {
        "text": "Decent. Does what it says.",
        "author": "Nils R.",
        "rating": 3
      },
      {
        "text": "After evaluating four different component systems for our Jinja2 stack, APEP was the clear winner. The server-side rendering approach means our pages are fast even on slow connections, and the macro API is consistent enough that new team members pick it up in hours rather than days. We have been running it in production for three months with no regressions.",
        "author": "Olivia M.",
        "role": "Engineering Director",
        "rating": 5,
        "date": "May 2025",

      }
    ], expand_text="Show more", collapse_text="Show less") }}
  </div>

</section>


{# ================================================================
   25. sidescroller
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">sidescroller</p>
  <p class="sc-section-desc">sidescroller(items)</p>

  <div class="sc-box sc-w-full sc-xtall" style="margin-bottom:1rem;">
    <p class="sc-box-label">9 images with labels - mix of short and long label text - scroll left/right</p>
    {{ apep.macros.sidescroller([
      {"src": "/apep-static/images/examples/unsplash1.svg", "alt": "Scene 1", "label": "Forest"},
      {"src": "/apep-static/images/examples/unsplash2.svg", "alt": "Scene 2", "label": "Mountain Range"},
      {"src": "/apep-static/images/examples/unsplash3.svg", "alt": "Scene 3", "label": "Ocean"},
      {"src": "/apep-static/images/examples/unsplash4.svg", "alt": "Scene 4", "label": "Desert at Dusk"},
      {"src": "/apep-static/images/examples/unsplash5.svg", "alt": "Scene 5", "label": "Jungle"},
      {"src": "/apep-static/images/examples/unsplash6.svg", "alt": "Scene 6", "label": "Tundra"},
      {"src": "/apep-static/images/examples/unsplash7.svg", "alt": "Scene 7", "label": "Volcanic Landscape"},
      {"src": "/apep-static/images/examples/unsplash8.svg", "alt": "Scene 8", "label": "Coastal Cliffs"},
      {"src": "/apep-static/images/examples/unsplash9.svg", "alt": "Scene 9", "label": "Night Sky"}
    ]) }}
  </div>

  <div class="sc-box sc-w-full sc-xtall" style="margin-bottom:1rem;">
    <p class="sc-box-label">9 items - overlay=True - mix of long and short captions - click to open fullscreen</p>
    {{ apep.macros.sidescroller([
      {"src": "/apep-static/images/examples/unsplash1.svg", "alt": "Scene 1", "overlay": True, "caption": "Waterfall at dusk - a long hike but absolutely worth every step of the trail"},
      {"src": "/apep-static/images/examples/unsplash2.svg", "alt": "Scene 2", "overlay": True, "caption": "Summit view"},
      {"src": "/apep-static/images/examples/unsplash3.svg", "alt": "Scene 3", "overlay": True},
      {"src": "/apep-static/images/examples/unsplash4.svg", "alt": "Scene 4", "overlay": True, "caption": "Forest at dawn, shot on a cold October morning with a 24mm prime lens"},
      {"src": "/apep-static/images/examples/unsplash5.svg", "alt": "Scene 5", "overlay": True, "caption": "Desert"},
      {"src": "/apep-static/images/examples/unsplash6.svg", "alt": "Scene 6", "overlay": True, "caption": "Frozen lake"},
      {"src": "/apep-static/images/examples/unsplash7.svg", "alt": "Scene 7", "overlay": True},
      {"src": "/apep-static/images/examples/unsplash8.svg", "alt": "Scene 8", "overlay": True, "caption": "Rocky coastline at low tide"},
      {"src": "/apep-static/images/examples/unsplash9.svg", "alt": "Scene 9", "overlay": True, "caption": "Milky Way above the ridge - 25 second exposure, ISO 3200"}
    ]) }}
  </div>

  <div class="sc-box sc-w-full sc-tall">
    <p class="sc-box-label">6 linked items - click opens url - mix of label lengths</p>
    {{ apep.macros.sidescroller([
      {"src": "/apep-static/images/examples/unsplash2.svg", "alt": "Link 1", "url": "https://example.com/1", "label": "Link A"},
      {"src": "/apep-static/images/examples/unsplash3.svg", "alt": "Link 2", "url": "https://example.com/2", "label": "Product Overview Page"},
      {"src": "/apep-static/images/examples/unsplash4.svg", "alt": "Link 3", "url": "https://example.com/3", "label": "Link C"},
      {"src": "/apep-static/images/examples/unsplash5.svg", "alt": "Link 4", "url": "https://example.com/4", "label": "Documentation & Guides"},
      {"src": "/apep-static/images/examples/unsplash6.svg", "alt": "Link 5", "url": "https://example.com/5", "label": "D"},
      {"src": "/apep-static/images/examples/unsplash7.svg", "alt": "Link 6", "url": "https://example.com/6", "label": "Community Forum"}
    ]) }}
  </div>

</section>


{# ================================================================
   26. split_group
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">split_group</p>
  <p class="sc-section-desc">split_group(items, gap)</p>
  <div class="sc-grid">

    <div class="sc-box sc-w-xl">
      <p class="sc-box-label">2 columns - gap="md", no dividers</p>
      {% set _col1 %}<p>Left column content.</p>{% endset %}
      {% set _col2 %}<p>Right column content.</p>{% endset %}
      {{ apep.macros.split_group([
        {"content": _col1},
        {"content": _col2}
      ]) }}
    </div>

    <div class="sc-box sc-w-xl">
      <p class="sc-box-label">3 columns - pos_divider right / right / none</p>
      {% set _a %}<p><strong>Alpha</strong><br>First section.</p>{% endset %}
      {% set _b %}<p><strong>Beta</strong><br>Second section.</p>{% endset %}
      {% set _c %}<p><strong>Gamma</strong><br>Third section.</p>{% endset %}
      {{ apep.macros.split_group([
        {"content": _a, "pos_divider": "right"},
        {"content": _b, "pos_divider": "right"},
        {"content": _c}
      ]) }}
    </div>

    <div class="sc-box sc-w-xl">
      <p class="sc-box-label">gap="sm"</p>
      {% set _x %}<p>Narrow gap left.</p>{% endset %}
      {% set _y %}<p>Narrow gap right.</p>{% endset %}
      {{ apep.macros.split_group([{"content": _x}, {"content": _y}], gap="sm") }}
    </div>

    <div class="sc-box sc-w-xl">
      <p class="sc-box-label">gap="lg"</p>
      {% set _p %}<p>Wide gap left.</p>{% endset %}
      {% set _q %}<p>Wide gap right.</p>{% endset %}
      {{ apep.macros.split_group([{"content": _p}, {"content": _q}], gap="lg") }}
    </div>

  </div>
</section>


{# ================================================================
   27. stepper
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">stepper</p>
  <p class="sc-section-desc">stepper(steps, current)</p>

  <div class="sc-box sc-w-full" style="margin-bottom:1rem;">
    <p class="sc-box-label">current=1 (first active)</p>
    {{ apep.macros.stepper([
      {"label": "Account"},
      {"label": "Profile"},
      {"label": "Review"},
      {"label": "Done"}
    ], current=1) }}
  </div>

  <div class="sc-box sc-w-full" style="margin-bottom:1rem;">
    <p class="sc-box-label">current=3 (two done, one active)</p>
    {{ apep.macros.stepper([
      {"label": "Account"},
      {"label": "Profile"},
      {"label": "Review"},
      {"label": "Done"}
    ], current=3) }}
  </div>

  <div class="sc-box sc-w-full" style="margin-bottom:1rem;">
    <p class="sc-box-label">all done (current beyond last step)</p>
    {{ apep.macros.stepper([
      {"label": "Account"},
      {"label": "Profile"},
      {"label": "Review"},
      {"label": "Done"}
    ], current=5) }}
  </div>

  <div class="sc-box sc-w-full">
    <p class="sc-box-label">with detail tooltips - hover over step markers</p>
    {{ apep.macros.stepper([
      {"label": "Account",  "detail": "Enter your email and password."},
      {"label": "Billing",  "detail": "Add a payment method."},
      {"label": "Confirm",  "detail": "Review your order summary."},
      {"label": "Complete", "detail": "You're done!"}
    ], current=2) }}
  </div>

</section>


{# ================================================================
   28. text_block
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">text_block</p>
  <p class="sc-section-desc">text_block(text, min_width, max_width, min_height, max_height, scroll, variant)</p>
  <div class="sc-grid">

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">variant="default"</p>
      {{ apep.macros.text_block("<p>This is a default text block with no scroll.</p>") }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">variant="plain"</p>
      {{ apep.macros.text_block("<p>Plain variant - no decorative border/background.</p>", variant="plain") }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">scroll="vertical" + max_height=120px</p>
      {{ apep.macros.text_block(
        "<p>Line 1</p><p>Line 2</p><p>Line 3</p><p>Line 4</p><p>Line 5</p><p>Line 6</p><p>Line 7</p>",
        max_height="120px",
        scroll="vertical"
      ) }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">scroll="horizontal" (long single line)</p>
      {{ apep.macros.text_block(
        "<p style='white-space:nowrap'>This is a very very very very very very very long horizontal text that overflows intentionally.</p>",
        max_width="300px",
        scroll="horizontal"
      ) }}
    </div>

    <div class="sc-box sc-w-md">
      <p class="sc-box-label">min/max_width + rich HTML</p>
      {{ apep.macros.text_block(
        "<h4>Rich Content</h4><p>Paragraphs, <strong>bold</strong>, <em>italic</em>.</p><ul><li>Item A</li><li>Item B</li></ul>",
        min_width="200px",
        max_width="360px"
      ) }}
    </div>

  </div>
</section>


{# ================================================================
   29. theme_switch
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">theme_switch</p>
  <p class="sc-section-desc">theme_switch(variant) - floating variant omitted, fixed positioning does not work in showcase context</p>
  <div class="sc-grid">

    <div class="sc-box">
      <p class="sc-box-label">variant="icon"</p>
      {{ apep.macros.theme_switch(variant="icon") }}
    </div>

    <div class="sc-box">
      <p class="sc-box-label">variant="slider"</p>
      {{ apep.macros.theme_switch(variant="slider") }}
    </div>

  </div>
</section>


{# ================================================================
   30. timeline
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">timeline</p>
  <p class="sc-section-desc">timeline(items, direction="right", same_side=False)</p>

  <p class="sc-box-label" style="margin-bottom:0.4rem;">default (direction="right") - 8 items - scroll left/right</p>
  <div class="sc-box sc-w-full" style="padding:0; margin-bottom:1.5rem;">
    {{ apep.macros.timeline([
      {"title": "Idea",      "text": "Initial concept sketched out."},
      {"title": "Research",  "text": "Market analysis completed."},
      {"title": "Design",    "text": "Wireframes and mockups approved."},
      {"title": "Build",     "text": "First working prototype."},
      {"title": "Test",      "text": "Internal QA and bug fixes."},
      {"title": "Beta",      "text": "Closed beta with 50 users."},
      {"title": "Launch",    "text": "Public release v1.0."},
      {"title": "Grow",      "text": "10k users in first month."}
    ]) }}
  </div>

  <p class="sc-box-label" style="margin-bottom:0.4rem;">direction="right" - same_side=True - 8 items</p>
  <div class="sc-box sc-w-full" style="padding:0; margin-bottom:1.5rem;">
    {{ apep.macros.timeline([
      {"title": "Jan", "text": "Project kickoff."},
      {"title": "Feb", "text": "Requirements locked."},
      {"title": "Mar", "text": "Design sprint done."},
      {"title": "Apr", "text": "Backend scaffolded."},
      {"title": "May", "text": "Frontend integrated."},
      {"title": "Jun", "text": "Staging deployed."},
      {"title": "Jul", "text": "Load testing passed."},
      {"title": "Aug", "text": "Production release."}
    ], same_side=True) }}
  </div>

  <p class="sc-box-label" style="margin-bottom:0.4rem;">direction="down" - alternating - 8 items - scroll up/down</p>
  <div class="sc-box sc-w-full" style="padding:0; height:420px; margin-bottom:1.5rem;">
    {{ apep.macros.timeline([
      {"title": "2018", "text": "Team formed, first office opened."},
      {"title": "2019", "text": "Seed round closed, MVP shipped."},
      {"title": "2020", "text": "Remote-first pivot, 3x team growth."},
      {"title": "2021", "text": "Series A, first enterprise customer."},
      {"title": "2022", "text": "EU expansion, Berlin office opened."},
      {"title": "2023", "text": "Series B, 200 employees reached."},
      {"title": "2024", "text": "APEP open-sourced, 5k GitHub stars."},
      {"title": "2025", "text": "Profitable, IPO preparation begins."}
    ], direction="down") }}
  </div>

  <p class="sc-box-label" style="margin-bottom:0.4rem;">direction="down" - same_side=True - 8 items</p>
  <div class="sc-box sc-w-full" style="padding:0; height:420px; margin-bottom:1.5rem;">
    {{ apep.macros.timeline([
      {"title": "Step 1", "text": "Clone the repository."},
      {"title": "Step 2", "text": "Install dependencies."},
      {"title": "Step 3", "text": "Copy .env.example to .env."},
      {"title": "Step 4", "text": "Configure database connection."},
      {"title": "Step 5", "text": "Run database migrations."},
      {"title": "Step 6", "text": "Seed initial data."},
      {"title": "Step 7", "text": "Start the dev server."},
      {"title": "Step 8", "text": "Open localhost:5000 in browser."}
    ], direction="down", same_side=True) }}
  </div>

  <p class="sc-box-label" style="margin-bottom:0.4rem;">direction="right" - detail tooltips - hover markers</p>
  <div class="sc-box sc-w-full" style="padding:0;">
    {{ apep.macros.timeline([
      {"title": "Kickoff",   "text": "Project started.",         "detail": "Team assembled, goals aligned."},
      {"title": "Discovery", "text": "User research done.",      "detail": "12 interviews, 3 surveys."},
      {"title": "Design",    "text": "Wireframes approved.",     "detail": "4 rounds of iteration."},
      {"title": "Build",     "text": "Sprint 1-4 completed.",    "detail": "Core features shipped."},
      {"title": "QA",        "text": "Test coverage at 87%.",    "detail": "Unit, integration, E2E."},
      {"title": "Staging",   "text": "Load tests passed.",       "detail": "500 concurrent users tested."},
      {"title": "Launch",    "text": "Zero downtime deploy.",    "detail": "Blue-green deployment used."},
      {"title": "Review",    "text": "Retrospective completed.", "detail": "Lessons documented in Notion."}
    ]) }}
  </div>

</section>


{# ================================================================
   31. toast_container
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">toast_container</p>
  <p class="sc-section-desc">toast_container(position) - ApepToast.show(message, variant, duration)</p>

  <div class="sc-box sc-w-full" style="margin-bottom:1rem;">
    <p class="sc-box-label">all variants - toast always appears at the container position (here: bottom-right)</p>

    <div class="sc-flex-row">
      <button type="button" onclick="ApepToast.show('Info toast.', 'info')">info</button>
      <button type="button" onclick="ApepToast.show('Saved.', 'success')">success</button>
      <button type="button" onclick="ApepToast.show('Warning: storage space low.', 'warning')">warning</button>
      <button type="button" onclick="ApepToast.show('Error while loading.', 'danger')">danger</button>
      <button type="button" onclick="ApepToast.show('Must be closed manually.', 'info', 0)">permanent</button>
    </div>
  </div>

  <div class="sc-box sc-w-full">
    <p class="sc-box-label">JS API - ApepToast.show()</p>
    <pre class="sc-code">// Basic - info toast, auto-closes after 4 seconds (default)
ApepToast.show("Saved successfully!")

// With variant - "info" | "success" | "warning" | "danger"
ApepToast.show("File uploaded.", "success")
ApepToast.show("Low disk space.", "warning", 6000)
ApepToast.show("Something went wrong.", "danger")

// Permanent - duration=0, user must click × to dismiss
ApepToast.show("Action required.", "warning", 0)</pre>
    <p class="sc-note">Macro: toast_container(position) - include once per page, ideally before &lt;/body&gt;. Available positions: top-right, top-left, top-center, bottom-right, bottom-left, bottom-center.</p>
  </div>

</section>

{{ apep.macros.toast_container(position="bottom-right") }}


{# ================================================================
   32. toggle
   ================================================================ #}
<section class="sc-section">
  <p class="sc-section-title">toggle</p>
  <p class="sc-section-desc">toggle(name, label, checked, disabled, hint)</p>
  <div class="sc-grid">

    <div class="sc-box sc-w-sm">
      <p class="sc-box-label">unchecked (default)</p>
      {{ apep.macros.toggle("notifications", "Enable notifications") }}
    </div>

    <div class="sc-box sc-w-sm">
      <p class="sc-box-label">checked=True</p>
      {{ apep.macros.toggle("dark_mode", "Dark mode", checked=True) }}
    </div>

    <div class="sc-box sc-w-sm">
      <p class="sc-box-label">disabled + unchecked</p>
      {{ apep.macros.toggle("beta", "Beta features", disabled=True) }}
    </div>

    <div class="sc-box sc-w-sm">
      <p class="sc-box-label">disabled + checked</p>
      {{ apep.macros.toggle("admin", "Admin access", checked=True, disabled=True) }}
    </div>

    <div class="sc-box sc-w-sm">
      <p class="sc-box-label">with hint</p>
      {{ apep.macros.toggle("marketing", "Marketing emails", hint="You can unsubscribe at any time.") }}
    </div>

  </div>
</section>