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

{% block extrastyle %}
<style>
.config-bg { 
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #121220 100%); 
    min-height: 100vh; 
    padding: 40px 0; 
}

.category-section {
    margin-bottom: 3rem;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(111, 66, 193, 0.3);
}

.category-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.category-icon.bg-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.category-icon.bg-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.category-icon.bg-warning { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
.category-icon.bg-info { background: linear-gradient(135deg, #0dcaf0 0%, #06b6d4 100%); }
.category-icon.bg-secondary { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%); }
.category-icon.bg-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

.category-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f8f9fa;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    margin: 0;
}

.card-glow { 
    background: linear-gradient(180deg, #1a1a2e, #121220); 
    border: 2px solid #6f42c1; 
    border-radius: 16px; 
    box-shadow: 0 0 18px rgba(111,66,193,.5), 0 0 28px rgba(13,202,240,.3); 
    transition: transform .15s ease, box-shadow .2s ease; 
}
.card-glow:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 0 22px rgba(111,66,193,.7), 0 0 34px rgba(13,202,240,.5); 
}

.btn-config { 
    background: linear-gradient(90deg, #0dcaf0, #6f42c1); 
    border: 0; 
    box-shadow: 0 0 14px #6f42c1, 0 0 22px #0dcaf0; 
}

.icon-wrap { 
    width: 48px; 
    height: 48px; 
    border-radius: 12px; 
    background: rgba(13,202,240,.08); 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    margin-right: .5rem; 
}
.icon-wrap svg { width: 24px; height: 24px; }

.badge-new { 
    background: linear-gradient(135deg, #10b981 0%, #059669 100%); 
    color: white; 
    font-size: 0.65rem; 
    font-weight: bold; 
    padding: 2px 8px; 
    border-radius: 12px;
    text-transform: uppercase;
    animation: pulse-new 2s infinite;
    display: inline-block;
    margin-left: 8px;
}
@keyframes pulse-new {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
</style>
{% endblock %}

{% block content %}
<div class="config-bg">
  <div class="container">
    <div class="d-flex justify-content-between align-items-center mb-5">
      <h2 class="text-white m-0">
        <i class="bi bi-sliders me-2"></i>{% trans "Central de Configurações" %}
      </h2>
      <a href="{% url 'dashboard' %}" class="btn btn-config rounded-pill text-white">
        <i class="bi bi-arrow-left me-2"></i>{% trans "Voltar ao Dashboard" %}
      </a>
    </div>

    {% for category in categories %}
    <div class="category-section">
      <div class="category-header">
        <div class="category-icon bg-{{ category.color }} text-white">
          <i class="bi {{ category.icon }}"></i>
        </div>
        <h3 class="category-title">{{ category.name }}</h3>
      </div>

      <div class="row g-3 row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4">
        {% for e in category.entries %}
        <div class="col">
          <a href="{% url e.url_name %}" class="text-decoration-none">
            <div class="card card-glow h-100">
              <div class="card-body d-flex align-items-start text-white">
                <span class="icon-wrap me-2">
                  <i class="bi {{ e.icon }} text-info"></i>
                </span>
                <div class="flex-grow-1">
                  <div class="fw-bold">
                    {{ e.title }}
                    {% if e.is_new %}
                      <span class="badge-new">✨ Novo</span>
                    {% endif %}
                  </div>
                  <div class="text-white-50 small">{{ e.description|default:_("Acessar módulo de configuração") }}</div>
                </div>
              </div>
            </div>
          </a>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}