{% extends '/stdgrid.html.twig' %}

{% block title %}{{ 'Settings' | trans }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="preload" href="{{ asset('assets/default_theme/css/pages/settings.css') }}" as="style" type="text/css">
    <link rel="stylesheet" href="{{ asset('assets/default_theme/css/pages/settings.css') }}">
{% endblock stylesheets %}

{% macro settings_details_element(title, summary, form_name, context) %}
    <details class="section-title-settings" {{ open_details(context.open_details_query, [ form_name ]) }} id={{ form_name ~ '-details' }}>
        <summary>
            <h3>
                {{ title | trans }}
                {{ icon('arrow-down', 'icon icon-details-open') | raw }}
            </h3>
            <em>
                {{ summary | trans }}
            </em>
        </summary>


        {{ form(attribute(context, form_name) | default) }}
    </details>
{% endmacro settings_details_element %}

{% macro settings_details_container(title, summary, tabs, context) %}
    <details class="section-title-settings" {{ open_details(context.open_details_query, tabs) }} id={{ tabs[0] ~ '-details' }}>
        <summary>
            <h3>
                {{ title | trans }}
                {{ icon('arrow-down', 'icon icon-details-open') | raw }}
            </h3>
            <em>
                {{ summary | trans }}
            </em>
        </summary>


        {% if title == 'Profile' %}
            <li>
                <nav class='section-settings-nav'>
                    <ul>
                        <li>
                            {{ _self.settings_details_element('Personal Info', 'Nickname, Homepage, Bio, Self Tags and more.', 'profile', context) }}
                        </li>

                        <hr>

                        {% for tab in context.profile_tabs %}
                            <li>
                                <details class="section-title-settings">  {# TODO: add ID and open_details and to parent #}
                                <summary>
                                    <h3>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
                                    <em>{{ tab['desc'] }}</em>
                                </summary>

                                {% include tab['controller']['_template'] with tab['controller'] only %}
                                </details>
                            </li>

                            <hr>
                        {% endfor %}
                    </ul>
                </nav>
            </li>
        {% elseif title == 'Email' %}
            <li>
                {{ form(context.email) }}
            </li>
        {% elseif title == 'Password' %}
            <li>
                {{ form(context.password) }}
            </li>
        {% elseif title == 'Language' %}
            <li>
                {{ form(context.language) }}
            </li>
        {% elseif title == 'Notifications' %}
            <li>
                <nav class='section-settings-nav'>
                    <ul>
                        {% for transport, form_transport in context.tabbed_forms_notify %}
                            <li>
                                <details class="section-title-settings">
                                    <summary>
                                        <h3>{{ transport }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
                                        <em>{{ transport }}'s notification options.</em>
                                    </summary>

                                    <div id="form_{{ transport }}" class='form'>
                                        {{ form(form_transport) }}
                                    </div>
                                </details>
                            </li>
                            <hr>
                        {% endfor %}
                    </ul>
                </nav>
            </li>
        {% endif %}
    </details>
{% endmacro settings_details_container %}

{% block body %}
    <nav class='section-settings'>
        <h2>Settings</h2>
        <ul>
            <li>
                {% set profile_tabs = handle_event('PopulateProfileSettingsTabs', app.request) %}
                {{ _self.settings_details_container('Profile', 'Personal Information, Avatar and Profile', ['profile', 'personal-info'], _context) }}
            </li>
            <hr>
            <li>
                {{ _self.settings_details_container('Email', 'Set incoming and outgoing email settings', ['email'], _context) }}
            </li>
            <li>
                {{ _self.settings_details_container('Password', 'Change current password', ['password'], _context) }}
            </li>
            <li>
                {{ _self.settings_details_container('Language', 'Select and set language preferences', ['language'], _context) }}
            </li>
            <hr>
            <li>
                {{ _self.settings_details_container('Notifications', 'Enable/disable notifications (Email, XMPP, Replies...)', ['notifications'], _context) }}
            </li>
        </ul>
    </nav>
{% endblock body %}

{% block javascripts %}{% endblock %}