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

{% block title %}
    {% if tab == 'account' %}Account{% else %}Mein Benutzer{% endif %}
{% endblock %}

{% block body %}

    <script>
        window.ACCOUNT = {
            tab:         '{{ tab }}',
            isSuperAdmin: {{ superAdminUserId is not null and superAdminUserId == user.id ? 'true' : 'false' }},
        };
    </script>

    <div class="account-page">

        <div class="account-header">
            <h1 class="account-header__title">
                {% if tab == 'account' %}Account{% else %}Mein Benutzer{% 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 %}">
                        Account
                    </a>
                    <a href="{{ path('account_index', {tab: 'user'}) }}"
                       class="account-tab{% if tab == 'user' %} account-tab--active{% endif %}">
                        Mein Benutzer
                    </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">Firmenname</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">
                                Subdomain: <strong>{{ account.slug }}.{{ app.request.host|split('.')|slice(1)|join('.') }}</strong> — ändert sich nicht.
                            </span>
                        </div>

                        <label class="account-form__label" for="account-interval">Zeitintervall</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">Auf welche Einheit werden erfasste Zeiten aufgerundet.</span>
                        </div>

                        <div class="account-form__actions">
                            <button type="button" class="btn btn-primary" id="btn-account-save">Sichern</button>
                            <a href="{{ path('account_index', {tab: 'account'}) }}" class="btn btn-secondary">Abbrechen</a>
                        </div>

                    </div>

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

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

                        <label class="account-form__label" for="user-firstname">Vorname</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">Nachname</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">E-Mail</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">Passwort</label>
                        <div class="account-form__field">
                            <a href="#" class="account-form__link" id="btn-pw-toggle">ändern</a>
                        </div>

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

                            <label class="account-form__label" for="user-pw-current">Aktuelles Passwort</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">Neues Passwort</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">Wiederholen</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">Sichern</button>
                            <a href="{{ path('account_index', {tab: 'user'}) }}" class="btn btn-secondary">Abbrechen</a>
                        </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">Besitzer des Accounts</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">
                                Der Besitzer des Accounts ist für die Verwaltung der Zahlungsdaten zuständig.
                                Nur er kann den Account kündigen.
                            </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 %}