{% load cache card_badge %}
<label for="{{ field_id }}" class="label">
  <span class="label-text">{{ label }}</span>
</label>
<select name="{{ field_name }}" id="{{ field_id }}" class="select select-bordered w-full card-multiselect" data-placeholder="{{ placeholder }}" multiple x-cloak>
  {% cache cache_timeout card_multiselect selected_values|join:"," %}
    <option value="" disabled>{{ placeholder }}</option>
    {% for card in cards %}
      <option 
        value="{{ card.pk }}"
        data-card-id="{{ card.pk }}"
        data-quantity="{{ card.selected_quantity }}"
        {% if card.selected %}selected{% endif %}
        data-html-content='<div class="m-2">{{ card|card_badge_inline:"__QUANTITY__" }}</div>'
        data-name="{{ card.name }}"
        data-rarity="{{ card.rarity_icon }}"
        data-cardset="{{ card.cardset }}">
        {{ card.name }} {{ card.rarity_icon }} {{ card.cardset }}
      </option>
    {% endfor %}
  {% endcache %}
</select>