{% extends 'develop/universes/manage-template.html' %}
{% block subcontent %}
    <div class="d-flex align-items-center">
        <h4 class="m-0">Badges</h4>
        <div class="ms-auto">
            <a class="btn btn-primary btn-sm" href="/develop/universes/{{UniverseObj.id}}/create-badge">Create Badge</a>
        </div>
    </div>
    <div class="w-100 mt-2">
        {% for badgeObj in Badges: %}
        <div class="bg-dark p-2 rounded w-100 mt-2">
            <div class="d-flex">
                <img src="/Thumbs/Asset.ashx?x=180&y=180&assetId={{badgeObj.icon_image_id}}" width="100px" height="100px" class="border rounded">
                <div class="ms-2 h-100">
                    <h5 class="m-0">{{badgeObj.name}}</h5>
                    <p class="m-0 mt-1 text-secondary" style="font-size: 14px;">Badge ID: <span class="text-white">{{badgeObj.id}}</span></p>
                    <p class="m-0 text-secondary" style="font-size: 14px;">Awarded Yesterday: <span class="text-white">{{GetBadgeAwardedPastDay(badgeObj.id)}}</span></p>
                    <p class="m-0 text-secondary" style="font-size: 14px;">Total Awarded: <span class="text-white">{{GetTotalBadgeAwardedCount(badgeObj.id)}}</span></p>
                </div>
                <div class="ms-auto">
                    <a class="btn btn-light btn-sm" href="/develop/universes/{{UniverseObj.id}}/badges/{{badgeObj.id}}">Edit Badge</a>
                </div>
            </div>
        </div>
        {% endfor %}
        {% if len(Badges) == 0: %}
        <p class="text-secondary text-center w-100 mt-5 mb-5">No Badges found, create one by clicking the button above</p>
        {% endif %}
    </div>
{% endblock %}