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

{% block extrastyle %}
{% include 'battle_pass/manager/_base_styles.html' %}
<style>
    .btn-success:hover {
        background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6) !important;
        color: white !important;
    }
</style>
{% endblock %}

{% block title %}{% trans "Gerenciar Quests" %} - {% 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">
            <h2 class="text-white">{% trans "Gerenciar Quests" %}</h2>
            <a href="{% url 'games:battle_pass_manager_quest_create' %}" class="btn btn-success" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); border: none; padding: 12px 24px; border-radius: 10px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); color: white;">
                <i class="bi bi-plus-circle me-2"></i>{% trans "Nova Quest" %}
            </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 "Título" %}</th>
                                <th>{% trans "Tipo" %}</th>
                                <th>{% trans "Objetivo" %}</th>
                                <th>{% trans "Meta" %}</th>
                                <th>{% trans "XP" %}</th>
                                <th>{% trans "Premium" %}</th>
                                <th>{% trans "Ativa" %}</th>
                                <th>{% trans "Ações" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for quest in quests %}
                            <tr>
                                <td>{{ quest.title }}</td>
                                <td><span class="badge bg-info">{{ quest.get_quest_type_display }}</span></td>
                                <td><span class="badge bg-primary">{{ quest.get_objective_type_display }}</span></td>
                                <td>{{ quest.objective_target }}</td>
                                <td>{{ quest.xp_reward }}</td>
                                <td>{% if quest.is_premium %}<span class="badge bg-warning">{% trans "Sim" %}</span>{% else %}<span class="badge bg-secondary">{% trans "Não" %}</span>{% endif %}</td>
                                <td>{% if quest.is_active %}<span class="badge bg-success">{% trans "Sim" %}</span>{% else %}<span class="badge bg-danger">{% trans "Não" %}</span>{% endif %}</td>
                                <td>
                                    <a href="{% url 'games:battle_pass_manager_quest_edit' quest.id %}" class="btn btn-sm btn-warning">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <a href="{% url 'games:battle_pass_manager_quest_delete' quest.id %}" class="btn btn-sm btn-danger">
                                        <i class="bi bi-trash"></i>
                                    </a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="8" class="text-center">{% trans "Nenhuma quest encontrada." %}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

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