{# @description daisyUI's rating: a row of radio items sharing one name, or, with readonly, a row of <div> items showing a score. max sets the items, five by default; value checks the matching item, and a value out of range checks nothing. half gives two items per whole value in steps of 0.5. clearable adds a hidden first radio that submits an empty value, so the user can take a rating back. shape, variant and size reach every item (the variant as its background colour) and the wrapper. name is needed for anything submitted; without it a unique one keeps the radios of this rating together and means nothing to a form. label names the group; leave it out when a fieldset legend names it. Each radio is named by its value, such as 3 stars. A read-only rating is an image named value out of max and submits nothing. autofocus on the group does nothing, so focus comes from the page's own markup. With clearable, 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 wrapper. See the fieldset gallery entry for a clearable, a half-star, a disabled and a read-only example. #}
{# @prop max:text | default:"5" | description:"How many items show. Anything that is not a positive whole number gives five." #}
{# @prop value:text | description:"The rating to check, or to show when read-only. A value above max, below the lowest step, or off the step checks nothing, and a read-only rating then reads as zero." #}
{# @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 shape:select['star','star-2','heart'] | default:"star" | description:"Shape of every item." #}
{# @prop variant:select['neutral','primary','secondary','accent','info','success','warning','error'] | description:"Colour of every item, as its background." #}
{# @prop size:select['xs','sm','md','lg','xl'] | description:"Size of the rating." #}
{# @prop half:boolean | description:"Give two items per whole value, in steps of 0.5." #}
{# @prop clearable:boolean | description:"Add a hidden first radio that clears the rating. Not used when read-only." #}
{# @prop readonly:boolean | description:"Show the score as a row of divs instead of radios. Submits nothing." #}
{# @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 rating sits outside it." #}
{# @prop class:text | description:"Extra classes added to the wrapper." #}
{% load i18n daisy_cotton %}
<c-vars max="5" value="" name="" label="" shape="star" variant="" size="" half="" clearable="" readonly="" required="" disabled="" form="" class="" />
{% rating_items max half value as items %}{% unique_id "rating" as generated_name %}{% firstof name generated_name as group_name %}{% variation shape "mask" "star,star-2,heart" as shape_class %}{% variation variant "bg" "neutral,primary,secondary,accent,info,success,warning,error" as bg_class %}{% variation size "rating" "xs,sm,md,lg,xl" as size_class %}
{# djlint:off #}
{% if readonly %}{% with top=items|last %}<div class="rating {{ size_class }}{% if half %} rating-half{% endif %} {{ class }}" role="img" aria-label="{% blocktrans with score=items|checked_value|default:0 total=top.value %}{{ score }} out of {{ total }}{% endblocktrans %}" {{ attrs }}>{% for item in items %}<div class="mask {{ shape_class }}{% if item.half %} mask-half-{{ item.half }}{% endif %} {{ bg_class }}"{% if item.checked %} aria-current="true"{% endif %}></div>{% endfor %}</div>{% endwith %}{% else %}<div class="rating {{ size_class }}{% if half %} rating-half{% endif %} {{ class }}" role="radiogroup"{% if label %} aria-label="{{ label }}"{% endif %} {{ attrs }}>{% if clearable %}<input type="radio" class="rating-hidden" name="{{ group_name }}" value="" aria-label="{% trans "No rating" %}"{% if not items|checked_value %} checked{% endif %}{% if required %} required{% endif %}{% if disabled %} disabled{% endif %}{% if form %} form="{{ form }}"{% endif %}>{% endif %}{% for item in items %}<input type="radio" class="mask {{ shape_class }}{% if item.half %} mask-half-{{ item.half }}{% endif %} {{ bg_class }}" name="{{ group_name }}" value="{{ item.value }}" aria-label="{% if item.whole %}{% blocktrans count counter=item.value %}{{ counter }} star{% plural %}{{ counter }} stars{% endblocktrans %}{% else %}{% blocktrans with step=item.value %}{{ step }} stars{% endblocktrans %}{% endif %}"{% if item.checked %} checked{% endif %}{% if required %} required{% endif %}{% if disabled %} disabled{% endif %}{% if form %} form="{{ form }}"{% endif %}>{% endfor %}</div>{% endif %}
{# djlint:on #}