{% extends '@MauticCore/Default/content.html.twig' %}

{% block headerTitle %}{{ 'mautic.user.account.settings'|trans }}{% endblock %}
{% block mauticContent %}user{% endblock %}

{% block content %}

<!-- start: box layout -->
<div class="container">
    <!-- step container -->
    <div class="row">
        <div class="col-md-3 height-auto">

            {% if me.getId() %}
            <div class="media">
                <div class="pull-left">
                    <img class="img-circle mt-md mb-xs img-bordered media-object" src="{{ gravatarGetImage(me.getEmail()) }}"
                        alt="" width="65px">
                </div>
                <div class="media-body">
                    <h3 class="fw-sb">{{ me.getName() }}</h3>
                    <span class="text-secondary">{{ me.getPosition() }}</span>
                </div>
            </div>
            <hr />
            {% endif %}

            <ul class="list-group list-group-tabs">
                <li class="list-group-item active">
                    <a href="#profile" class="list-group-item-heading steps" data-toggle="tab">
                        {{ 'mautic.user.account.header.details'|trans }}
                    </a>
                </li>

                {% if permissions['apiAccess'] %}
                <li class="list-group-item">
                    <a href="#clients" class="list-group-item-heading steps" data-toggle="tab">
                        {{ 'mautic.user.account.header.authorizedclients'|trans }}
                    </a>
                </li>
                {% endif %}

                <li class="list-group-item">
                    <a href="#appearance" class="list-group-item-heading steps" data-toggle="tab">{{
                        'mautic.user.account.appearance'|trans }}</a>
                </li>

                <li class="list-group-item">
                    <a href="#accessibility" class="list-group-item-heading steps" data-toggle="tab">{{
                        'mautic.user.account.accessibility'|trans }}</a>
                </li>
            </ul>

        </div>
        <!--/ step container -->

        <!-- container -->
        <div class="col-md-9 height-auto">
            <div class="tab-content">
                <div class="tab-pane fade in active bdr-rds-0 bdr-w-0" id="profile">
                    {{ form_start(userForm) }}
                    <div class="row pa-md bdr-b">
                        <h4 class="fw-sb">{{ 'mautic.user.account.header.details'|trans }}</h4>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <h3 id="personal-info" class="pt-20 mb-xs">{{ 'mautic.user.config.title.get_to_know_you'|trans }}</h3>
                            <div class="text-secondary small pb-20">{{ 'mautic.user.config.personalize.interface.helper'|trans }}</div>
                            {{ permissions.editName ? form_row(userForm.firstName) : form_row(userForm.firstName_unbound) }}
                            {{ permissions.editName ? form_row(userForm.lastName) : form_row(userForm.lastName_unbound) }}
                            {{ permissions.editPosition ? form_row(userForm.position) : form_row(userForm.position_unbound) }}
                            {{ form_row(userForm.signature) }}

                            <h3 id="locale" class="pt-20 mb-xs">{{ 'mautic.user.config.title.locale'|trans }}</h3>
                            <div class="text-secondary small pb-20">{{ 'mautic.user.config.region.preferences.helper'|trans }}</div>
                            {{ form_row(userForm.timezone) }}
                            {{ form_row(userForm.locale) }}
                        </div>
                        <div class="col-md-6">
                            <h3 id="security" class="pt-20 mb-xs">{{ 'mautic.user.config.title.account_data_security'|trans }}</h3>
                            <div class="text-secondary small pb-20">{{ 'mautic.user.config.account.security.helper'|trans }}</div>
                            {{ permissions.editUsername ? form_row(userForm.username) : form_row(userForm.username_unbound) }}
                            {{ permissions.editEmail ? form_row(userForm.email) : form_row(userForm.email_unbound) }}
                            {{ form_row(userForm.plainPassword.password) }}
                            {{ form_row(userForm.plainPassword.confirm) }}
                            <h3 id="learning" class="pt-20 mb-xs">{{ 'mautic.user.config.title.experience_and_learning'|trans }}</h3>
                            <div class="text-secondary small pb-20">{{ 'mautic.user.config.title.experience_and_learning.description'|trans }}</div>
                            {% include '@MauticCore/Helper/button.html.twig' with {
                                buttons: [
                                    {
                                        label: 'mautic.user.config.title.experience_and_learning.reset_dismissed',
                                        variant: 'tertiary',
                                        size: 'sm',
                                        icon: 'ri-refresh-line',
                                        danger: true,
                                        onclick: 'Mautic.resetDismissedElements()',
                                    }
                                ]
                            } %}
                        </div>
                    </div>
                    {{ form_row(userForm.preferences) }}
                    {{ form_end(userForm) }}
                </div>

                {% if permissions.apiAccess is defined and permissions.apiAccess %}
                <div class="tab-pane fade bdr-rds-0 bdr-w-0" id="clients">
                    <div class="row pa-md bdr-b">
                        <h4 class="fw-sb">{{ 'mautic.user.account.header.authorizedclients'|trans }}</h4>
                    </div>
                    <div class="row">
                        {{ authorizedClients|raw }}
                    </div>
                </div>
                {% endif %}

                <div class="tab-pane fade bdr-rds-0 bdr-w-0" id="appearance">
                    <div class="row pa-md bdr-b">
                        <h4 class="fw-sb">{{ 'mautic.user.account.appearance'|trans }}</h4>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 mb-lg">

                            <h3 class="pt-20">
                                {{ 'mautic.user.account.appearance.theme_preferences'|trans }}
                                {% include '@MauticCore/Helper/toggletip.html.twig' with {
                                    title: 'mautic.user.account.appearance.theme_preferences.popover.title',
                                    content: 'mautic.user.account.appearance.theme_preferences.popover.content',
                                } %}
                            </h3>
                            <div class="help-block mb-md">{{ 'mautic.user.account.appearance.theme_help'|trans }}</div>
                            <div class="radio-group radio-cards row">
                                {{ include('@MauticUser/Helper/theme.html.twig', {
                                    themes: [
                                        {
                                            id: 'light',
                                            name: 'mautic.user.account.appearance.theme_light',
                                            description: 'mautic.user.account.appearance.theme_light_description',
                                            preview: '@MauticUser/Profile/images/_light_preview.html.twig',
                                            checked: true
                                        },
                                        {
                                            id: 'dark',
                                            name: 'mautic.user.account.appearance.theme_dark',
                                            description: 'mautic.user.account.appearance.theme_dark_description',
                                            preview: '@MauticUser/Profile/images/_dark_preview.html.twig'
                                        },
                                        {
                                            id: 'solarized-light',
                                            name: 'mautic.user.account.appearance.theme_solarized_light',
                                            description: 'mautic.user.account.appearance.theme_solarized_light_description',
                                            preview: 'app/bundles/UserBundle/Resources/views/Profile/images/_solarized_light_preview.svg'
                                        },
                                        {
                                            id: 'solarized-dark',
                                            name: 'mautic.user.account.appearance.theme_solarized_dark',
                                            description: 'mautic.user.account.appearance.theme_solarized_dark_description',
                                            preview: 'app/bundles/UserBundle/Resources/views/Profile/images/_solarized_dark_preview.svg'
                                        },
                                        {
                                            id: 'dark-freire',
                                            name: 'mautic.user.account.appearance.theme_freire',
                                            description: 'mautic.user.account.appearance.theme_freire_description',
                                            preview: 'app/bundles/UserBundle/Resources/views/Profile/images/_freire_preview.svg'
                                        }
                                    ]
                                }) }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade bdr-rds-0 bdr-w-0" id="accessibility">
                    <div class="row pa-md bdr-b">
                        <h4 class="fw-sb">{{ 'mautic.user.account.accessibility'|trans }}</h4>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 mb-lg">
                            <h3 class="pt-20 mb-md">{{ 'mautic.user.account.accessibility.appearance'|trans }}</h3>
                            <h4>{{ 'mautic.user.account.accessibility.smooth_color_transitions'|trans }}</h4>
                            <div class="help-block">{{ 'mautic.user.account.accessibility.smooth_color_transitions_help'|trans }}</div>
                            <div class="radio-group">
                                <div class="radio-option">
                                    <input type="radio" id="transitions-enabled" name="reduce-motion" value="false"
                                        data-attribute-toggle="reduce-motion" data-attribute-value="false" checked>
                                    <label for="transitions-enabled">
                                        <strong>{{ 'mautic.user.account.accessibility.enabled'|trans }}</strong>
                                        <div class="text-help">{{ 'mautic.user.account.accessibility.transitions_enabled_description'|trans }}
                                        </div>
                                    </label>
                                </div>
                                <div class="radio-option">
                                    <input type="radio" id="transitions-disabled" name="reduce-motion" value="true"
                                        data-attribute-toggle="reduce-motion" data-attribute-value="true">
                                    <label for="transitions-disabled">
                                        <strong>{{ 'mautic.user.account.accessibility.disabled'|trans }}</strong>
                                        <div class="text-help">{{ 'mautic.user.account.accessibility.transitions_disabled_description'|trans }}</div>
                                    </label>
                                </div>
                            </div>
                            <hr>

                            <h4>{{ 'mautic.user.account.accessibility.borders_outline_style'|trans }}</h4>
                            <div class="help-block">{{ 'mautic.user.account.accessibility.borders_outline_style_help'|trans }}</div>
                            <div class="radio-group">
                                <div class="radio-option">
                                    <input type="radio" id="borders-disabled" name="contrast-borders" value="false"
                                        data-attribute-toggle="contrast-borders" data-attribute-value="false" checked>
                                    <label for="borders-disabled">
                                        <strong>{{ 'mautic.user.account.accessibility.disabled'|trans }}</strong>
                                        <div class="text-help">{{ 'mautic.user.account.accessibility.borders_disabled_description'|trans }}
                                        </div>
                                    </label>
                                </div>
                                <div class="radio-option">
                                    <input type="radio" id="borders-enabled" name="contrast-borders" value="true"
                                        data-attribute-toggle="contrast-borders" data-attribute-value="true">
                                    <label for="borders-enabled">
                                        <strong>{{ 'mautic.user.account.accessibility.enabled'|trans }}</strong>
                                        <div class="text-help">{{ 'mautic.user.account.accessibility.borders_enabled_description'|trans }}
                                        </div>
                                    </label>
                                </div>
                            </div>
                            <hr>
                            <h4>{{ 'mautic.user.account.accessibility.reduce_transparency_blur'|trans }}</h4>
                            <div class="help-block">{{ 'mautic.user.account.accessibility.reduce_transparency_blur_help'|trans }}</div>
                            <div class="radio-group">
                                <div class="radio-option">
                                    <input type="radio" id="transparency-normal" name="reduce-transparency"
                                        value="false" data-attribute-toggle="reduce-transparency"
                                        data-attribute-value="false" checked>
                                    <label for="transparency-normal">
                                        <strong>{{ 'mautic.user.account.accessibility.normal'|trans }}</strong>
                                        <div class="text-help">{{ 'mautic.user.account.accessibility.transparency_normal_description'|trans }}
                                        </div>
                                    </label>
                                </div>
                                <div class="radio-option">
                                    <input type="radio" id="transparency-reduced" name="reduce-transparency"
                                        value="true" data-attribute-toggle="reduce-transparency"
                                        data-attribute-value="true">
                                    <label for="transparency-reduced">
                                        <strong>{{ 'mautic.user.account.accessibility.reduced'|trans }}</strong>
                                        <div class="text-help">{{ 'mautic.user.account.accessibility.transparency_reduced_description'|trans }}</div>
                                    </label>
                                </div>
                            </div>
                            <hr>
                            <h3 class="pt-20 mb-md">{{ 'mautic.user.account.accessibility.content'|trans }}</h3>
                            <h4>{{ 'mautic.user.account.accessibility.link_underlines'|trans }}</h4>
                            <div class="help-block">{{ 'mautic.user.account.accessibility.link_underlines_help'|trans }}
                            </div>
                            <div class="radio-group">
                                <div class="radio-option">
                                    <input type="radio" id="underlines-disabled" name="enable-underlines" value="false"
                                        data-attribute-toggle="enable-underlines" data-attribute-value="false" checked>
                                    <label for="underlines-disabled">
                                        <strong>{{ 'mautic.user.account.accessibility.disabled'|trans }}</strong>
                                        <div class="text-help">{{ 'mautic.user.account.accessibility.underlines_disabled_description'|trans }}
                                        </div>
                                    </label>
                                </div>
                                <div class="radio-option">
                                    <input type="radio" id="underlines-enabled" name="enable-underlines" value="true"
                                        data-attribute-toggle="enable-underlines" data-attribute-value="true">
                                    <label for="underlines-enabled">
                                        <strong>{{ 'mautic.user.account.accessibility.enabled'|trans }}</strong>
                                        <div class="text-help">{{ 'mautic.user.account.accessibility.underlines_enabled_description'|trans }}
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--/ end: container -->
</div>
{% endblock %}