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

{% set breadcrumb = buildBreadcrumb([{'route': 'app_profile_index', 'trans': 'menu.profile'}]) %}

{% block title %}
    {{ renderTitle(breadcrumb)  }}
{% endblock %}

{% block breadcrumb %}
    {{ renderBreadcrumb(breadcrumb)  }}
{% endblock %}

{% block content %}
    <div class="title-block">
        <h1>{{ 'menu.settings'|trans }}</h1>
    </div>

    <div class="content-block">
        <div class="block-element">
            {{ form_start(form) }}
                <h3 class="header">{{ 'title.update_settings'|trans }}</h3>

                <div class="row">
                    <div class="col s12 l5 offset-l1 xl3 offset-xl3">
                        {{ form_row(form.locale, {'label' : 'label.locale', 'attr': {'class': 'js-select-locale'}} ) }}
                    </div>
                    <div class="col s12 l5 xl3">
                        {{ form_row(form.currency, {'label' : 'label.currency'} ) }}
                    </div>
                </div>

                <div class="row">
                    <div class="col s12 l5 offset-l1 xl3 offset-xl3">
                        {{ form_row(form.timezone, {'label' : 'label.timezone'} ) }}
                    </div>
                    <div class="col s12 l5 xl3">
                        {{ form_row(form.dateFormat, {'label' : 'label.date_format'} ) }}
                    </div>
                </div>

                <h3 class="header">{{ 'title.update_visibility'|trans }}</h3>

                <div class="row">
                    <div class="col s12 l10 offset-l1 xl6 offset-xl3">
                        <p>
                            {{ 'message.visibility'|trans }}
                            <strong><a href="{{ url('app_user_collection_index', {username : app.user.username}) }}">{{ url('app_user_collection_index', {username : app.user.username}) }}</a></strong>
                        </p>
                        <p>
                            {{ 'message.visibility_preview'|trans }}
                            <strong><a href="{{ url('app_preview_collection_index') }}">{{ url('app_preview_collection_index') }}</a></strong>
                        </p>
                        <p>{{ 'message.visibility_per_item'|trans }}</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col s12 l5 offset-l1 xl3 offset-xl3">
                        {{ form_row(form.visibility, {'label' : 'label.visibility'} ) }}
                    </div>
                </div>

                <h3 class="header">{{ 'title.update_dark_mode'|trans }}</h3>

                <div class="row">
                    <div class="col s12 l5 offset-l1 xl3 offset-xl3">
                        {{ form_row(form.automaticDarkModeStartAt, {'label' : 'label.automatic_dark_mode_start_at', 'attr': {'class': 'timepicker'}} ) }}
                    </div>
                    <div class="col s12 l5 xl3">
                        {{ form_row(form.automaticDarkModeEndAt, {'label' : 'label.automatic_dark_mode_end_at', 'attr': {'class': 'timepicker'}} ) }}
                    </div>
                </div>

                <div class="row">
                    <div class="col s12 l5 offset-l1 xl3 offset-xl3">
                        {{ form_row(form.darkModeEnabled, {'label' : 'label.dark_mode_enabled'}) }}
                    </div>
                </div>

                <h3 class="header">{{ 'title.update_features'|trans }}</h3>

                <div class="row">
                    <div class="col s12 l5 offset-l1 xl3 offset-xl3">
                        {{ form_row(form.wishlistsFeatureEnabled, {'label' : 'label.wishlists_feature_enabled'}) }}
                    </div>
                    <div class="col s12 l5 xl3">
                        {{ form_row(form.tagsFeatureEnabled, {'label' : 'label.tags_feature_enabled'}) }}
                    </div>

                <div class="row">
                    <div class="col s12 l5 offset-l1 xl3 offset-xl3">
                        {{ form_row(form.signsFeatureEnabled, {'label' : 'label.signs_feature_enabled'}) }}
                    </div>
                    <div class="col s12 l5 xl3">
                        {{ form_row(form.albumsFeatureEnabled, {'label' : 'label.albums_feature_enabled'}) }}
                    </div>
                </div>
    
                <div class="row">
                    <div class="col s12 l5 offset-l1 xl3 offset-xl3">
                        {{ form_row(form.loansFeatureEnabled, {'label' : 'label.loans_feature_enabled'}) }}
                    </div>
                    <div class="col s12 l5 xl3">
                        {{ form_row(form.templatesFeatureEnabled, {'label' : 'label.templates_feature_enabled'}) }}
                    </div>
                </div>

                <div class="row">
                    <div class="col s12 l5 offset-l1 xl3 offset-xl3">
                        {{ form_row(form.historyFeatureEnabled, {'label' : 'label.history_feature_enabled'}) }}
                    </div>
                    <div class="col s12 l5 xl3">
                        {{ form_row(form.statisticsFeatureEnabled, {'label' : 'label.statistics_feature_enabled'}) }}
                    </div>
                </div>

                <div class="row center-align form-btn-holder">
                    <button type="submit" class="btn waves-effect waves-light">{{ 'btn.submit'|trans }}</button>
                </div>
            {{ form_end(form) }}
        </div>
    </div>
{% endblock %}