offline-db/templates/profile.html

{% extends 'base.html' %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <!-- Profile Header -->
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-8 border border-gray-700">
        <div class="flex flex-col md:flex-row items-center">
            <div class="w-32 h-32 bg-gray-600 rounded-full flex items-center justify-center text-4xl font-bold text-gray-300 mb-4 md:mb-0 md:mr-8 border-4 border-brand">
                {{ user.username|slice:":2"|upper }}
            </div>
            <div class="text-center md:text-left">
                <h1 class="text-3xl font-bold text-white mb-2">{{ user.username }}</h1>
                <p class="text-gray-400 mb-4">Member since {{ user.date_joined|date:"F Y" }}</p>
                {% if user.is_premium %}
                <span class="bg-yellow-500 text-black px-3 py-1 rounded-full text-sm font-bold">Premium Member</span>
                {% else %}
                <span class="bg-gray-600 text-white px-3 py-1 rounded-full text-sm">Free Member</span>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Badges Section -->
        <div class="bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-700">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold text-brand flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
                    </svg>
                    Badges Earned
                </h2>
                <a href="{% url 'badges_list' %}" class="text-sm text-gray-400 hover:text-white transition underline">View All Badges</a>
            </div>

            {% if badges %}
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                {% for user_badge in badges %}
                <div class="bg-gray-900 rounded-lg p-4 flex flex-col items-center text-center transition hover:bg-gray-700 group relative">
                    {% if user_badge.badge.icon_url %}
                        <img src="{{ user_badge.badge.icon_url }}" alt="{{ user_badge.badge.name }}" class="w-16 h-16 mb-2 object-contain">
                    {% else %}
                        <div class="w-16 h-16 bg-brand rounded-full flex items-center justify-center text-white font-bold text-xl mb-2">
                            {{ user_badge.badge.name|slice:":1" }}
                        </div>
                    {% endif %}
                    <h3 class="font-bold text-sm text-white">{{ user_badge.badge.name }}</h3>
                    <p class="text-xs text-gray-500 mt-1">{{ user_badge.awarded_at|date:"M d, Y" }}</p>

                    <!-- Tooltip -->
                    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-black text-white text-xs rounded p-2 opacity-0 group-hover:opacity-100 transition pointer-events-none z-10 border border-gray-600">
                        {{ user_badge.badge.description }}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="text-gray-400 text-center py-8">No badges earned yet. Start watching anime to earn them!</p>
            {% endif %}
        </div>

        <!-- Watch History Section -->
        <div class="bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-700">
            <h2 class="text-2xl font-bold text-brand mb-6 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Recent Activity
            </h2>

            {% if history %}
            <div class="space-y-4">
                {% for log in history %}
                <div class="flex items-center space-x-4 p-3 bg-gray-900 rounded-lg hover:bg-gray-750 transition">
                    {% if log.episode.thumbnail %}
                    <img src="{{ log.episode.thumbnail }}" class="w-20 h-12 object-cover rounded" alt="Thumbnail">
                    {% else %}
                    <div class="w-20 h-12 bg-gray-700 rounded flex items-center justify-center text-gray-500 text-xs">No Img</div>
                    {% endif %}

                    <div>
                        <a href="{% url 'watch' log.episode.id %}" class="text-white font-semibold hover:text-brand transition">
                            {{ log.episode.season.anime.title }}
                        </a>
                        <p class="text-sm text-gray-400">
                            {{ log.episode.season.title }} - Episode {{ log.episode.number }}
                        </p>
                        <p class="text-xs text-gray-500 mt-1">Watched {{ log.watched_at|timesince }} ago</p>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="text-gray-400 text-center py-8">No recent activity found.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}