sul-dlss/argo

<%= render(@layout.new(facet_field: @facet_field)) do |component| %>
  <% component.label do %>
    <%= @facet_field.label %>
  <% end %>
  <% component.body do %>
     <%= render Blacklight::FacetFieldListComponent.new(facet_field: @facet_field, layout: false) %>

    <div data-controller="date-choice">
      <div class='mb-3 row'>
        <div class="col-3"><label for="<%= @facet_field.key %>_after_datepicker">From:</label></div>
        <div class="col"><input id="<%= @facet_field.key %>_after_datepicker" type="date"
               data-date-choice-target="afterDate" data-action="change->date-choice#updateQuery" autocomplete="off"></div>
      </div>
      <div class='mb-3 row'>
        <div class="col-3"><label for="<%= @facet_field.key %>_before_datepicker">Through:</label></div>
        <div class="col"><input id="<%= @facet_field.key %>_before_datepicker" type="date"
               data-date-choice-target="beforeDate" data-action="change->date-choice#updateQuery" autocomplete="off"></div>
      </div>
      <div>
        <%= form_tag search_catalog_path, method: :get do %>
          <%= render Blacklight::HiddenSearchStateComponent.new(params: search_params) %>
          <%= hidden_field_tag "f[#{solr_field_name}][]", '[* TO *]', data: { date_choice_target: 'queryField' } %>
          <%= submit_tag('submit', class: 'btn btn-primary') %>
        <% end %>
      </div>
    </div>
  <% end %>
<% end %>