{# @description daisyUI's filter: a row of radio buttons where choosing one hides the others and shows a reset button. It is written without a form, so it can sit inside a larger one. options takes values, or (value, label) pairs such as a form field's choices; give at least one, and pass flat choices without a blank entry, since the reset already clears. value checks the matching option and nothing else. name is needed for anything submitted; without it a unique one keeps the radios of this filter together and means nothing to a form. label names the group; leave it out when a fieldset legend names it. The reset shows × and is announced as Clear filter, or as reset_label. autofocus on the group does nothing, so focus comes from the page's own markup. With the reset, required cannot stop an empty submission, so validate on the server. name, required, disabled and form land on every radio; id, class and every other attribute go to the group. variant and size reach every button; other button styles come from overriding the component. See the fieldset gallery entry for filters with options. #}
{# @prop options:text | description:"The choices: a list of values, each its own label, or of (value, label) pairs, such as a form field's choices. Give it as :options so it arrives as a list. Grouped choices are not supported. Empty renders only the reset." #}
{# @prop value:text | description:"The value of the option to check. A value matching no option checks nothing, so every option shows." #}
{# @prop name:text | description:"Name shared by every radio and submitted with the form. Empty generates a unique one." #}
{# @prop label:text | description:"Accessible name of the group. Leave it out when a fieldset legend names it." #}
{# @prop reset_label:text | description:"Accessible name of the reset button, which shows a cross. Empty uses the translated Clear filter." #}
{# @prop variant:select['neutral','primary','secondary','accent','info','success','warning','error'] | description:"Colour variant of every button." #}
{# @prop size:select['xs','sm','md','lg','xl'] | description:"Size of every button." #}
{# @prop required:boolean | description:"Write required on every radio." #}
{# @prop disabled:boolean | description:"Write disabled on every radio." #}
{# @prop form:text | description:"The id of the form every radio belongs to, when the filter sits outside it." #}
{# @prop class:text | description:"Extra classes added to the group." #}
{% load i18n daisy_cotton %}
<c-vars options="" value="" name="" label="" reset_label="" variant="" size="" required="" disabled="" form="" class="" />
{% filter_options options value as items %}{% unique_id "filter" as generated_name %}{% firstof name generated_name as group_name %}{% unique_id "filter-reset" as reset_id %}{% variation variant "btn" "neutral,primary,secondary,accent,info,success,warning,error" as variant_class %}{% variation size "btn" "xs,sm,md,lg,xl" as size_class %}
{# djlint:off #}
<div class="filter {{ class }}" role="radiogroup"{% if label %} aria-label="{{ label }}"{% endif %} {{ attrs }}><span hidden id="{{ reset_id }}">{% if reset_label %}{{ reset_label }}{% else %}{% trans "Clear filter" %}{% endif %}</span><input type="radio" class="btn filter-reset {{ variant_class }} {{ size_class }}" name="{{ group_name }}" value="" aria-label="×" aria-labelledby="{{ reset_id }}"{% if required %} required{% endif %}{% if disabled %} disabled{% endif %}{% if form %} form="{{ form }}"{% endif %}>{% for option in items %}<input type="radio" class="btn {{ variant_class }} {{ size_class }}" name="{{ group_name }}" value="{{ option.value }}" aria-label="{{ option.label }}"{% if option.checked %} checked{% endif %}{% if required %} required{% endif %}{% if disabled %} disabled{% endif %}{% if form %} form="{{ form }}"{% endif %}>{% endfor %}</div>
{# djlint:on #}