{% extends "base.html" %}
{% set suppress_toasts = true %}
{% block title %}{{ t('ui.account.title') }} · {{ branding.name }}{% endblock %}
{% block styles %}
<style>{{ branding.css_variables | safe }}</style>
<link rel="stylesheet" href="{{ url_for('static', filename='styles/account.css') }}">
{% endblock %}
{% block content %}
<div class="container account-workspace">
    {% include '_chat_header.html' %}
<div class="account-page" lang="{{ account.language }}">
    <div class="account-layout">
        <aside class="account-sidebar">
            <h1>{{ t('ui.account.title') }}</h1>
            <div class="account-identity">{{ account.full_name or account.email }}</div>
            <nav aria-label="{{ t('ui.account.title') }}">
                {% for section, icon in [('profile', 'person'), ('preferences', 'sliders')] %}
                <a href="{{ url_for('account', company_short_name=company_short_name, section=section) }}" {% if active_section == section %}aria-current="page"{% endif %}>
                    <i class="bi bi-{{ icon }}" aria-hidden="true"></i><span>{{ t('ui.account.' ~ section) }}</span>
                </a>
                {% endfor %}
                {% set connections_url = optional_url_for('mcp_client_connections_page', company_short_name=company_short_name) %}
                {% if connections_url %}
                <a href="{{ connections_url }}" {% if active_section == 'mcp_connections' %}aria-current="page"{% endif %}><i class="bi bi-plug" aria-hidden="true"></i><span>{{ t('ui.account.connections') }}</span></a>
                {% endif %}
            </nav>
        </aside>
        <main class="account-main" id="account-main">
            {% for category, message in flashed_messages | default([]) %}
            <div class="account-notice {{ 'is-error' if category == 'error' else '' }}" role="{{ 'alert' if category == 'error' else 'status' }}">{{ message }}</div>
            {% endfor %}
            {% if active_section == 'profile' %}
            <h2>{{ t('ui.account.profile') }}</h2>
            {% if account.can_edit_name %}
            <form method="post" action="{{ url_for('account', company_short_name=company_short_name) }}" class="account-form">
                <input type="hidden" name="action" value="update_profile">
                <input type="hidden" name="csrf_token" value="{{ account_csrf_token }}">
                <div class="account-fields">
                    <div><label for="account-first-name">{{ t('ui.account.first_name') }}</label><input class="form-control" id="account-first-name" name="first_name" autocomplete="given-name" maxlength="100" required value="{{ request.form.get('first_name', account.first_name) }}"></div>
                    <div><label for="account-last-name">{{ t('ui.account.last_name') }}</label><input class="form-control" id="account-last-name" name="last_name" autocomplete="family-name" maxlength="100" required value="{{ request.form.get('last_name', account.last_name) }}"></div>
                </div>
                <button class="btn account-save" type="submit"><i class="bi bi-check2" aria-hidden="true"></i>{{ t('ui.account.save') }}</button>
            </form>
            {% else %}
            <dl class="account-details"><div><dt>{{ t('ui.account.full_name') }}</dt><dd>{{ account.full_name or t('ui.account.not_available') }}</dd></div></dl>
            <p class="account-muted">{{ t('ui.account.managed_identity') }}</p>
            {% endif %}
            <dl class="account-details">
                <div><dt>{{ t('ui.account.email') }}</dt><dd>{{ account.email }}</dd></div>
                <div><dt>{{ t('ui.account.organization') }}</dt><dd>{{ company.name }}</dd></div>
                <div><dt>{{ t('ui.account.role') }}</dt><dd>{{ t('ui.account.role_' ~ account.role) if account.role in ['user', 'editor', 'admin', 'owner'] else account.role }}</dd></div>
                <div><dt>{{ t('ui.account.sign_in') }}</dt><dd><i class="bi bi-shield-check" aria-hidden="true"></i> {{ t('ui.account.auth_' ~ account.auth_method) if account.auth_method in ['local', 'google', 'corporate'] else account.auth_method }}</dd></div>
            </dl>
            {% elif active_section == 'preferences' %}
            <h2>{{ t('ui.account.preferences') }}</h2>
            <form method="post" action="{{ url_for('account', company_short_name=company_short_name) }}" class="account-form">
                <input type="hidden" name="action" value="update_preferences">
                <input type="hidden" name="csrf_token" value="{{ account_csrf_token }}">
                <label for="account-language">{{ t('ui.account.language') }}</label>
                <select id="account-language" name="language" class="form-select account-language">
                    <option value="es" {% if account.language == 'es' %}selected{% endif %}>Español</option>
                    <option value="en" {% if account.language == 'en' %}selected{% endif %}>English</option>
                </select>
                {% if account.language_is_browser_only %}<p class="account-muted mt-2">{{ t('ui.account.browser_language') }}</p>{% endif %}
                <button class="btn account-save" type="submit"><i class="bi bi-check2" aria-hidden="true"></i>{{ t('ui.account.save') }}</button>
            </form>
            {% else %}
            {% block account_extension_section %}{% endblock %}
            {% endif %}
        </main>
    </div>
</div>
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
<script>
    window.defaultLlmModel = {{ llm_default_model | tojson }};
    window.availableLlmModels = {{ llm_available_models | tojson }};
    window.defaultLlmReasoningEffort = {{ llm_default_reasoning_effort | tojson }};
</script>
<script src="{{ url_for('static', filename='js/chat_model_selector.js') }}"></script>
<script src="{{ url_for('static', filename='js/chat_header_navigation.js') }}"></script>
{% endblock %}