{{ define "timeline_pattern.html" }}
{{ template "demo_doc_start" . }}
    {{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Grouped timeline cards by day with source/action filters and single drilldown modal." "back_url" "/" "back_text" "← Back to catalog") }}

    <section class="panel panel-composite" id="timeline-module">
      <div class="panel-subsection" id="timeline-filters">
      <div class="panel-head"><h2>Timeline Filters</h2></div>
      <div class="segmented" style="margin-bottom:10px;">
        <a class="segment {{ if eq .ActionFilter "" }}active{{ end }}" href="{{ index .ActionURLs "" }}">All actions</a>
        <a class="segment {{ if eq .ActionFilter "installation" }}active{{ end }}" href="{{ index .ActionURLs "installation" }}">Installation</a>
        <a class="segment {{ if eq .ActionFilter "removal" }}active{{ end }}" href="{{ index .ActionURLs "removal" }}">Removal</a>
        <a class="segment {{ if eq .ActionFilter "edit" }}active{{ end }}" href="{{ index .ActionURLs "edit" }}">Edit</a>
      </div>
      <div class="segmented">
        <a class="segment {{ if eq .SourceFilter "" }}active{{ end }}" href="{{ index .SourceURLs "" }}">All sources</a>
        <a class="segment {{ if eq .SourceFilter "manual" }}active{{ end }}" href="{{ index .SourceURLs "manual" }}">Manual</a>
        <a class="segment {{ if eq .SourceFilter "ingest" }}active{{ end }}" href="{{ index .SourceURLs "ingest" }}">Ingest</a>
        <a class="segment {{ if eq .SourceFilter "system" }}active{{ end }}" href="{{ index .SourceURLs "system" }}">System</a>
      </div>
      </div>

      <div class="panel-subsection panel-subsection-divider" id="timeline-cards">
      <div class="panel-head"><h2>Grouped Cards</h2></div>
      {{ if .Cards }}
        <div class="timeline-cards">
          {{ range .Cards }}
          <article class="timeline-card">
            <div class="timeline-card-top">
              <div>
                <p class="timeline-day">{{ .Day }}</p>
                <h3>{{ .Title }}</h3>
              </div>
              <div class="timeline-meta">
                <span class="status status-review">{{ .Action }}</span>
                <span class="status status-{{ if eq .Source "manual" }}ready{{ else if eq .Source "ingest" }}warning{{ else }}review{{ end }}">{{ .Source }}</span>
              </div>
            </div>
            <div class="timeline-summary-grid">
              <div>
                <div class="meta">Models / Types</div>
                <div class="chip-row">{{ range .SummaryLeft }}<span class="chip">{{ . }}</span>{{ end }}</div>
              </div>
              <div>
                <div class="meta">Slots / Scope</div>
                <div class="chip-row">{{ range .SummaryRight }}<span class="chip">{{ . }}</span>{{ end }}</div>
              </div>
            </div>
            <div class="timeline-card-actions">
              <span class="meta">{{ .Count }} event(s)</span>
              <a class="btn btn-secondary" href="{{ .OpenURL }}">Open details</a>
            </div>
          </article>
          {{ end }}
        </div>
      {{ else }}
        <div class="notice">No timeline cards match current filters.</div>
      {{ end }}
      </div>
    </section>

    {{ if .OpenCard }}
    <div class="demo-modal-backdrop">
      <section class="demo-modal timeline-modal">
        <div class="demo-modal-titlebar">
          <a class="demo-modal-close-dot" href="{{ .ClearCardURL }}" aria-label="Close modal"></a>
          <div class="demo-modal-title">{{ .OpenCard.Title }}</div>
        </div>
        <div class="demo-modal-body">
        <p class="meta">{{ .OpenCard.Day }} · {{ .OpenCard.Source }} · {{ .OpenCard.Action }}</p>
        <form id="timeline-drilldown" class="filters" method="get" action="/patterns/timeline#timeline-drilldown" style="margin-top:12px;">
          <input type="hidden" name="action" value="{{ .ActionFilter }}">
          <input type="hidden" name="source" value="{{ .SourceFilter }}">
          <input type="hidden" name="open" value="{{ .OpenCard.ID }}">
          <label>Filter events in card
            <input type="search" name="q" value="{{ .CardSearch }}" placeholder="serial / slot / model / source">
          </label>
          <div></div><div></div>
          <div class="filter-actions">
            <button class="btn btn-primary btn-pair" type="submit">Apply</button>
            <a class="btn btn-ghost btn-pair" href="{{ .ClearCardURL }}">Reset</a>
          </div>
        </form>

        <div class="timeline-drill-grid">
          <div class="timeline-drill-list">
            {{ if .OpenCard.Items }}
              {{ range .OpenCard.Items }}
              <a class="timeline-item {{ if and $.ActiveEvent (eq $.ActiveEvent.ID .ID) }}active{{ end }}" href="/patterns/timeline?action={{ $.ActionFilter }}&source={{ $.SourceFilter }}&open={{ $.OpenCard.ID }}{{ if $.CardSearch }}&q={{ $.CardSearch }}{{ end }}&event={{ .ID }}#timeline-drilldown">
                <div class="timeline-item-title">{{ .Action }} · {{ .At }}</div>
                <div class="timeline-item-meta">{{ .Entity }} · {{ .Target }}</div>
                <div class="timeline-item-meta">{{ .Slot }} · {{ .Device }} · {{ .Source }}</div>
              </a>
              {{ end }}
            {{ else }}
              <div class="notice">No events match the card filter.</div>
            {{ end }}
          </div>
          <div class="timeline-drill-detail">
            {{ if .ActiveEvent }}
              <h3 style="margin-top:0;">Event Detail</h3>
              <div class="meta">When: {{ .ActiveEvent.At }}</div>
              <div class="meta">Action: {{ .ActiveEvent.Action }}</div>
              <div class="meta">Source: {{ .ActiveEvent.Source }}</div>
              <div class="meta">Entity: {{ .ActiveEvent.Entity }}</div>
              <div class="meta">Target: {{ .ActiveEvent.Target }}</div>
              <div class="meta">Slot / Device: {{ .ActiveEvent.Slot }} · {{ .ActiveEvent.Device }}</div>
              <div class="notice" style="margin-top:12px;">{{ .ActiveEvent.Detail }}</div>
            {{ else }}
              <div class="meta">Select an event to view details.</div>
            {{ end }}
          </div>
        </div>
        </div>
      </section>
    </div>
    {{ end }}
{{ template "demo_doc_end" . }}
{{ end }}