{% extends "bfx_preview/layout.html" %}

{% from "bfx/button.html" import button %}
{% from "bfx/input.html" import input %}
{% from "bfx/select.html" import select %}
{% from "bfx/textarea.html" import textarea %}
{% from "bfx/form.html" import form_group, csrf_input %}
{% from "bfx/alert.html" import alert %}
{% from "bfx/card.html" import card %}
{% from "bfx/nav.html" import nav %}

{% block content %}

{# ── Hero ──────────────────────────────────────── #}
<div class="sc-hero">
  <div class="sc-hero-badge fade-in">Component Showcase</div>
  <h1 class="fade-in">All the building blocks,<br><em>in one place</em></h1>
  <p class="fade-in">Every <code>bfx/</code> macro rendered live with copy-paste Jinja2 code. Import, pass your data, ship.</p>
</div>

{# ── Table of contents ────────────────────────── #}
<div class="sc-toc fade-in">
  <div class="section-label" style="margin-bottom: 1.25rem;">Components</div>
  <div class="sc-toc-grid">
    <div>
      <div class="sc-toc-group-title">Forms</div>
      <ul class="sc-toc-list">
        <li><a href="#button">Button</a></li>
        <li><a href="#input">Input</a></li>
        <li><a href="#select">Select</a></li>
        <li><a href="#textarea">Textarea</a></li>
        <li><a href="#form-group">Form Group</a></li>
      </ul>
    </div>
    <div>
      <div class="sc-toc-group-title">Layout</div>
      <ul class="sc-toc-list">
        <li><a href="#card">Card</a></li>
        <li><a href="#nav">Nav</a></li>
      </ul>
    </div>
    <div>
      <div class="sc-toc-group-title">Feedback</div>
      <ul class="sc-toc-list">
        <li><a href="#alert">Alert</a></li>
      </ul>
    </div>
  </div>
</div>


{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
{# BUTTON                                          #}
{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
<section id="button" class="sc-section">
  <div class="sc-section-header">
    <h2>Button</h2>
    <span class="sc-import">{% raw %}<span class="kw">{%</span> from <span class="st">"bfx/button.html"</span> import button <span class="kw">%}</span>{% endraw %}</span>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">Variants</div>
    <div class="sc-preview">
      <div class="sc-preview-row">
        {{ button("Primary") }}
        {{ button("Secondary", variant="secondary") }}
        {{ button("Outline", variant="outline") }}
        {{ button("Contrast", variant="contrast") }}
      </div>
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ button("Primary") }}
{{ button("Secondary", variant="secondary") }}
{{ button("Outline", variant="outline") }}
{{ button("Contrast", variant="contrast") }}{% endraw %}</code></pre>
    </div>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">Link as button</div>
    <div class="sc-preview">
      <div class="sc-preview-row">
        {{ button("Go to dashboard", href="#", variant="secondary") }}
      </div>
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ button("Go to dashboard", href="/dashboard", variant="secondary") }}{% endraw %}</code></pre>
    </div>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">Disabled</div>
    <div class="sc-preview">
      <div class="sc-preview-row">
        {{ button("Processing...", disabled=true) }}
        {{ button("Disabled link", href="#", disabled=true) }}
      </div>
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ button("Processing...", disabled=true) }}
{{ button("Disabled link", href="#", disabled=true) }}{% endraw %}</code></pre>
    </div>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">With HTMX attributes</div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ button("Delete", variant="outline",
         attrs={"hx-delete": "/items/1", "hx-confirm": "Are you sure?"}) }}{% endraw %}</code></pre>
    </div>
  </div>
</section>


