{% load crispy_field from crispy_forms_field %}
{% load blocktrans trans from i18n %}
{% load whitespaceless from ext_theme_tags %}

{% comment rst %}
  Rich select field template
  ==========================

  This template is used by the :py:class:`~readthedocs.core.forms.RichSelect`
  widget type to display a complex dropdown select. Normally, select fields are
  only a value and text choice option, but the :py:class:`~readthedocs.core.forms.RichSelect`
  widget type instead displays a FUI dropdown type with a number of additions,
  like an image, description, and an error description. This gives a field type
  where we can provide a reason why the choice is disabled, before the user
  tries to submit the form.

  To use this template, use the RichSelect class and :py:class:`~readthedocs.core.forms.RichChoice`
  data class to populate the from choices. A brief example is:

  .. code:: python

      choice = RichChoice(name="Foo", value="foo", error="Unavailable", image_url="...")
      field = forms.ChoiceField(
          ...,
          widget=RichSelect(),
          choices=[(choice.value, choice)],
      )

  Attributes are defined on :py:class:`~readthedocs.core.forms.RichSelect`

{% endcomment %}

{% whitespaceless as form_data_bind %}
  {% if data_bind %}
    {{ data_bind }}
  {% elif "data-bind" in field.field.widget.attrs.keys %}
    {% for key, value in field.field.widget.attrs.items %}
      {% if key == "data-bind" %}{{ value }}{% endif %}
    {% endfor %}
  {% else %}
    semanticui: { dropdown: {}}
  {% endif %}
{% endwhitespaceless %}

{% whitespaceless as field_classes %}
  ui long fluid selection search dropdown
  {% if field.field.widget.attrs.readonly %}read-only{% endif %}
  {% if field.field.widget.attrs.multiple %}multiple{% endif %}
  field
{% endwhitespaceless %}

{# Use Knockout data binding, or set ``data-semanticui-dropdown`` which causes Knockout to skip this element #}
<div class="{{ field_classes }}"
     {% if field.field.widget.attrs.use_data_binding %} data-bind="{{ form_data_bind }}" {% else %} data-semanticui-dropdown="true" {% endif %}>
  {{ field.as_hidden }}
  <i class="dropdown icon"></i>
  <input class="search" tabindex="-1" />
  <div class="default text">{{ field.attrs.placeholder }}</div>
  <div class="menu">
    {% for _, choice in field.field.choices %}
      {% comment %}
        Text data attribute specifies the value shown when the item is selected
        in the dropdown. Normally this is a loose copy of the HTML of the item,
        including images, error messages, etc. However, display of the selected
        item looks a bit different and attributes like the field error appear
        in a confusing way. This will show the selected text only instead, but
        the dropdown will still have a rich display.
      {% endcomment %}
      <div class="{% if choice.disabled %}disabled{% endif %} vertical item"
           data-value="{{ choice.value|default_if_none:"" }}"
           data-text="{{ choice.text }}"
           data-description="{{ choice.description }}">
        {% if choice.image_url %}
          <img class="ui mini avatar image"
               src="{{ choice.image_url }}"
               {% if choice.image_alt %}alt="{{ choice.image_alt }}"{% endif %} />
        {% endif %}
        {% if choice.description %}
          <span class="description">{{ choice.description }}</span>
        {% endif %}
        <span class="text">{{ choice.text }}</span>
        {% if choice.extra or choice.error %}
          <span class="extra content">
            {% if choice.extra %}
              <span class="ui basic label">
                <i class="fas fa-info-circle icon"></i>
                {{ choice.extra }}
              </span>
            {% endif %}
            {% if choice.error %}
              <span class="ui basic red label">
                <i class="fas fa-exclamation-triangle icon"></i>
                {{ choice.error }}
              </span>
            {% endif %}
          </span>
        {% endif %}
      </div>
    {% endfor %}
  </div>
</div>