{# templates/account/index.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}
    {% if tab == 'account' %}{{ 'app.account.page_title_account'|trans }}{% else %}{{ 'app.account.page_title_user'|trans }}{% endif %}
{% endblock %}

{% block body %}

    <script>
        window.ACCOUNT = {
            tab:         '{{ tab }}',
            isSuperAdmin: {{ isSuperAdmin ? 'true' : 'false' }},
            theme:        '{{ user.theme|default('standard') }}',
            i18n: {
                invalidHex:       {{ 'app.account.invalid_hex'|trans|json_encode|raw }},
                saved:            {{ 'app.account.saved'|trans|json_encode|raw }},
                savedReloading:   {{ 'app.account.saved_reloading'|trans|json_encode|raw }},
                ownerChanged:     {{ 'app.account.owner_changed'|trans|json_encode|raw }},
                ownerConfirm:     {{ 'app.account.owner_confirm'|trans|json_encode|raw }},
                themeChanged:     {{ 'app.account.theme_changed'|trans|json_encode|raw }},
                passwordMismatch: {{ 'app.account.password_mismatch'|trans|json_encode|raw }},
                changeLabel:      {{ 'app.account.change_label'|trans|json_encode|raw }},
                cancelLabel:      {{ 'app.account.cancel_label'|trans|json_encode|raw }},
                errorGeneric:     {{ 'app.account.error_generic'|trans|json_encode|raw }},
            },
        };
    </script>

    <div class="account-page">

        <div class="account-header">
            <h1 class="account-header__title">
                {% if tab == 'account' %}{{ 'app.account.page_title_account'|trans }}{% else %}{{ 'app.account.page_title_user'|trans }}{% endif %}
            </h1>

            {% if isAdmin %}
                <nav class="account-tabs">
                    <a href="{{ path('account_index', {tab: 'account'}) }}"
                       class="account-tab{% if tab == 'account' %} account-tab--active{% endif %}">
                        {{ 'app.account.tab_account'|trans }}
                    </a>
                    <a href="{{ path('account_index', {tab: 'user'}) }}"
                       class="account-tab{% if tab == 'user' %} account-tab--active{% endif %}">
                        {{ 'app.account.tab_user'|trans }}
                    </a>
                </nav>
            {% endif %}
        </div>

        <div class="account-content">
            <div class="account-card">

                {# ── Account-Tab (nur Admin) ────────────────────────────────────────── #}
                {% if tab == 'account' and isAdmin %}

                    <div class="account-form__grid" id="account-form">

                        <label class="account-form__label" for="account-name">{{ 'app.account.label_company_name'|trans }}</label>
                        <div class="account-form__field">
                            <input type="text" id="account-name" class="input"
                                   value="{{ account.name|e('html_attr') }}" />
                            <span class="account-form__hint">
                                {{ 'app.account.hint_subdomain'|trans({'%subdomain%': account.slug ~ '.' ~ (app.request.host|split('.')|slice(1)|join('.'))}) }}
                            </span>
                        </div>

                        <label class="account-form__label" for="account-interval">{{ 'app.account.label_interval'|trans }}</label>
                        <div class="account-form__field">
                            <select id="account-interval" class="select">
                                {% for value, label in intervalOptions %}
                                    <option value="{{ value }}"{% if account.trackingInterval == value %} selected{% endif %}>
                                        {{ label }}
                                    </option>
                                {% endfor %}
                            </select>
                            <span class="account-form__hint">{{ 'app.account.hint_interval'|trans }}</span>
                        </div>

                        {% if isSuperAdmin %}
                        <label class="account-form__label" for="account-color">{{ 'app.account.label_color'|trans }}</label>
                        <div class="account-form__field">
                            <div class="account-color-field">
                                <input type="color" id="account-color-picker"
                                       value="{{ account.primaryColor ?? '#3a7bbf' }}"
                                       class="account-color-field__swatch" />
                                <input type="text" id="account-color"
                                       value="{{ account.primaryColor ?? '#3a7bbf' }}"
                                       class="input account-color-field__hex"
                                       maxlength="7" placeholder="#3a7bbf" autocomplete="off" />
                            </div>
                            <span class="account-form__hint">{{ 'app.account.hint_color'|trans }}</span>
                        </div>
                        {% endif %}

                        <div class="account-form__actions">
                            <button type="button" class="btn btn-primary" id="btn-account-save">{{ 'app.entry.btn_save'|trans }}</button>
                            <a href="{{ path('account_index', {tab: 'account'}) }}" class="btn btn-secondary">{{ 'app.entry.btn_cancel'|trans }}</a>
                        </div>

                    </div>

                    {# ── Benutzer-Tab ──────────────────────────────────────────────────── #}
                {% else %}

                    <div class="account-form__grid" id="user-form">

                        <label class="account-form__label" for="user-firstname">{{ 'app.account.label_first_name'|trans }}</label>
                        <div class="account-form__field">
                            <input type="text" id="user-firstname" class="input"
                                   value="{{ user.firstName|e('html_attr') }}" />
                        </div>

                        <label class="account-form__label" for="user-lastname">{{ 'app.account.label_last_name'|trans }}</label>
                        <div class="account-form__field">
                            <input type="text" id="user-lastname" class="input"
                                   value="{{ user.lastName|e('html_attr') }}" />
                        </div>

                        <label class="account-form__label" for="user-email">{{ 'app.account.label_email'|trans }}</label>
                        <div class="account-form__field">
                            <input type="email" id="user-email" class="input"
                                   value="{{ user.email|e('html_attr') }}" />
                        </div>

                        <label class="account-form__label">{{ 'app.account.label_password'|trans }}</label>
                        <div class="account-form__field">
                            <a href="#" class="account-form__link" id="btn-pw-toggle">{{ 'app.account.change_label'|trans }}</a>
                        </div>

                        <div class="account-form__pw-section" id="pw-section" hidden>

                            <label class="account-form__label" for="user-pw-current">{{ 'app.account.label_current_password'|trans }}</label>
                            <div class="account-form__field">
                                <input type="password" id="user-pw-current" class="input" autocomplete="current-password" />
                            </div>

                            <label class="account-form__label" for="user-pw-new">{{ 'app.account.label_new_password'|trans }}</label>
                            <div class="account-form__field">
                                <input type="password" id="user-pw-new" class="input" autocomplete="new-password" minlength="8" />
                            </div>

                            <label class="account-form__label" for="user-pw-repeat">{{ 'app.account.label_password_repeat'|trans }}</label>
                            <div class="account-form__field">
                                <input type="password" id="user-pw-repeat" class="input" autocomplete="new-password" />
                            </div>

                        </div>

                        <div class="account-form__actions">
                            <button type="button" class="btn btn-primary" id="btn-user-save">{{ 'app.entry.btn_save'|trans }}</button>
                            <a href="{{ path('account_index', {tab: 'user'}) }}" class="btn btn-secondary">{{ 'app.entry.btn_cancel'|trans }}</a>
                        </div>

                    </div>

                    {# ── Darstellung ───────────────────────────────────────────────────── #}
                    <div class="account-form__grid account-form__grid--appearance" id="appearance-form">

                        <div class="account-form__divider-row">
                            <hr class="account-form__divider">
                        </div>

                        <label class="account-form__label">{{ 'app.account.label_appearance'|trans }}</label>
                        <div class="account-form__field">
                            <div class="theme-picker" id="theme-picker">
                                <label class="theme-option{% if user.theme|default('standard') == 'standard' %} theme-option--active{% endif %}" data-theme="standard">
                                    <input type="radio" name="theme" value="standard"{% if user.theme|default('standard') == 'standard' %} checked{% endif %}>
                                    <span class="theme-option__label">{{ 'app.account.theme_standard'|trans }}</span>
                                    <span class="theme-option__desc">{{ 'app.account.theme_standard_desc'|trans }}</span>
                                </label>
                                <label class="theme-option{% if user.theme|default('standard') == 'minimal' %} theme-option--active{% endif %}" data-theme="minimal">
                                    <input type="radio" name="theme" value="minimal"{% if user.theme|default('standard') == 'minimal' %} checked{% endif %}>
                                    <span class="theme-option__label">{{ 'app.account.theme_minimal'|trans }}</span>
                                    <span class="theme-option__desc">{{ 'app.account.theme_minimal_desc'|trans }}</span>
                                </label>
                            </div>
                        </div>

                    </div>

                {% endif %}

            </div>

            {# ── Besitzer des Accounts (nur Admin, Account-Tab) ─────────────────── #}
            {% if tab == 'account' and isAdmin %}
                <div class="account-card account-card--owner">
                    <div class="account-form__grid">

                        <label class="account-form__label" for="superadmin-select">{{ 'app.account.label_owner'|trans }}</label>
                        <div class="account-form__field">
                            <select id="superadmin-select" class="select"
                                    {% if superAdminUserId != user.id %}disabled{% endif %}>
                                {% for admin in adminUsers %}
                                    <option value="{{ admin.id }}"{% if admin.id == superAdminUserId %} selected{% endif %}>
                                        {{ admin.name }}
                                    </option>
                                {% endfor %}
                            </select>
                            <p class="account-form__hint account-form__hint--owner">
                                {{ 'app.account.hint_owner'|trans }}
                            </p>
                        </div>

                    </div>
                </div>
            {% endif %}

        </div>

    </div>

    <div class="account-toast" id="account-toast"></div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('account') }}
{% endblock %}