{% extends "base.html" %}
{% load static %}
{% load humanize %}
{% block title %}
    Badges
{% endblock title %}
{% block description %}
    Explore the various badges available in the platform and learn how to earn them
{% endblock description %}
{% block keywords %}
    badges, rewards, achievements, recognition, platform
{% endblock keywords %}
{% block og_title %}
    Badges - Platform
{% endblock og_title %}
{% block og_description %}
    Discover and earn various badges as you contribute and achieve milestones on the platform
{% endblock og_description %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-4xl font-bold mb-12 mt-6 text-center">Badges</h1>
        <hr>
        <!-- Badge Cards -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8">
            {% for badge in badges %}
                <div class="bg-white border-2 border-gray-100 rounded-2xl shadow-2xl overflow-hidden transform transition-all duration-100 hover:shadow-4xl hover:scale-102 hover:-translate-y-2 relative">
                    <a href="{% url 'badge_user_list' badge_id=badge.id %}"
                       class="absolute top-0 left-0 w-full z-10">
                        <div class="absolute top-0 left-0 w-full h-2 bg-purple-600"></div>
                        <div class="absolute top-2 p-5 bg-purple-600 text-white text-md font-medium py-1.5 shadow-lg cursor-pointer">
                            <span class="text-white">
                                {% if badge.user_count == 0 %}
                                    No users
                                {% elif badge.user_count == 1 %}
                                    1 user
                                {% else %}
                                    {{ badge.user_count }} users
                                {% endif %}
                            </span>
                        </div>
                    </a>
                    <div class="flex flex-col items-center p-8 pt-10 relative">
                        {% if badge.icon %}
                            <div class="relative mb-6">
                                <img src="{{ badge.icon.url }}"
                                     alt="{{ badge.title }}"
                                     class="object-cover mb-4 transition-transform duration-500 hover:rotate-6"
                                     width="70"
                                     height="70">
                            </div>
                        {% else %}
                            <div class="w-28 h-28 bg-gradient-to-br from-indigo-500 to-purple-600 mb-6 flex items-center justify-center text-4xl text-white font-bold uppercase shadow-lg">
                                <span class="drop-shadow-md">{{ badge.title|slice:":1" }}</span>
                            </div>
                        {% endif %}
                        <h2 class="text-3xl font-['Playfair_Display'] font-bold text-center mb-4 text-gray-800 tracking-tight hover:text-indigo-700 transition-colors duration-300">
                            {{ badge.title }}
                        </h2>
                        <p class="text-gray-600 text-center mb-6 font-['Inter'] leading-relaxed opacity-80">{{ badge.description }}</p>
                        <div class="w-full text-center">
                            <span class="inline-block px-8 py-3 text-sm font-['Inter'] font-semibold rounded-full tracking-wider uppercase {% if badge.type == 'automatic' %} bg-gradient-to-r from-green-500 to-emerald-600 text-white {% else %} bg-gradient-to-r from-indigo-500 to-blue-600 text-white {% endif %} shadow-md transform transition-all duration-300 hover:scale-105 hover:shadow-xl">
                                {{ badge.get_type_display }}
                            </span>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock content %}