{{ define "style_playground_pattern.html" }}
{{ template "demo_doc_start" . }}
    {{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Experiment with visual directions on identical UI modules. Behavior contracts stay the same; only presentation changes." "back_url" "/" "back_text" "← Back to catalog") }}

    <div class="style-playground {{ .StyleClass }}">
      <section class="panel" id="style-presets">
        <div class="panel-head">
          <h2>Theme Presets</h2>
          <div class="meta">Current: {{ .StyleLabel }}</div>
        </div>
        <div class="segmented status-filter-tabs status-filter-tabs-blue">
          <a class="segment {{ if eq .Style "linen" }}active{{ end }}" href="{{ index .StyleURLs "linen" }}">Linen</a>
          <a class="segment {{ if eq .Style "slate" }}active{{ end }}" href="{{ index .StyleURLs "slate" }}">Slate</a>
          <a class="segment {{ if eq .Style "signal" }}active{{ end }}" href="{{ index .StyleURLs "signal" }}">Signal</a>
          <a class="segment {{ if eq .Style "y2k-silver" }}active{{ end }}" href="{{ index .StyleURLs "y2k-silver" }}">Y2K Silver</a>
          <a class="segment {{ if eq .Style "vaporwave-soft" }}active{{ end }}" href="{{ index .StyleURLs "vaporwave-soft" }}">Vapor Soft</a>
          <a class="segment {{ if eq .Style "vaporwave-night" }}active{{ end }}" href="{{ index .StyleURLs "vaporwave-night" }}">Vapor Night</a>
          <a class="segment {{ if eq .Style "aqua" }}active{{ end }}" href="{{ index .StyleURLs "aqua" }}">Aqua</a>
          <a class="segment {{ if eq .Style "win9x" }}active{{ end }}" href="{{ index .StyleURLs "win9x" }}">Win9x</a>
        </div>
        <p class="meta" style="margin-top:10px;">Use this page to compare visual directions on identical UI modules. Behavior contracts stay the same; only presentation changes.</p>
      </section>

      <section class="panel" id="style-components">
        <div class="panel-head">
          <h2>Component Preview</h2>
          <div class="button-demo-row" style="margin-top:0;">
            {{ if .LoadingDemo }}
            <a class="btn btn-ghost" href="{{ .ClearLoadingURL }}">Stop loading demo</a>
            {{ else }}
            <a class="btn btn-secondary" href="{{ .LoadingDemoURL }}">Simulate loading state</a>
            {{ end }}
          </div>
        </div>

        <div class="grid">
          <article class="card">
            <h3 style="margin-top:0;">Buttons</h3>
            <div class="button-demo-row">
              <button class="btn btn-primary" type="button">Apply</button>
              <button class="btn btn-secondary" type="button">Review</button>
              <button class="btn btn-ghost" type="button">Reset</button>
              <button class="btn btn-danger" type="button">Archive</button>
              {{ if .LoadingDemo }}
              <a class="btn btn-secondary is-loading" aria-disabled="true" href="{{ .ClearLoadingURL }}">Loading…</a>
              {{ else }}
              <button class="btn" type="button" disabled>Disabled</button>
              {{ end }}
            </div>
          </article>

          <article class="card">
            <h3 style="margin-top:0;">Status + Chips</h3>
            <div class="chip-row">
              <span class="chip">URL-driven state</span>
              <span class="chip">Server-rendered</span>
              <span class="chip">Anchor restore</span>
            </div>
            <div class="button-demo-row" style="margin-top:12px;">
              <span class="status status-ready">ready</span>
              <span class="status status-warning">warning</span>
              <span class="status status-review">review</span>
              <span class="status status-failed">failed</span>
            </div>
          </article>
        </div>
      </section>

      <section class="panel" id="style-status-filter">
        <div class="panel-head">
          <h2>Segmented Status Filter</h2>
          <div class="meta">12 filtered • page 1/3 • 0 selected</div>
        </div>
        <div class="status-filter-shell">
          <div class="segmented status-filter-tabs status-filter-tabs-dark" role="tablist" aria-label="Status filter">
            <button class="segment active" type="button" role="tab" aria-selected="true">All (12)</button>
            <button class="segment" type="button" role="tab" aria-selected="false">Ready (4)</button>
            <button class="segment" type="button" role="tab" aria-selected="false">Warning (4)</button>
            <button class="segment" type="button" role="tab" aria-selected="false">Review (4)</button>
          </div>
        </div>
      </section>

      <section class="panel" id="style-filters">
        <div class="panel-head">
          <h2>Compact Filter Module</h2>
          <div class="button-demo-row" style="margin-top:0;">
            <button class="btn btn-primary btn-pair" type="button">Apply</button>
            <button class="btn btn-ghost btn-pair" type="button">Reset</button>
          </div>
        </div>
        <form class="filters" action="/patterns/style-playground#style-filters" method="get">
          <input type="hidden" name="style" value="{{ .Style }}">
          <label>
            Search
            <input type="text" name="q" value="rack / owner / status">
          </label>
          <label>
            Category
            <select name="category">
              <option selected>All</option>
              <option>Compute</option>
              <option>Networking</option>
            </select>
          </label>
          <label>
            Status
            <select name="status">
              <option selected>All</option>
              <option>ready</option>
              <option>warning</option>
              <option>review</option>
            </select>
          </label>
          <label>
            Rows per page
            <select name="per_page">
              <option>5</option>
              <option selected>10</option>
              <option>20</option>
            </select>
          </label>
        </form>
      </section>

      <section class="panel" id="style-surface">
        <div class="panel-head">
          <h2>Surface + Table Readability</h2>
          <div class="meta">Same content under a different visual direction</div>
        </div>
        <div class="table-wrap">
          <table class="ui-table">
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Category</th>
                <th class="status-col">Status</th>
                <th>Owner</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>12</td>
                <td>Rack Controller Alpha</td>
                <td>Compute</td>
                <td class="status-col"><span class="status status-ready">ready</span></td>
                <td>Ops</td>
              </tr>
              <tr>
                <td>13</td>
                <td>Patch Panel Group</td>
                <td>Networking</td>
                <td class="status-col"><span class="status status-warning">warning</span></td>
                <td>Infra</td>
              </tr>
              <tr>
                <td>14</td>
                <td>Mapping Repair Queue</td>
                <td>Storage</td>
                <td class="status-col"><span class="status status-review">review</span></td>
                <td>QA</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="pager pager-dots" style="margin-top:12px;" aria-label="Pagination preview">
          <a class="current" aria-current="page" href="{{ index .StyleURLs .Style }}#style-surface" aria-label="Page 1, current">1</a>
          <a href="{{ index .StyleURLs .Style }}#style-surface" aria-label="Go to page 2">2</a>
          <span class="ellipsis" aria-hidden="true">…</span>
          <a href="{{ index .StyleURLs .Style }}#style-surface" aria-label="Go to page 7">7</a>
          <a href="{{ index .StyleURLs .Style }}#style-surface" aria-label="Go to page 8">8</a>
        </div>
      </section>
    </div>
{{ template "demo_doc_end" . }}
{{ end }}