<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#0f0f0f">
    <link rel="stylesheet" href="/static/tv/css/tv.css?v={{ v }}">
    <title>{{ t('profiles.title') }} - VideoKonverter TV</title>
</head>
<body class="login-body">
    <div class="profiles-container">
        <h1 class="profiles-title">{{ t('profiles.title') }}</h1>

        <div class="profiles-grid">
            {% for p in profiles %}
            <form method="post" action="/tv/switch-profile" class="profile-form">
                <input type="hidden" name="user_id" value="{{ p.id }}">
                <button type="submit" class="profile-card {% if p.id == current_user_id %}profile-active{% endif %}" data-focusable>
                    <span class="tv-avatar tv-avatar-lg" style="background:{{ p.avatar_color or '#64b5f6' }}">
                        {{ (p.display_name or p.username)[:1]|upper }}
                    </span>
                    <span class="profile-name">{{ p.display_name or p.username }}</span>
                </button>
            </form>
            {% endfor %}

            <!-- Anderer Benutzer -->
            <a href="/tv/login" class="profile-card profile-add" data-focusable>
                <span class="tv-avatar tv-avatar-lg profile-add-icon">+</span>
                <span class="profile-name">{{ t('profiles.add_user') }}</span>
            </a>
        </div>
    </div>

    <script src="/static/tv/js/tv.js?v={{ v }}"></script>
</body>
</html>
