<details class="case-details">
  <summary>Cases</summary>
  <input type="text" placeholder="Search Cases..."
         _="on keyup
            if the event's key is 'Escape'
            set my value to ''
            trigger keyup
            else
            log 'test' then
            show .case-option in #case-options when its textContent contains my value
           ">
  <ul id="case-options">
    {% for group_name, group_choices, group_index in widget.optgroups reversed %}
      {% for widget in group_choices reversed %}

        {% with widget.value.instance as case %}
          {% if not forloop.parentloop.first %}
            <li class="case-option">
              <span class="d-flex flex-row ">
                <span class="p-2">{{case.id}}</span>
                <span class="p-2">{{case.title}}</span>
                <span class="p-2">{{case.created_date}}</span>
                <button class="p-2 btn btn-sm border border-dark rounded text-primary"
                        type="button"
                        _="on click set (next <select/>)'s value to '{{case.pk}}' then remove @open from .case-details then go to top of (next <select/>)'s parent"
                >select</button>
              </span>
            </li>
          {% endif %}
        {% endwith %}
      {% endfor %}

    {% endfor %}
  </ul>
</details>

<select name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% for group_name, group_choices, group_index in widget.optgroups %}{% if group_name %}
  <optgroup label="{{ group_name }}">{% endif %}{% for widget in group_choices %}
    {% include widget.template_name %}{% endfor %}{% if group_name %}
      </optgroup>{% endif %}{% endfor %}
</select>

