<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>RTube - {{ profile_user.username }}'s Profile</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                max-width: 1000px;
                margin: 0 auto;
                padding: 20px;
                background-color: #1a1a1a;
                color: #fff;
            }
            .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 30px;
            }
            .header-left {
                display: flex;
                align-items: center;
                gap: 20px;
            }
            .back-link {
                color: #888;
                text-decoration: none;
                font-size: 14px;
            }
            .back-link:hover {
                color: #fff;
            }
            h1 {
                margin: 0;
            }
            .username-highlight {
                color: #4CAF50;
            }
            .stats {
                display: flex;
                gap: 20px;
                color: #888;
                font-size: 14px;
            }
            .stat {
                display: flex;
                align-items: center;
                gap: 5px;
            }
            .stat-value {
                color: #4CAF50;
                font-weight: 500;
            }
            .section {
                margin-bottom: 40px;
            }
            .section-title {
                font-size: 18px;
                margin-bottom: 20px;
                padding-bottom: 10px;
                border-bottom: 1px solid #333;
            }
            .video-list {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            .video-list li {
                margin-bottom: 15px;
            }
            .video-list a {
                display: flex;
                align-items: center;
                gap: 15px;
                padding: 10px;
                background-color: #2a2a2a;
                color: #fff;
                text-decoration: none;
                border-radius: 5px;
                transition: background-color 0.2s;
            }
            .video-list a:hover {
                background-color: #3a3a3a;
            }
            .thumbnail {
                width: 160px;
                height: 90px;
                object-fit: cover;
                border-radius: 4px;
                background-color: #444;
                flex-shrink: 0;
            }
            .video-info {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 5px;
            }
            .video-title {
                font-size: 16px;
                font-weight: 500;
            }
            .video-meta {
                display: flex;
                align-items: center;
                gap: 10px;
                flex-wrap: wrap;
            }
            .view-count {
                color: #888;
                font-size: 13px;
            }
            .language-badge {
                background-color: #444;
                color: #ccc;
                padding: 2px 8px;
                border-radius: 3px;
                font-size: 11px;
                text-transform: uppercase;
            }
            .private-badge {
                background-color: #8B4513;
                color: #fff;
                padding: 2px 8px;
                border-radius: 3px;
                font-size: 11px;
            }
            .comment-list {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            .comment-item {
                background-color: #2a2a2a;
                border-radius: 5px;
                padding: 15px;
                margin-bottom: 15px;
            }
            .comment-header {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 10px;
            }
            .comment-video-link {
                color: #4CAF50;
                text-decoration: none;
                font-weight: 500;
                font-size: 14px;
            }
            .comment-video-link:hover {
                text-decoration: underline;
            }
            .comment-date {
                color: #888;
                font-size: 12px;
            }
            .comment-content {
                color: #ddd;
                font-size: 14px;
                line-height: 1.5;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            .empty-message {
                color: #888;
                font-style: italic;
            }
            .playlist-list {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            .playlist-list li {
                margin-bottom: 15px;
            }
            .playlist-link {
                display: block;
                padding: 15px;
                background-color: #2a2a2a;
                border-radius: 5px;
                text-decoration: none;
                color: #fff;
                transition: background-color 0.2s;
            }
            a.playlist-link:hover {
                background-color: #3a3a3a;
            }
            .playlist-info {
                display: flex;
                flex-direction: column;
                gap: 5px;
            }
            .playlist-name {
                font-size: 16px;
                font-weight: 500;
                color: #4CAF50;
            }
            .playlist-meta {
                display: flex;
                align-items: center;
                gap: 10px;
                color: #888;
                font-size: 13px;
            }
            .playlist-description {
                color: #aaa;
                font-size: 13px;
                margin-top: 5px;
            }
            footer {
                margin-top: 50px;
                padding-top: 20px;
                border-top: 1px solid #333;
                text-align: center;
                color: #666;
                font-size: 12px;
            }
        </style>
        <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">

</head>
    <body>
        <div class="header">
            <div class="header-left">
                <a href="/" class="back-link" style="display: inline-flex; align-items: center; gap: 5px;">&larr; Back to <img src="{{ url_for('static', filename='logo_transparent.png') }}" alt="RTube" height="20"></a>
                <h1><span class="username-highlight">{{ profile_user.username }}</span>'s Profile</h1>
            </div>
            <div class="stats">
                <span class="stat"><span class="stat-value">{{ videos | length }}</span> video{{ 's' if videos | length != 1 else '' }}</span>
                <span class="stat"><span class="stat-value">{{ comments_data | length }}</span> comment{{ 's' if comments_data | length != 1 else '' }}</span>
                <span class="stat"><span class="stat-value">{{ favorites_data | length }}</span> favorite{{ 's' if favorites_data | length != 1 else '' }}</span>
                <span class="stat"><span class="stat-value">{{ playlists | length }}</span> playlist{{ 's' if playlists | length != 1 else '' }}</span>
            </div>
        </div>

        <div class="section">
            <h2 class="section-title">Uploaded Videos</h2>
            {% if videos %}
            <ul class="video-list">
                {% for video in videos %}
                <li>
                    <a href="/watch?v={{ video.short_id }}">
                        {% if video.thumbnail %}
                        <img src="{{ url_for('videos.serve_thumbnail', filename=video.thumbnail) }}" alt="{{ video.title }}" class="thumbnail">
                        {% else %}
                        <div class="thumbnail"></div>
                        {% endif %}
                        <div class="video-info">
                            <span class="video-title">{{ video.title or video.filename }}</span>
                            <div class="video-meta">
                                <span class="view-count">{{ video.view_count }} view{{ 's' if video.view_count != 1 else '' }}</span>
                                {% if video.language %}
                                <span class="language-badge">{{ video.language }}</span>
                                {% endif %}
                                {% if video.visibility == 'private' %}
                                <span class="private-badge">Private</span>
                                {% endif %}
                            </div>
                        </div>
                    </a>
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <p class="empty-message">No videos uploaded yet.</p>
            {% endif %}
        </div>

        <div class="section">
            <h2 class="section-title">Comments</h2>
            {% if comments_data %}
            <ul class="comment-list">
                {% for data in comments_data %}
                <li class="comment-item">
                    <div class="comment-header">
                        {% if data.video %}
                        <a href="/watch?v={{ data.video.short_id }}" class="comment-video-link">{{ data.video.title or data.video.filename }}</a>
                        {% else %}
                        <span class="comment-video-link" style="color: #888;">[Deleted video]</span>
                        {% endif %}
                        <span class="comment-date">{{ data.comment.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
                    </div>
                    <div class="comment-content">{{ data.comment.content }}</div>
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <p class="empty-message">No comments posted yet.</p>
            {% endif %}
        </div>

        <div class="section">
            <h2 class="section-title">Favorites</h2>
            {% if favorites_data %}
            <ul class="video-list">
                {% for data in favorites_data %}
                <li>
                    <a href="/watch?v={{ data.video.short_id }}">
                        {% if data.video.thumbnail %}
                        <img src="{{ url_for('videos.serve_thumbnail', filename=data.video.thumbnail) }}" alt="{{ data.video.title }}" class="thumbnail">
                        {% else %}
                        <div class="thumbnail"></div>
                        {% endif %}
                        <div class="video-info">
                            <span class="video-title">{{ data.video.title or data.video.filename }}</span>
                            <div class="video-meta">
                                <span class="view-count">{{ data.video.view_count }} view{{ 's' if data.video.view_count != 1 else '' }}</span>
                                {% if data.video.owner_username %}
                                <span class="view-count">by {{ data.video.owner_username }}</span>
                                {% endif %}
                                {% if data.video.language %}
                                <span class="language-badge">{{ data.video.language }}</span>
                                {% endif %}
                            </div>
                        </div>
                    </a>
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <p class="empty-message">No favorites yet.</p>
            {% endif %}
        </div>

        <div class="section">
            <h2 class="section-title">Playlists</h2>
            {% if playlists %}
            <ul class="playlist-list">
                {% for playlist in playlists %}
                <li>
                    <a href="{{ url_for('playlists.view', playlist_id=playlist.id) }}" class="playlist-link">
                        <div class="playlist-info">
                            <span class="playlist-name">{{ playlist.name }}</span>
                            <div class="playlist-meta">
                                <span class="video-count">{{ playlist.video_count() }} video{{ 's' if playlist.video_count() != 1 else '' }}</span>
                                <span class="updated-date">Updated {{ playlist.updated_at.strftime('%Y-%m-%d') }}</span>
                            </div>
                            {% if playlist.description %}
                            <span class="playlist-description">{{ playlist.description[:100] }}{% if playlist.description|length > 100 %}...{% endif %}</span>
                            {% endif %}
                        </div>
                    </a>
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <p class="empty-message">No playlists created yet.</p>
            {% endif %}
        </div>

        <footer>RTube v{{ rtube_version }}</footer>
    </body>
</html>
