{% block content %}
<div class="container">
    <h2>Rozetlerim</h2>
    
    <div class="row">
        <div class="col-md-6">
            <h4>Aktif Rozetiniz</h4>
            <div class="text-center mb-4">
                <img src="{{ url_for('static', filename='badges/' + active_badge) }}" 
                     alt="{{ active_badge }}" 
                     style="width: 100px; height: 100px; object-fit: contain;">
                <p class="mt-2">{{ active_badge }}</p>
            </div>
            
            <h4>Rozetleriniz</h4>
            <div class="row">
                {% for badge in user_badges %}
                <div class="col-3 mb-3">
                    <div class="text-center">
                        <img src="{{ url_for('static', filename='badges/' + badge) }}" 
                             alt="{{ badge }}" 
                             class="img-thumbnail"
                             style="width: 80px; height: 80px; object-fit: contain;">
                        <form method="POST" action="{{ url_for('set_active_badge') }}" class="mt-2">
                            <input type="hidden" name="badge" value="{{ badge }}">
                            <button type="submit" class="btn btn-sm btn-primary">Aktif Et</button>
                        </form>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        
        <div class="col-md-6">
            <h4>Rozet Aç</h4>
            <form method="POST" action="{{ url_for('unlock_badge') }}">
                <div class="form-group">
                    <label for="code">Rozet Kodu</label>
                    <input type="text" class="form-control" id="code" name="code" required>
                </div>
                <button type="submit" class="btn btn-success">Rozet Aç</button>
            </form>
            
            <hr>
            
            <h4>Tüm Rozetler</h4>
            <div class="row">
                {% for badge in available_badges %}
                <div class="col-3 mb-3">
                    <div class="text-center">
                        <img src="{{ url_for('static', filename='badges/' + badge) }}" 
                             alt="{{ badge }}" 
                             class="img-thumbnail {% if badge not in user_badges and badge != 'default.png' %}grayscale{% endif %}"
                             style="width: 80px; height: 80px; object-fit: contain;">
                        <p class="small">{{ badge }}</p>
                        {% if badge in user_badges %}
                            <span class="badge badge-success">Sahipsiniz</span>
                        {% elif badge == 'default.png' %}
                            <span class="badge badge-info">Varsayılan</span>
                        {% else %}
                            <span class="badge badge-secondary">Kilitli</span>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<style>
    .grayscale {
        filter: grayscale(100%);
        opacity: 0.7;
    }
</style>
{% endblock %}