{% extends "layouts/base.html" %}
{% load static i18n %}

{% block extrastyle %}
{% include 'battle_pass/manager/_base_styles.html' %}
{% endblock %}

{% block title %}{% trans "Gerenciar Milestones" %} - {% trans "Battle Pass Manager" %}{% endblock %}

{% block content %}
<div class="manager-bg">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h2 class="text-white">{% trans "Milestones" %}</h2>
                <p class="text-white-50 mb-0">{{ season.name }}</p>
            </div>
            <a href="{% url 'games:battle_pass_manager_milestone_create' season.id %}" class="btn-action">
                <i class="bi bi-plus-circle me-2"></i>{% trans "Novo Milestone" %}
            </a>
        </div>

        <div class="card card-glow">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-dark table-hover">
                        <thead>
                            <tr>
                                <th>{% trans "Nível" %}</th>
                                <th>{% trans "Ícone" %}</th>
                                <th>{% trans "Título" %}</th>
                                <th>{% trans "Bônus XP" %}</th>
                                <th>{% trans "Ações" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for milestone in milestones %}
                            <tr>
                                <td><span class="badge bg-info">{{ milestone.level }}</span></td>
                                <td>{{ milestone.icon }}</td>
                                <td>{{ milestone.title }}</td>
                                <td><span class="badge bg-success">+{{ milestone.bonus_xp }} XP</span></td>
                                <td>
                                    <a href="{% url 'games:battle_pass_manager_milestone_edit' milestone.id %}" class="btn btn-sm btn-warning">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <a href="{% url 'games:battle_pass_manager_milestone_delete' milestone.id %}" class="btn btn-sm btn-danger">
                                        <i class="bi bi-trash"></i>
                                    </a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center">{% trans "Nenhum milestone encontrado." %}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="mt-3">
            <a href="{% url 'games:battle_pass_manager_season_detail' season.id %}" class="btn btn-secondary">
                <i class="bi bi-arrow-left me-2"></i>{% trans "Voltar" %}
            </a>
        </div>
    </div>
</div>
{% endblock %}