63 lines
3.1 KiB
HTML
63 lines
3.1 KiB
HTML
<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>
|