{% extends "base.html" %}

{#
Search Results Page

Dedicated page for search functionality with full-screen experience.
Can be accessed directly at /search/ or used as a fallback.
#}

{% block title %}Search - {{ site.config.title }}{% endblock %}

{% block content %}
<div class="search-page">
  <div class="search-hero fluid-bg">
    <header class="page-header page-header--centered">
      <h1>🔍 Search</h1>
      <p class="search-page-description">
        Search through {{ site.pages | length }} pages of documentation, tutorials, and guides.
      </p>
    </header>

    {# Search Component #}
    {% include 'partials/search.html' %}
  </div>

  {# Search Tips - Compact & Slick #}
  <div class="search-tips">
    <div class="tips-grid tips-grid--compact">
      <div class="tip-card gradient-border-subtle">
        <div class="tip-header">
          <span class="tip-icon">⌨️</span>
          <h3>Shortcuts</h3>
        </div>
        <div class="tip-body">
          <span class="tip-pill"><kbd>⌘/Ctrl</kbd> + <kbd>K</kbd></span>
          <span class="tip-pill"><kbd>Esc</kbd></span>
        </div>
      </div>

      <div class="tip-card gradient-border-subtle">
        <div class="tip-header">
          <span class="tip-icon">🎯</span>
          <h3>Operators</h3>
        </div>
        <div class="tip-body">
          <span class="tip-pill" title="Must include"><code>+term</code></span>
          <span class="tip-pill" title="Exclude"><code>-term</code></span>
          <span class="tip-pill" title="Fuzzy match"><code>term~2</code></span>
        </div>
      </div>

      <div class="tip-card gradient-border-subtle">
        <div class="tip-header">
          <span class="tip-icon">🔍</span>
          <h3>Filters</h3>
        </div>
        <div class="tip-body">
          <span class="tip-text">Filter by section, type, or tags</span>
        </div>
      </div>

      <div class="tip-card gradient-border-subtle">
        <div class="tip-header">
          <span class="tip-icon">📚</span>
          <h3>Index</h3>
        </div>
        <div class="tip-body">
          <span class="tip-text">Docs, Blog, API, & CLI</span>
        </div>
      </div>

      <div class="tip-card gradient-border-subtle" style="grid-column: span 2;">
        <div class="tip-header">
          <span class="tip-icon">🗺️</span>
          <h3>Interactive Graph</h3>
        </div>
        <div class="tip-body" style="padding: 0;">
          <div class="graph-minimap" style="min-height: 250px;"></div>
        </div>
      </div>
    </div>
  </div>

  {# Popular Searches #}
  <div class="popular-searches">
    <h2>Popular Searches</h2>
    <div class="popular-search-links">
      <a href="#" class="popular-search-link" data-query="getting started">Getting Started</a>
      <a href="#" class="popular-search-link" data-query="configuration">Configuration</a>
      <a href="#" class="popular-search-link" data-query="template">Templates</a>
      <a href="#" class="popular-search-link" data-query="markdown">Markdown</a>
      <a href="#" class="popular-search-link" data-query="api">API Reference</a>
      <a href="#" class="popular-search-link" data-query="tutorial">Tutorials</a>
      <a href="#" class="popular-search-link" data-query="optimization">Optimization</a>
      <a href="#" class="popular-search-link" data-query="deployment">Deployment</a>
    </div>
  </div>
</div>

{# moved to assets/js/search-page.js #}

{# styles are covered by components/search.css and global tokens #}
{# Graph scripts loaded in base.html #}
{% endblock %}