{% extends 'layout.html' %}

{% block nav_settings %}selected{% endblock %}
{% block content %}
    <div class="banner-small">
        <div class="banner-content">
            <h1 class="banner-header">Settings</h1>
            <p class="banner-info">{% block banner_subtitle%}{% endblock %}</p>
            <div class="pill-row">
                <div>
                    <a class="pill-item pill__critical" href="{{ url_for( 'auth.logout' ) }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M112,216a8,8,0,0,1-8,8H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32h56a8,8,0,0,1,0,16H48V208h56A8,8,0,0,1,112,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L196.69,120H104a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,221.66,122.34Z"></path></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="settings-nav">
        <a href="{{ url_for('settings.general') }}" class="settings-nav__item {% block settings_general %}{% endblock %}">General</a>
        <a href="{{ url_for('settings.server') }}" class="settings-nav__item {% block settings_server %}{% endblock %}">Server</a>
        <a href="{{ url_for('settings.account') }}" class="settings-nav__item {% block settings_account %}{% endblock %}">Account</a>
        <a href="{{ url_for('settings.logs') }}" class="settings-nav__item {% block settings_logs %}{% endblock %}">Logs</a>
    </div>

    <div class="settings-content">
        {% block settings_content %}{% endblock %}
    </div>
{% endblock %}