{% load ui_classes %}
{% ui_class "ui.chrome" "iconXs" as icon_class %}
<template x-ui-select:chip>
    <span data-ui-badge data-ui-action-recipe="badge" data-radius="sm"
          :class="$styles.chip" :data-variant="$chipAppearance.variant"
          :data-color="$chipAppearance.color" :data-size="$chipAppearance.size">
        <span :data-ui-select-chip-label="$chip.hasSelectedContent ? '' : null" data-ui-select-chip-selected-content
              :class="$styles.label" x-show="$chip.hasSelectedContent"></span>
        <template x-if="!$chip.hasSelectedContent">
            <span data-ui-select-chip-label :class="$styles.label">
                <span :class="$styles.plainLabel" x-text="$chip.label"></span>
            </span>
        </template>
        <button type="button" data-ui-badge-close data-ui-select-chip-remove
                :class="$styles.remove" :data-value="$chip.value"
                :aria-label="`Remove ${$chip.label}`" :disabled="$chip.disabled">
            <c-icons.close class="{{ icon_class }}" aria-hidden="true" />
        </button>
    </span>
</template>