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

{% block title %}{% trans "Criar Nível" %} - {% trans "Battle Pass Manager" %}{% endblock %}

{% block extrastyle %}
<style>
.manager-bg { 
    background: radial-gradient(ellipse at center, #0f172a 0%, #1a1a2e 50%, #0f0f1e 100%); 
    min-height: 100vh; 
    padding: 40px 0; 
    position: relative;
}
.manager-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(111, 66, 193, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(13, 202, 240, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.card-glow { 
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.95) 0%, rgba(18, 18, 32, 0.95) 100%); 
    border: 1px solid rgba(111, 66, 193, 0.3); 
    border-radius: 16px; 
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(111, 66, 193, 0.1);
    backdrop-filter: blur(10px);
}

.form-dark { 
    background: rgba(255,255,255,0.05) !important; 
    border: 1px solid rgba(255,255,255,0.15) !important; 
    color: white !important;
    border-radius: 10px;
    padding: 12px 16px;
    transition: all 0.3s ease;
} 
.form-dark::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.form-dark:focus { 
    background: rgba(255,255,255,0.1) !important; 
    border-color: #6f42c1 !important; 
    color: white !important; 
    box-shadow: 
        0 0 0 0.2rem rgba(111, 66, 193, 0.25),
        0 4px 12px rgba(111, 66, 193, 0.2) !important;
    outline: none;
}

.form-label {
    color: #fff;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.page-header h2 {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff 0%, #a8b4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn {
    border-radius: 10px;
    font-weight: 500;
    padding: 12px 24px;
    transition: all 0.3s ease;
}
.btn:hover {
    transform: translateY(-2px);
}

.btn-solid-white {
    background: #ffffff !important;
    color: #1a1a2e !important;
    border: none !important;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}
.btn-solid-white:hover {
    background: #f8f9fa !important;
    color: #1a1a2e !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}
.btn-solid-white:focus {
    background: #ffffff !important;
    color: #1a1a2e !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
}
</style>
{% endblock %}

{% block content %}
<div class="manager-bg">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-5">
                    <div class="page-header mb-3 mb-md-0">
                        <h2 class="mb-2">
                            <i class="bi bi-plus-circle text-info me-2"></i>
                            {% trans "Criar Novo Nível" %}
                        </h2>
                        <p class="text-white-50 mb-0">{% trans "Temporada:" %} {{ season.name }}</p>
                    </div>
                    <a href="{% url 'games:battle_pass_manager_season_detail' season_id=season.id %}" class="btn btn-solid-white">
                        <i class="bi bi-arrow-left me-2"></i>{% trans "Voltar" %}
                    </a>
                </div>

                <div class="card card-glow">
                    <div class="card-body">
                        <form method="post">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label for="level" class="form-label text-white">{% trans "Número do Nível" %} *</label>
                                <input type="number" class="form-control form-dark" id="level" name="level" 
                                       min="1" required>
                                <small class="text-white-50">{% trans "Exemplo: 1, 2, 3..." %}</small>
                            </div>
                            <div class="mb-3">
                                <label for="required_xp" class="form-label text-white">{% trans "XP Necessário" %} *</label>
                                <input type="number" class="form-control form-dark" id="required_xp" name="required_xp" 
                                       min="0" required>
                                <small class="text-white-50">{% trans "Quantidade de XP necessária para alcançar este nível" %}</small>
                            </div>
                            <div class="d-flex gap-2 mt-4">
                                <button type="submit" class="btn btn-info">
                                    <i class="bi bi-check-circle me-2"></i>{% trans "Criar Nível" %}
                                </button>
                                <a href="{% url 'games:battle_pass_manager_season_detail' season_id=season.id %}" class="btn btn-solid-white">
                                    {% trans "Cancelar" %}
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}