36 lines
2.1 KiB
Plaintext
36 lines
2.1 KiB
Plaintext
<%= form_with url: entries_path,
|
||
method: :get,
|
||
data: { turbo_stream: true } do |form| %>
|
||
<div id="search_hidden_fields">
|
||
<%= render "entries/search_hidden_fields" %>
|
||
</div>
|
||
<div class="relative">
|
||
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
||
<svg class="h-5 w-5 text-slate-400 block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||
</svg>
|
||
</div>
|
||
<div class="absolute inset-y-0 right-0 pr-4 flex items-center">
|
||
<button type="button"
|
||
class="text-slate-400 hover:text-slate-600 text-2xl leading-none flex items-center justify-center <%= @query.present? ? "" : "hidden" %>"
|
||
data-clear-search
|
||
aria-label="Clear search"
|
||
onclick="const input=this.closest('form').querySelector('input[name=q]'); if(input){input.value='';} this.closest('form').requestSubmit();">
|
||
×
|
||
</button>
|
||
</div>
|
||
<%= form.text_field :q,
|
||
value: @query,
|
||
placeholder: "Search words, phrases, or biblical terms...",
|
||
class: "block w-full pl-11 pr-10 mt-2 mb-2 py-4 bg-white border border-slate-200 rounded-2xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition",
|
||
oninput: "const clearBtn=this.form.querySelector('[data-clear-search]'); if(clearBtn){clearBtn.classList.toggle('hidden', this.value.length===0);} this.form.requestSubmit();" %>
|
||
</div>
|
||
<button type="button"
|
||
class="text-xs font-semibold uppercase tracking-wider text-slate-500 hover:text-slate-700 inline-flex items-center p-1"
|
||
aria-expanded="false"
|
||
aria-controls="entries_filters"
|
||
data-toggle-filters>
|
||
Show Filters
|
||
</button>
|
||
<% end %>
|