<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#advancedSearchModal">
  Advanced<span class="d-none d-md-inline"> Filter</span>
</button>
<div class="modal fade" id="advancedSearchModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title h4" id="advancedSearchModalLabel">Advanced Filter</h1>
        <p class="small text-muted">Use these filters to refine your search results. You can combine multiple fields to get more specific results.</p>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="advancedSearchForm">
          <div id="searchRows">
            <!-- Initial search rows will be inserted here -->
          </div>
          <div class="mt-3">
            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="addSearchRow()">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>
              </svg>
              Add Another Field
            </button>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="submitAdvancedSearch()">Search</button>
      </div>
    </div>
  </div>
</div>

<!-- Template for search row -->
<template id="searchRowTemplate">
    <div class="search-row mb-4">
        <div class="row align-items-center">
            <div class="col-4 col-md-2">
                <select class="form-select form-select-sm boolean-operator">
                    <option value="AND">AND</option>
                    <option value="OR">OR</option>
                    <option value="NOT">NOT</option>
                </select>
            </div>
            <div class="col-5 col-md-3">
                <select class="form-select form-select-sm field-select">
                    <option value="all">All Fields</option>
                    <option value="title">Title</option>
                    {% for f in site.data.config-browse %}{% assign cap-field = f.field | capitalize %}
                      <option value="{{ f.field }}">{{ f.facet_name | default: f.display_name | default: cap-field }}</option>
                    {% endfor %}
            <div class="col-10 col-md-6">
                <input type="text" class="form-control form-control-sm search-input" placeholder="Enter search term">
            </div>
            <div class="col-2 col-md-1">
                <button type="button" class="btn btn-outline-danger btn-sm remove-row" aria-label="Remove condition">×</button>
            </div>
        </div>
    </div>
</template>
