{% from "utils.html" import submit_button %}
{% macro table_search(component_name, endpoint) %}
<!-- Determine search context based on component_name (see table search, in batches.html and batch.html) -->
{% set is_job_search = component_name == "job-search" %}

<form id='search-form' class='min-h-48 flex space-x-4' method="GET" action="{{ endpoint }}" data-is-job-search="{{ 'true' if is_job_search else 'false' }}">
  <div class='basis-2/3'>
    <!-- Search criteria container -->
    <div id='search-criteria-container' class='min-h-24 w-full p-4 bg-slate-200 rounded space-y-3'>
      <!-- Initial search criterion -->
      <div class='search-criterion flex space-x-2 items-center'>
        <select name='criterion-select' class='criterion-select p-2 bg-white rounded border'>
          <option value="">Select a field...</option>
          <optgroup label="General">
            <option value="name">Name</option>
            <option value="cost">Cost</option>
            <option value="duration">Duration</option>
            <option value="start_time">Start Time</option>
            <option value="end_time">End Time</option>
          </optgroup>
          {% if is_job_search %}
          <optgroup label="Job Fields">
            <option value="job_id">Job ID</option>
            <option value="state">State</option>
            <option value="instance">Instance</option>
            <option value="instance_collection">Instance Collection</option>
            <option value="exit_code">Exit Code</option>
          </optgroup>
          {% else %}
          <optgroup label="Batch Fields">
            <option value="batch_id">Batch ID</option>
            <option value="state">State</option>
            <option value="user">User</option>
            <option value="billing_project">Billing Project</option>
          </optgroup>
          {% endif %}
        </select>

        <select class='operator-select p-2 bg-white rounded border'>
          <option value="">Select operator...</option>
        </select>

        <input type='text' class='value-input p-2 bg-white rounded border flex-grow' placeholder='Enter value...'>

        <button type='button' name='remove-criterion' class='remove-criterion text-red-500 hover:text-red-700' title='Remove criterion'>
          <span class="material-symbols-outlined text-sm">close</span>
        </button>
      </div>
    </div>

    <!-- Textbox mode (hidden by default) -->
    <div id='search-textbox-container' class='min-h-32 w-full p-4 bg-slate-200 rounded' style='display: none;'>
      <textarea id='search-input-box' class='h-32 w-full p-4 bg-white rounded resize whitespace-pre border'
        spellcheck="false" autocorrect="off" placeholder='Enter search query (e.g., "cost > 5.00")'>{% if q %}{{ q }}{% endif %}</textarea>
    </div>

    <!-- Buttons below search box container -->
    <div class='flex justify-between items-center mt-3'>
      <div class='flex space-x-2'>
        <button type='button' id='search-add-criterion' class='px-3 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600'>
          Add Search Criterion
        </button>
        <button type='button' id='search-toggle-mode' class='px-3 py-1 bg-gray-500 text-white rounded text-sm hover:bg-gray-600'>
          Switch to textbox query input
        </button>
      </div>
      {{ submit_button('Search') }}
    </div>

    <!-- Hidden input to store the built query -->
    <input type='hidden' id='search-query' name='q' value='{% if q %}{{ q }}{% endif %}'>
  </div>

  <div class='flex items-start'>
    <a href="https://hail.is/docs/batch/advanced_search_help.html" target="_blank">
      <span class="material-symbols-outlined">help</span>
    </a>
  </div>
</form>

<script defer src='{{ base_path }}/batch/static/js/table_search.js'></script>
{% endmacro %}