{{define "title"}}{{if .Query}}{{.Query}} — {{end}}{{end}}
{{define "content"}}
<div class="results-layout">
  <!-- Left Sidebar -->
  <aside class="left-sidebar" id="left-sidebar">
    <nav class="sidebar-nav">
      <div class="sidebar-nav-title">Categories</div>
      {{range .Categories}}
      <a href="/search?q={{$.Query | urlquery}}&category={{.}}" class="sidebar-nav-item {{if eq $.ActiveCategory .}}active{{end}}">
        <span class="sidebar-nav-item-icon">{{index $.CategoryIcons .}}</span>
        <span>{{.}}</span>
      </a>
      {{end}}
      <!-- Disabled categories with no links -->
      {{range .DisabledCategories}}
      <span class="sidebar-nav-item disabled">
        <span class="sidebar-nav-item-icon">{{index $.CategoryIcons .}}</span>
        <span>{{.}}</span>
      </span>
      {{end}}
    </nav>

    <div class="sidebar-filters">
      <div class="sidebar-filter-group">
        <div class="sidebar-filter-label">Time</div>
        {{range .TimeFilters}}
        <label class="sidebar-filter-option">
          <input type="radio" name="time" value="{{.Value}}" {{if eq $.ActiveTime .Value}}checked{{end}}>
          <span>{{.Label}}</span>
        </label>
        {{end}}
      </div>
      <div class="sidebar-filter-group">
        <div class="sidebar-filter-label">Type</div>
        {{range .TypeFilters}}
        <label class="sidebar-filter-option">
          <input type="radio" name="type" value="{{.Value}}" {{if eq $.ActiveType .Value}}checked{{end}}>
          <span>{{.Label}}</span>
        </label>
        {{end}}
      </div>
    </div>
  </aside>

  <!-- Center Column -->
  <div class="results-column">
    <!-- Compact search bar -->
    <div class="search-compact">
      <div class="search-box">
        <form method="GET" action="/search" role="search" id="search-form">
          <input type="text" name="q" id="q" value="{{.Query}}" autocomplete="off" autofocus
            hx-get="/search" hx-target="#results" hx-trigger="keyup changed delay:500ms" hx-include="this">
          <button type="submit" class="search-box-submit" aria-label="Search">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="11" cy="11" r="8"/>
              <path d="m21 21-4.35-4.35"/>
            </svg>
          </button>
        </form>
      </div>
    </div>

    <!-- Mobile filter chips -->
    <div class="mobile-filter-chips">
      <a href="/search?q={{.Query | urlquery}}" class="mobile-filter-chip {{if not .ActiveCategory}}active{{end}}">All</a>
      {{range .Categories}}
      <a href="/search?q={{$.Query | urlquery}}&category={{.}}" class="mobile-filter-chip {{if eq $.ActiveCategory .}}active{{end}}">{{.}}</a>
      {{end}}
    </div>

    <!-- Results inner -->
    {{template "results_inner" .}}
  </div>

  <!-- Right Sidebar -->
  <aside class="right-sidebar" id="sidebar">
    {{if .Suggestions}}
    <div class="sidebar-card">
      <div class="sidebar-title">Related Searches</div>
      <div class="suggestion-list">
        {{range .Suggestions}}<span class="suggestion"><a href="/search?q={{. | urlquery}}">{{.}}</a></span>{{end}}
      </div>
    </div>
    {{end}}

    {{if .UnresponsiveEngines}}
    <div class="sidebar-card">
      <div class="sidebar-title">Engines with issues</div>
      <ul class="unresponsive-engines">
        {{range .UnresponsiveEngines}}<li>{{index . 0}}: {{index . 1}}</li>{{end}}
      </ul>
    </div>
    {{end}}
  </aside>
</div>
{{end}}