{# Menu items template - used for both desktop and mobile menus #}
{# CSS media queries handle which version displays - no need for conditional classes #}


{% if current_user.is_authenticated or not has_password %}
{% if not current_diff_url %}
    {# GROUPS / SETTINGS / IMPORT moved to the left sidebar (sidebar-nav.html) #}
    <li class="pure-menu-item" id="menu-pause">
        <a href="{{ url_for('settings.toggle_all_paused') }}" ><img src="{{url_for('static_content', group='images', filename='pause.svg')}}" alt="{% if all_paused %}{{ _('Resume automatic scheduling') }}{% else %}{{ _('Pause auto-queue scheduling of watches') }}{% endif %}" title="{% if all_paused %}{{ _('Scheduling is paused - click to resume') }}{% else %}{{ _('Pause auto-queue scheduling of watches') }}{% endif %}" class="icon icon-pause"{% if not all_paused %} style="opacity: 0.3"{% endif %}></a>
    </li>
    <li class="pure-menu-item " id="menu-mute">
        <a href="{{ url_for('settings.toggle_all_muted') }}" ><img src="{{url_for('static_content', group='images', filename='bell-off.svg')}}" alt="{% if all_muted %}{{ _('Unmute notifications') }}{% else %}{{ _('Mute notifications') }}{% endif %}" title="{% if all_muted %}{{ _('Notifications are muted - click to unmute') }}{% else %}{{ _('Mute notifications') }}{% endif %}" class="icon icon-mute"{% if not all_muted %} style="opacity: 0.3"{% endif %}></a>
    </li>

     <li class="pure-menu-item " >
        <a href="{{ url_for('settings.settings_page') }}"

           title="{{ _('Settings') }}">
            <svg class="action-icon" viewBox="0 0 24 24" aria-hidden="true">
                <circle cx="12" cy="12" r="3"/>
                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.01a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h.01a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v.01a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
            </svg>
            <span class="action-label">{{ _('Settings') }}</span>
        </a>
    </li>

    <li class="pure-menu-item " >
        <a href="{{ url_for('imports.import_page') }}"

           title="{{ _('Import') }}">
            <svg class="action-icon" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="7 9 12 4 17 9"/>
                <line x1="12" y1="4" x2="12" y2="16"/>
            </svg>
            <span class="action-label">{{ _('Import') }}</span>
        </a>
    </li>
{% else %}
    <li class="pure-menu-item menu-collapsible">
        <a href="{{ url_for('ui.ui_edit.edit_page', uuid=uuid, next='diff') }}"
           class="pure-menu-link">{{ _('EDIT') }}</a>
    </li>
{% endif %}
{%- if current_user.is_authenticated -%}
    <li class="pure-menu-item menu-collapsible">
        <a href="{{ url_for('logout', redirect=request.path) }}" class="pure-menu-link">{{ _('LOG OUT') }}</a>
    </li>
{%- endif -%}

{% else %}
    <li class="pure-menu-item menu-collapsible">
        <a class="pure-menu-link" href="https://changedetection.io">{{ _('Website Change Detection and Notification.') }}</a>
    </li>
{% endif %}
    <li class="pure-menu-item menu-collapsible" id="inline-menu-extras-group">
        {% if not llm_features_disabled %}
        <button class="toggle-button toggle-ai-mode" type="button" title="{{ _('Toggle AI Mode') }}" data-llm-configured="{{ 'true' if llm_configured else 'false' }}" data-llm-settings-url="{{ url_for('settings.settings_page') }}#ai">
            <span class="visually-hidden">{{ _('Toggle AI mode') }}</span>
            {% include "svgs/ai-mode-icon.svg" %}<span class="ai-mode-label">LLM</span>
        </button>
        {% endif %}
        <button class="toggle-button toggle-light-mode " type="button" title="{{ _('Toggle Light/Dark Mode') }}">
            <span class="visually-hidden">{{ _('Toggle light/dark mode') }}</span>
            <span class="icon-light">
            {% include "svgs/light-mode-toggle-icon.svg" %}
          </span>
            <span class="icon-dark">
            {% include "svgs/dark-mode-toggle-icon.svg" %}
          </span>
        </button>
        <button class="toggle-button language-selector" type="button" title="{{ _('Change Language') }}">
            <span class="visually-hidden">{{ _('Change language') }}</span>
            <span class="{{ get_flag_for_locale(get_locale()) }}" id="language-selector-flag"></span>
        </button>
        <a class="github-link" href="https://github.com/dgtlmoon/changedetection.io"
           target="_blank" 
          rel="noopener" >
            {% include "svgs/github.svg" %}
        </a>
    </li>