{% load static shared %}
<div class="search-container">
  <form id="search" action="" method="get" role="search">
    <ld-search-autocomplete input-name="q"
                            input-placeholder="Search for words or #tags"
                            input-value="{{ search.q|default_if_none:'' }}"
                            target="{{ request.user_profile.bookmark_link_target }}"
                            mode="{{ mode }}"
                            user="{{ search.user }}"
                            shared="{{ search.shared }}"
                            unread="{{ search.unread }}">
    </ld-search-autocomplete>
    <input type="submit" value="Search" class="d-none">
    {% for hidden_field in search_form.hidden_fields %}{{ hidden_field }}{% endfor %}
  </form>
  <ld-dropdown class="search-options dropdown dropdown-right">
    <button type="button"
            aria-label="Search preferences"
            class="btn dropdown-toggle{% if search.has_modified_preferences %} badge{% endif %}">
      <svg width="20" height="20">
        <use href="{% static 'icons.svg' %}?v={{ app_version }}#preferences"></use>
      </svg>
    </button>
    <div class="menu" tabindex="0">
      <form id="search_preferences" action="" method="post">
        {% csrf_token %}
        {% if 'sort' in preferences_form.editable_fields %}
          <div class="form-group">
            <label for="{{ preferences_form.sort.id_for_label }}"
                   class="form-label{% if 'sort' in search.modified_params %} text-bold{% endif %}">Sort by</label>
            {% formfield preferences_form.sort class='select-sm' %}
          </div>
        {% endif %}
        {% if 'shared' in preferences_form.editable_fields %}
          <div class="form-group radio-group"
               role="radiogroup"
               aria-labelledby="search-shared-label">
            <label id="search-shared-label"
                   class="form-label{% if 'shared' in search.modified_params %} text-bold{% endif %}">
              Shared filter
            </label>
            {% for radio in preferences_form.shared %}
              <label for="{{ radio.id_for_label }}" class="form-radio form-inline">
                {{ radio.tag }}
                <i class="form-icon"></i>
                {{ radio.choice_label }}
              </label>
            {% endfor %}
          </div>
        {% endif %}
        {% if 'unread' in preferences_form.editable_fields %}
          <div class="form-group radio-group"
               role="radiogroup"
               aria-labelledby="search-unread-label">
            <label id="search-unread-label"
                   class="form-label{% if 'unread' in search.modified_params %} text-bold{% endif %}">
              Unread filter
            </label>
            {% for radio in preferences_form.unread %}
              <label for="{{ radio.id_for_label }}" class="form-radio form-inline">
                {{ radio.tag }}
                <i class="form-icon"></i>
                {{ radio.choice_label }}
              </label>
            {% endfor %}
          </div>
        {% endif %}
        <div class="actions">
          <button type="submit" class="btn btn-sm btn-primary" name="apply">Apply</button>
          {% if request.user.is_authenticated %}
            <button type="submit" class="btn btn-sm" name="save">Save as default</button>
          {% endif %}
        </div>
        {% for hidden_field in preferences_form.hidden_fields %}{{ hidden_field }}{% endfor %}
      </form>
    </div>
  </ld-dropdown>
</div>
