{% extends 'layouts/app.twig' %}

{% block content %}
  <div class="page-header page-header-split">
    <div>
      <h1>Search</h1>
      <p class="page-subtitle">Find documents, customers, and products across the workspace.</p>
    </div>
  </div>

  <section class="search-page-panel">
    <form class="search-page-form" method="get" action="{{ base_url }}/search">
      <label for="global-search-query">Search term</label>
      <div>
        <input id="global-search-query" type="search" name="q" value="{{ query }}" placeholder="Search by customer, document number, email, product...">
        <button class="btn btn-primary" type="submit">Search</button>
      </div>
    </form>
  </section>

  {% set total_results = results.quotations|length + results.invoices|length + results.customers|length + results.products|length %}

  {% if query == '' %}
    <section class="list-panel">
      <div class="empty-state">
        <h2>Start with a search term</h2>
        <p>Use the top search or this page to find records quickly.</p>
      </div>
    </section>
  {% elseif total_results == 0 %}
    <section class="list-panel">
      <div class="empty-state">
        <h2>No results found</h2>
        <p>No quotations, invoices, customers, or products matched "{{ query }}".</p>
      </div>
    </section>
  {% else %}
    <div class="search-results-grid">
      {% include 'pages/search/_section.twig' with {
        title: 'Quotations',
        items: results.quotations,
        type: 'document',
        base_path: 'quotations'
      } %}

      {% include 'pages/search/_section.twig' with {
        title: 'Invoices',
        items: results.invoices,
        type: 'document',
        base_path: 'invoices'
      } %}

      {% include 'pages/search/_section.twig' with {
        title: 'Customers',
        items: results.customers,
        type: 'customer',
        base_path: 'customers'
      } %}

      {% include 'pages/search/_section.twig' with {
        title: 'Products / Services',
        items: results.products,
        type: 'product',
        base_path: 'products'
      } %}
    </div>
  {% endif %}
{% endblock %}