{# Theme-Umschalter: ein Tippen schaltet System → Hell → Dunkel weiter.
   Serverseitig per POST (kein JS), Icon zeigt den aktuellen Modus.
   Shell-unabhängig – nutzt .cp-iconbtn aus dem jeweils geladenen Komponenten-CSS. #}
{%- set theme_next = {'system': 'hell', 'hell': 'dunkel', 'dunkel': 'system'} -%}
{%- set theme_label = {'system': 'System', 'hell': 'Hell', 'dunkel': 'Dunkel'} -%}
<form class="cp-topbar__theme" method="post" action="{{ url_for('main.theme_setzen') }}">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
  <input type="hidden" name="modus" value="{{ theme_next[current_theme] }}">
  <input type="hidden" name="next" value="{{ request.path }}">
  <button type="submit" class="cp-iconbtn"
          aria-label="Darstellung: {{ theme_label[current_theme] }}. Tippen für {{ theme_label[theme_next[current_theme]] }}.">
    {% if current_theme == 'hell' %}
      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor"
           stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <circle cx="12" cy="12" r="4"></circle>
        <path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"></path>
      </svg>
    {% elif current_theme == 'dunkel' %}
      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor"
           stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path>
      </svg>
    {% else %}
      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor"
           stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
        <circle cx="12" cy="12" r="9"></circle>
        <path d="M12 3a9 9 0 0 1 0 18z" fill="currentColor" stroke="none"></path>
      </svg>
    {% endif %}
  </button>
</form>