{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
{# INPUT                                           #}
{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
<section id="input" class="sc-section">
  <div class="sc-section-header">
    <h2>Input</h2>
    <span class="sc-import">{% raw %}<span class="kw">{%</span> from <span class="st">"bfx/input.html"</span> import input <span class="kw">%}</span>{% endraw %}</span>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">Default</div>
    <div class="sc-preview">
      {{ input("demo_email", type="email", label="Email address", placeholder="you@example.com") }}
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ input("email", type="email", label="Email address", placeholder="you@example.com") }}{% endraw %}</code></pre>
    </div>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">With error</div>
    <div class="sc-preview">
      {{ input("demo_email_err", type="email", label="Email", value="not-an-email", error="Please enter a valid email address") }}
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ input("email", type="email", label="Email", value="not-an-email",
         error="Please enter a valid email address") }}{% endraw %}</code></pre>
    </div>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">Password</div>
    <div class="sc-preview">
      {{ input("demo_pw", type="password", label="Password", placeholder="Enter password", required=true) }}
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ input("password", type="password", label="Password", required=true) }}{% endraw %}</code></pre>
    </div>
  </div>
</section>


{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
{# SELECT                                          #}
{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
<section id="select" class="sc-section">
  <div class="sc-section-header">
    <h2>Select</h2>
    <span class="sc-import">{% raw %}<span class="kw">{%</span> from <span class="st">"bfx/select.html"</span> import select <span class="kw">%}</span>{% endraw %}</span>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">Simple options</div>
    <div class="sc-preview">
      {{ select("demo_color", ["Red", "Green", "Blue"], label="Favorite color") }}
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ select("color", ["Red", "Green", "Blue"], label="Favorite color") }}{% endraw %}</code></pre>
    </div>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">Dict options with selected</div>
    <div class="sc-preview">
      {{ select("demo_role", [{"value": "admin", "label": "Administrator"}, {"value": "editor", "label": "Editor"}, {"value": "viewer", "label": "Viewer"}], label="Role", selected="editor") }}
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ select("role", [
    {"value": "admin", "label": "Administrator"},
    {"value": "editor", "label": "Editor"},
    {"value": "viewer", "label": "Viewer"}
  ], label="Role", selected="editor") }}{% endraw %}</code></pre>
    </div>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">With error</div>
    <div class="sc-preview">
      {{ select("demo_plan", ["Free", "Pro"], label="Plan", error="Selection required") }}
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ select("plan", ["Free", "Pro"], label="Plan", error="Selection required") }}{% endraw %}</code></pre>
    </div>
  </div>
</section>


{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
{# TEXTAREA                                        #}
{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
<section id="textarea" class="sc-section">
  <div class="sc-section-header">
    <h2>Textarea</h2>
    <span class="sc-import">{% raw %}<span class="kw">{%</span> from <span class="st">"bfx/textarea.html"</span> import textarea <span class="kw">%}</span>{% endraw %}</span>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">Default</div>
    <div class="sc-preview">
      {{ textarea("demo_bio", label="Biography", placeholder="Tell us about yourself...") }}
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ textarea("bio", label="Biography", placeholder="Tell us about yourself...") }}{% endraw %}</code></pre>
    </div>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">With error</div>
    <div class="sc-preview">
      {{ textarea("demo_bio_err", label="Biography", error="Must be at least 20 characters", rows=3) }}
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ textarea("bio", label="Biography", error="Must be at least 20 characters", rows=3) }}{% endraw %}</code></pre>
    </div>
  </div>
</section>


