{% load cache card_badge %}
<label for="{{ field_id }}" class="form-label">{{ label }}</label>
<select name="{{ field_name }}" id="{{ field_id }}" class="form-select select2-field" data-placeholder="{{ placeholder }}" multiple="multiple">
  {% cache cache_timeout cache_key %}
    <option value="" disabled="disabled">{{ placeholder }}</option>
    {% for card in available_cards %}
      <option value="{{ card.pk }}"
              data-name="{{ card.name }}"
              data-rarity="{{ card.rarity.icons }}"
              data-cardset="{{ card.cardset.name }}"
              data-style="{{ card.style }}"
        {{ card.name }} {{ card.rarity.icons }} {{ card.cardset.name }}
      </option>
    {% endfor %}
  {% endcache %}
</select> 

<script>
  $(document).ready(function () {
    $('#{{ field_id }}').select2({
      placeholder: $('#{{ field_id }}').data('placeholder'),
      templateResult: formatOption,
      templateSelection: formatOption,
      width: '100%',
      dropdownAutoWidth: true,
      allowClear: true
    });
  });
</script>