%= render(@layout.new(facet_field: @facet_field)) do |component| %>
<% component.with_label do %>
<%= @facet_field.label %>
<% end %>
<% component.with_body do %>
<% if @facet_field.selected_range_facet_item %>
<%= render BlacklightRangeLimit::RangeSegmentsComponent.new(facet_field: @facet_field, facet_items: [@facet_field.selected_range_facet_item], classes: ['current', 'mb-3']) %>
<% end %>
<% unless @facet_field.missing_selected? %>
<%# this has to be on page if you want calculated facets to show up, JS sniffs it.
it was very hard to get chart.js to be successfully responsive, required this wrapper!
https://github.com/chartjs/Chart.js/issues/11005 -%>
<%= render BlacklightRangeLimit::RangeFormComponent.new(facet_field: @facet_field, classes: @classes) %>
<% if uses_distribution? &&
(min = @facet_field.min) &&
(max = @facet_field.max) %>
<% if @facet_field.range_queries.any? %>
<%= render BlacklightRangeLimit::RangeSegmentsComponent.new(facet_field: @facet_field) %>
<% else %>
<%= link_to(t('blacklight.range_limit.view_distribution'), load_distribution_link, class: "load_distribution", "data-loading-message-html": t('blacklight.range_limit.loading_html')) %>
<% end %>
<% end %>
<% if range_config[:show_missing_link] && @facet_field.missing_facet_item && !request.xhr? && uses_distribution? %>
<%= render BlacklightRangeLimit::RangeSegmentsComponent.new(facet_field: @facet_field, facet_items: [@facet_field.missing_facet_item], classes: ['missing', 'mt-3']) %>
<% end %>
<% end %>
<% end %>
<% end %>