{% extends "dictionary/base.html" %}
{% load i18n %}
{% block title %}{% trans "settings" context "titleblock" %}{% endblock %}
{% block content %}
    <div class="d-flex justify-content-between">
        <h1 class="h4 m-0"><strong>{% trans "settings" context "titleblock" %}</strong></h1>
        <button class="btn p-0 settings-nav-expander dj-hidden" data-toggle="collapse" aria-expanded="false">
            <svg width="24" height="24" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <use href="#menu"></use>
                <title>{% trans "Settings menu" %}</title>
            </svg>
        </button>
    </div>

    {% url 'user_preferences' as preferences %}
    {% url 'user_preferences_password' as password %}
    {% url 'user_preferences_email' as email %}
    {% url 'user_preferences_terminate' as terminate %}
    {% url 'user_preferences_backup' as backup %}

    <ul class="settings-nav-mobile collapse list-unstyled bg-light mt-3 rounded" style="font-size: 16px;">
        <li><a class="list-group-item" href="{{ preferences }}">{% trans "preferences" %}</a></li>
        <li><a class="list-group-item" href="{{ password }}">{% trans "password" %}</a></li>
        <li><a class="list-group-item" href="{{ email }}">{% trans "e-mail" %}</a></li>
        <li><a class="list-group-item" href="{{ terminate }}">{% trans "account deletion" %}</a></li>
        <li><a class="list-group-item" href="{{ backup }}">{% trans "backup" %}</a></li>
    </ul>

    <div class="mt-2"></div>

    <ul class="nav nav-tabs mb-3 settings-nav-tabs">
        <li class="nav-item">
            <a class="nav-link {% if request.path == preferences %}active{% endif %}" href="{{ preferences }}">{% trans "preferences" %}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {% if request.path == password %}active{% endif %}" href="{{ password }}">{% trans "password" %}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {% if request.path == email %}active{% endif %}" href="{{ email }}">{% trans "e-mail" %}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {% if request.path == terminate %}active{% endif %}" href="{{ terminate }}">{% trans "account deletion" %}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {% if request.path == backup %}active{% endif %}" href="{{ backup }}">{% trans "backup" %}</a>
        </li>
    </ul>

    {% block content_preferences %}{% endblock %}
{% endblock %}