{% extends "base.html" %}
{% block title %} Advanced Search {% endblock %}
{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='fits_websit\static\\style.css') }}">

<div class="container">
  <h1>Advanced Search for MACRO Images</h1>
  <div class="sidebar">
    <!-- Buttons -->
    <button type="button" id="addSearchBarBtn">Add Search Bar</button>
    <button type="button" id="addExcludeDateBtn">Add Exclude Date Range</button>
    <button type="button" id="addIncludeDateBtn">Add Include Date Range</button>
    <button type="button" id="clearRangeBtn">Clear Date Range</button>
    <button type="submit" form="searchForm">Search</button>
  </div>

  <form id="searchForm" method="POST">
    <div id="searchFields">
      <div class="search-group">
        <label for="search">Search FTS Headers:</label>
        <input type="text" id="search" name="search[]" placeholder="Enter Search term" />
      </div>
    </div>

    <!-- Calendar Data Section -->
    <div id="calendarFields">
      <!-- Include Date Ranges -->
      <div id="includeDateGroup" class="date-group">
        <h3>Include Date Ranges</h3>
        <div class="calendar-group">
          <label for="startDate">Start Date:</label>
          <input type="date" id="startDate" name="startDate" />
        </div>
        <div class="calendar-group">
          <label for="endDate">End Date:</label>
          <input type="date" id="endDate" name="endDate" />
        </div>
      </div>

      <!-- Exclude Date Ranges -->
      <div id="excludeDateGroup" class="date-group">
        <h3>Exclude Date Ranges</h3>
        <div class="calendar-group">
          <label for="startDate">Start Date:</label>
          <input type="date" id="startDate" name="startDate" />
        </div>
        <div class="calendar-group">
          <label for="endDate">End Date:</label>
          <input type="date" id="endDate" name="endDate" />
        </div>
      </div>
    </div>
  </form>

  <div id="results">
    <div class="results-count">
      {% if results %}
          Found {{ results|length }} result(s) for "{{ search_query }}"
      {% else %}
          No results found for "{{ search_query }}"
      {% endif %}
    </div>

    {% if results %}
        {% for result in results %}
            <div class="result-item">
                <div class="result-title">{{ result.filepath }}</div>
                <div class="result-description">{{ result.description }}</div>
                <div class="result-category">{{ result.category }}</div>
            </div>
        {% endfor %}
    {% else %}
        <div class="no-results">
            <p>We couldn't find any matches for your search.</p>
            <p>Try different keywords or check your spelling.</p>
        </div>
    {% endif %}
  </div>
</div>
<script src="{{ url_for('static', filename='fits_website\static\script.js') }}"></script>
{% endblock %}