{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
{# FORM GROUP                                      #}
{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
<section id="form-group" class="sc-section">
  <div class="sc-section-header">
    <h2>Form Group</h2>
    <span class="sc-import">{% raw %}<span class="kw">{%</span> from <span class="st">"bfx/form.html"</span> import form_group, csrf_input <span class="kw">%}</span>{% endraw %}</span>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">Wrapping an input</div>
    <div class="sc-preview">
      {% call form_group("Email address", for_id="demo_fg_email") %}
        <input type="email" id="demo_fg_email" name="email" placeholder="you@example.com">
      {% endcall %}
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{% call form_group("Email address", for_id="email") %}
  {{ input("email", type="email", placeholder="you@example.com") }}
{% endcall %}{% endraw %}</code></pre>
    </div>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">With error</div>
    <div class="sc-preview">
      {% call form_group("Password", error="Password is required", for_id="demo_fg_pw") %}
        <input type="password" id="demo_fg_pw" name="password" aria-invalid="true">
      {% endcall %}
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{% call form_group("Password", error="Password is required") %}
  {{ input("password", type="password") }}
{% endcall %}{% endraw %}</code></pre>
    </div>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">CSRF token helper</div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ csrf_input(csrf_token) }}
{# Renders: <input type="hidden" name="csrf_token" value="..."> #}{% endraw %}</code></pre>
    </div>
  </div>
</section>


{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
{# CARD                                            #}
{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
<section id="card" class="sc-section">
  <div class="sc-section-header">
    <h2>Card</h2>
    <span class="sc-import">{% raw %}<span class="kw">{%</span> from <span class="st">"bfx/card.html"</span> import card <span class="kw">%}</span>{% endraw %}</span>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">Basic card</div>
    <div class="sc-preview">
      {% call card() %}
        <p>A simple card with just content. Uses Pico's <code>&lt;article&gt;</code> element.</p>
      {% endcall %}
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{% call card() %}
  <p>A simple card with just content.</p>
{% endcall %}{% endraw %}</code></pre>
    </div>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">With title and footer</div>
    <div class="sc-preview">
      {% call card(title="User Profile", footer="Last updated: today") %}
        <p>Card body content goes here. The title renders in a <code>&lt;header&gt;</code> and footer in a <code>&lt;footer&gt;</code>.</p>
      {% endcall %}
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{% call card(title="User Profile", footer="Last updated: today") %}
  <p>Card body content goes here.</p>
{% endcall %}{% endraw %}</code></pre>
    </div>
  </div>
</section>


{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
{# NAV                                             #}
{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
<section id="nav" class="sc-section">
  <div class="sc-section-header">
    <h2>Nav</h2>
    <span class="sc-import">{% raw %}<span class="kw">{%</span> from <span class="st">"bfx/nav.html"</span> import nav <span class="kw">%}</span>{% endraw %}</span>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">Logged out</div>
    <div class="sc-preview">
      {{ nav(brand="MyApp", items=[{"href": "#", "label": "About"}, {"href": "#", "label": "Docs"}]) }}
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ nav(brand="MyApp", items=[
    {"href": "/about", "label": "About"},
    {"href": "/docs", "label": "Docs"}
  ]) }}{% endraw %}</code></pre>
    </div>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">Logged in</div>
    <div class="sc-preview">
      {{ nav(brand="MyApp", items=[{"href": "#", "label": "Dashboard", "active": true}], user="alice@example.com") }}
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ nav(brand="MyApp",
       items=[{"href": "/dashboard", "label": "Dashboard", "active": true}],
       user="alice@example.com") }}{% endraw %}</code></pre>
    </div>
  </div>
</section>


{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
{# ALERT                                           #}
{# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ #}
<section id="alert" class="sc-section">
  <div class="sc-section-header">
    <h2>Alert</h2>
    <span class="sc-import">{% raw %}<span class="kw">{%</span> from <span class="st">"bfx/alert.html"</span> import alert <span class="kw">%}</span>{% endraw %}</span>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">Variants</div>
    <div class="sc-preview">
      {{ alert("This is an informational message.", variant="info") }}
      {{ alert("Operation completed successfully!", variant="success") }}
      {{ alert("Please check your input.", variant="warning") }}
      {{ alert("Something went wrong.", variant="error") }}
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ alert("This is an informational message.", variant="info") }}
{{ alert("Operation completed successfully!", variant="success") }}
{{ alert("Please check your input.", variant="warning") }}
{{ alert("Something went wrong.", variant="error") }}{% endraw %}</code></pre>
    </div>
  </div>

  <div class="sc-example">
    <div class="sc-example-label">Dismissible</div>
    <div class="sc-preview">
      {{ alert("You can close this alert.", variant="info", dismissible=true) }}
    </div>
    <div class="code-block">
      <div class="code-header">
        <div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
        <span class="code-filename">jinja2</span>
      </div>
      <pre><code>{% raw %}{{ alert("You can close this alert.", variant="info", dismissible=true) }}{% endraw %}</code></pre>
    </div>
  </div>
</section>

{% endblock %}