{% extends 'base.html.twig' %}

{% block title %}Settings{% endblock %}

{% block content %}
    <section class="section-settings">
        <header>
            <div class="title">{{ sectionTitle }}</div>

            <div class="tabs">
                <a class="tab {% if app.request.attributes.get('_route') == 'user.settings' %}active{% endif %}" href="{{ path('user.settings') }}">General</a>
                <a class="tab {% if app.request.attributes.get('_route') == 'user.settings.security' %}active{% endif %}" href="{{ path('user.settings.security') }}">Security</a>
                <a class="tab {% if app.request.attributes.get('_route') == 'user.settings.connect' %}active{% endif %}" href="{{ path('user.settings.connect') }}">Connect</a>
            </div>
        </header>

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

{% block styles %}
    <link rel="stylesheet" href="{{ asset('assets/css/settings.css?v=' ~ date().timestamp) }}" />
{% endblock %}