{% comment %}
# SPDX-License-Identifier: AGPL-3.0-or-later
{% endcomment %}

{% load i18n %}
{% load extras %}

<li id="id_theme_menu" class="dropdown nav-item">
  <a href="#" title="{% trans "Toggle theme (auto)" %}"
     class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
     role="button" aria-expanded="false" aria-haspopup="true"
     id="id_theme_menu_link">
    <span id="id_active_theme_icon">
      {% icon 'adjust'  %}
    </span>
    <span class="nav-text d-md-none" id="id_toggle_theme_text">
      {% trans "Toggle theme" %}
    </span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="id_theme_menu_link">
    <li>
      <button type="button" class="dropdown-item d-flex align-items-center"
              data-bs-theme-value="light" aria-pressed="false">
        {% icon 'sun' %}
        {% trans "Light" %}
        {% icon 'check' %}
      </button>
    </li>
    <li>
      <button type="button" class="dropdown-item d-flex align-items-center"
              data-bs-theme-value="dark" aria-pressed="false">
        {% icon 'moon' %}
        {% trans "Dark" %}
        {% icon 'check' %}
      </button>
    </li>
    <li>
      <button type="button" class="dropdown-item d-flex align-items-center"
              data-bs-theme-value="auto" aria-pressed="true">
        {% icon 'adjust' %}
        {% trans "Auto" %}
        {% icon 'check' %}
      </button>
    </li>
  </ul>
</li>
