{% 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">
  <header class="search-page-header">
    <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' %}

  {# Search Tips #}
  <div class="search-tips">
    <h2>Search Tips</h2>

    <div class="tips-grid">
      <div class="tip-card">
        <h3>💡 Keyboard Shortcuts</h3>
        <ul>
          <li><kbd>⌘</kbd> + <kbd>K</kbd> - Focus search (Mac)</li>
          <li><kbd>Ctrl</kbd> + <kbd>K</kbd> - Focus search (Windows/Linux)</li>
          <li><kbd>Esc</kbd> - Clear search or close</li>
        </ul>
      </div>

      <div class="tip-card">
        <h3>🎯 Search Operators</h3>
        <ul>
          <li><code>+python</code> - Must include "python"</li>
          <li><code>-deprecated</code> - Exclude "deprecated"</li>
          <li><code>tutorial~2</code> - Fuzzy match (tolerance 2)</li>
          <li><code>title:bengal</code> - Search in title only</li>
        </ul>
      </div>

      <div class="tip-card">
        <h3>🔍 Advanced Search</h3>
        <ul>
          <li>Use filters to narrow results by section, type, or tags</li>
          <li>Multiple word queries search for all terms</li>
          <li>Results are ranked by relevance</li>
          <li>Content includes titles, descriptions, and body text</li>
        </ul>
      </div>

      <div class="tip-card">
        <h3>📚 What's Indexed?</h3>
        <ul>
          <li>All documentation pages</li>
          <li>Blog posts and tutorials</li>
          <li>API and CLI reference</li>
          <li>Guides and examples</li>
        </ul>
      </div>
    </div>
  </div>

  {# Popular Searches (optional - can be customized) #}
  <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>

<script>
(function() {
  'use strict';

  // Handle popular search clicks
  document.querySelectorAll('.popular-search-link').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const query = this.getAttribute('data-query');
      const searchInput = document.getElementById('search-input');
      if (searchInput) {
        searchInput.value = query;
        searchInput.dispatchEvent(new Event('input', { bubbles: true }));
        searchInput.focus();

        // Scroll to results
        setTimeout(() => {
          const results = document.getElementById('search-results');
          if (results) {
            results.scrollIntoView({ behavior: 'smooth', block: 'start' });
          }
        }, 100);
      }
    });
  });

  // Check URL hash for initial query
  if (window.location.hash) {
    const query = decodeURIComponent(window.location.hash.substring(1));
    if (query) {
      const searchInput = document.getElementById('search-input');
      if (searchInput) {
        // Wait for search to initialize
        setTimeout(() => {
          searchInput.value = query;
          searchInput.dispatchEvent(new Event('input', { bubbles: true }));
        }, 500);
      }
    }
  }
})();
</script>

<style>
/* Search Page Styles */
.search-page {
  max-width: 1000px;
  margin: 0 auto;
}

.search-page-header {
  text-align: center;
  margin-bottom: 2rem;
}

.search-page-header h1 {
  margin: 0 0 0.5rem 0;
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-extrabold);
}

.search-page-description {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

/* Search Tips */
.search-tips {
  margin-top: 4rem;
}

.search-tips h2 {
  margin: 0 0 1.5rem 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.tip-card {
  padding: 1.5rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-large);
}

.tip-card h3 {
  margin: 0 0 1rem 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.tip-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tip-card li {
  margin: 0.5rem 0;
  font-size: var(--text-body-small);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.tip-card kbd {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  font-size: var(--text-xs);
  font-family: var(--font-family-code);
  background-color: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  box-shadow: 0 1px 0 var(--color-border-dark);
  margin: 0 0.125rem;
}

.tip-card code {
  padding: 0.125rem 0.375rem;
  font-size: var(--text-xs);
  background-color: var(--color-bg-code);
  border-radius: 3px;
}

/* Popular Searches */
.popular-searches {
  margin-top: 4rem;
}

.popular-searches h2 {
  margin: 0 0 1.5rem 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.popular-search-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.popular-search-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-full);
  font-size: var(--text-body-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.popular-search-link:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
  box-shadow: var(--elevation-low);
}

/* Responsive */
@media (max-width: 768px) {
  .tips-grid {
    grid-template-columns: 1fr;
  }

  .search-page-header h1 {
    font-size: var(--text-3xl);
  }

  .search-tips h2,
  .popular-searches h2 {
    font-size: var(--text-xl);
  }
}
</style>
{% endblock %}