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

{% 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(13, 202, 240, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(111, 66, 193, 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(13, 202, 240, 0.3); 
    border-radius: 16px; 
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(13, 202, 240, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.form-control, .form-select {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(13, 202, 240, 0.3);
    color: white;
    border-radius: 10px;
}

.form-control:focus, .form-select:focus {
    background: rgba(30, 41, 59, 0.95);
    border-color: #0dcaf0;
    color: white;
    box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25);
}

.form-label {
    color: white;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.btn-action {
    background: linear-gradient(135deg, #0dcaf0 0%, #6f42c1 100%);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(13, 202, 240, 0.4);
}
.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 202, 240, 0.6);
    color: white;
}

.info-box {
    background: rgba(13, 202, 240, 0.1);
    border: 1px solid rgba(13, 202, 240, 0.3);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}
</style>
{% endblock %}

{% block content %}
<div class="manager-bg">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-glow">
                    <div class="card-header text-white">
                        <h3 class="mb-0">
                            <i class="bi bi-plus-circle me-2"></i>{% trans "Criar Nova Recompensa por Nível" %}
                        </h3>
                    </div>
                    <div class="card-body">
                        <form method="post" id="reward-form">
                            {% csrf_token %}
                            
                            <div class="info-box">
                                <i class="bi bi-info-circle me-2"></i>
                                {% trans "Configure uma recompensa que será entregue automaticamente quando o jogador atingir o nível especificado." %}
                            </div>

                            <div class="mb-3">
                                <label class="form-label">{% trans "Nível" %} <span class="text-danger">*</span></label>
                                <input type="number" name="nivel" id="nivel" class="form-control" required min="1" value="{{ request.POST.nivel|default:'' }}" placeholder="Ex: 5">
                                <small class="text-white-50">{% trans "Nível em que o jogador receberá esta recompensa" %}</small>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">{% trans "Item ID" %} <span class="text-danger">*</span></label>
                                <input type="number" name="item_id" id="item_id" class="form-control" required min="1" value="{{ request.POST.item_id|default:'' }}">
                                <small class="text-white-50">{% trans "ID do item no servidor" %}</small>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">{% trans "Nome do Item" %} <span class="text-danger">*</span></label>
                                <input type="text" name="item_name" id="item_name" class="form-control" required value="{{ request.POST.item_name|default:'' }}" placeholder="Ex: Sword of Destiny">
                                <small class="text-white-50">{% trans "Nome do item para exibição" %}</small>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">{% trans "Quantidade" %}</label>
                                    <input type="number" name="quantity" class="form-control" value="{{ request.POST.quantity|default:'1' }}" min="1" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">{% trans "Encantamento" %}</label>
                                    <input type="number" name="enchant" class="form-control" value="{{ request.POST.enchant|default:'0' }}" min="0">
                                </div>
                            </div>

                            <div class="d-flex gap-2">
                                <button type="submit" class="btn-action">
                                    <i class="bi bi-check-circle me-2"></i>{% trans "Criar" %}
                                </button>
                                <a href="{% url 'games:level_rewards_manager_reward_list' %}" class="btn btn-secondary">{% trans "Cancelar" %}</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}