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

{% block extrastyle %}
<style>
.manager-bg { background: radial-gradient(ellipse at center, #1a1a2e 0%, #121220 100%); min-height: 100vh; padding: 30px 0; }
.card-glow { background: linear-gradient(to bottom right, #1a1a2e, #121220); border: 2px solid #6f42c1; border-radius: 12px; box-shadow: 0 0 15px rgba(111,66,193,.5), 0 0 25px rgba(13,202,240,.3); }
.pool-item-row { transition: all 0.3s ease; }
.pool-item-row:hover { background: rgba(111, 66, 193, 0.1) !important; }
.pool-item-row.editing { background: rgba(13, 202, 240, 0.15) !important; }

/* Fix para modal-backdrop não ficar por cima de tudo */
body .modal-backdrop,
body .modal-backdrop.show,
body .modal-backdrop.fade.show {
  z-index: 1040 !important;
  position: fixed !important;
}

body .modal,
body .modal.show,
body .modal.fade.show {
  z-index: 1050 !important;
  position: fixed !important;
}

body .modal-dialog {
  z-index: 1051 !important;
  position: relative !important;
}

body .modal-content {
  z-index: 1052 !important;
  position: relative !important;
}

/* Estilos do Modal Nova Temporada */
#createSeasonModal .modal-content {
  background: linear-gradient(to bottom right, #1a1a2e, #121220) !important;
  border: 2px solid #6f42c1 !important;
  border-radius: 12px !important;
  box-shadow: 0 0 15px rgba(111,66,193,.5), 0 0 25px rgba(13,202,240,.3) !important;
  color: #e2e8f0 !important;
}

#createSeasonModal .modal-header {
  background: linear-gradient(135deg, #6f42c1 0%, #0dcaf0 100%) !important;
  border-bottom: 2px solid rgba(13, 202, 240, 0.3) !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 1.25rem 1.5rem !important;
}

#createSeasonModal .modal-title {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
}

#createSeasonModal .btn-close {
  filter: invert(1) !important;
  opacity: 0.9 !important;
}

#createSeasonModal .btn-close:hover {
  opacity: 1 !important;
}

#createSeasonModal .modal-body {
  background: transparent !important;
  padding: 1.5rem !important;
  color: #e2e8f0 !important;
}

#createSeasonModal .modal-body label {
  color: #cbd5e0 !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
}

#createSeasonModal .modal-body input[type="text"],
#createSeasonModal .modal-body input[type="date"],
#createSeasonModal .modal-body input[type="number"],
#createSeasonModal .modal-body select {
  background: #2d3748 !important;
  border: 1px solid #4a5568 !important;
  color: #ffffff !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 8px !important;
  font-size: 0.95rem !important;
}

#createSeasonModal .modal-body input:focus,
#createSeasonModal .modal-body select:focus {
  border-color: #0dcaf0 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(13, 202, 240, 0.2) !important;
  background: #2d3748 !important;
}

#createSeasonModal .modal-body input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
  accent-color: #0dcaf0 !important;
}

#createSeasonModal .form-check label {
  color: #e2e8f0 !important;
  font-weight: 500 !important;
  margin-left: 0.5rem !important;
  cursor: pointer !important;
}

#createSeasonModal .modal-footer {
  background: transparent !important;
  border-top: 1px solid rgba(13, 202, 240, 0.2) !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 0 0 12px 12px !important;
}

#createSeasonModal .modal-footer .btn-secondary {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

#createSeasonModal .modal-footer .btn-secondary:hover {
  background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
}

#createSeasonModal .modal-footer .btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

#createSeasonModal .modal-footer .btn-success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

.legend-box {
  background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1rem;
  border: 1px solid rgba(13, 202, 240, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.legend-title {
  color: #0dcaf0;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.legend-content {
  color: #cbd5e0;
  line-height: 1.7;
  font-size: 0.95rem;
}
.legend-content strong {
  color: #e2e8f0;
}
.legend-example {
  background: rgba(13, 202, 240, 0.1);
  border-left: 3px solid #0dcaf0;
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
  border-radius: 6px;
  color: #e2e8f0;
  font-weight: 500;
  font-size: 0.9rem;
}
.legend-example strong {
  color: #0dcaf0;
  font-size: 1rem;
}
.edit-mode-inputs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.edit-mode-inputs select,
.edit-mode-inputs input {
  background: #2d3748;
  border: 1px solid #4a5568;
  color: #ffffff;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.9rem;
}
.edit-mode-inputs select:focus,
.edit-mode-inputs input:focus {
  border-color: #0dcaf0;
  outline: none;
  box-shadow: 0 0 0 2px rgba(13, 202, 240, 0.2);
}
.edit-mode-inputs select {
  flex: 1;
  min-width: 200px;
}
.edit-mode-inputs input {
  width: 80px;
}
.btn-outline-info:hover {
  background-color: #0dcaf0 !important;
  color: #0b132b !important;
}
.btn-outline-danger:hover {
  background-color: #dc3545 !important;
  color: white !important;
}
.card-glow .card-header {
  color: #e2e8f0 !important;
  font-weight: 600;
  font-size: 1.05rem;
}
.card-glow .card-body label {
  color: #cbd5e0 !important;
  font-weight: 500;
  margin-bottom: 0.4rem;
  display: block;
}
.card-glow .card-body input[type="text"],
.card-glow .card-body input[type="date"],
.card-glow .card-body input[type="number"],
.card-glow .card-body select {
  background: #2d3748 !important;
  border: 1px solid #4a5568 !important;
  color: #ffffff !important;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.95rem;
}
.card-glow .card-body input:focus,
.card-glow .card-body select:focus {
  border-color: #0dcaf0 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 202, 240, 0.2) !important;
}
.card-glow .card-body input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #0dcaf0;
}
.card-glow .form-check label {
  color: #e2e8f0 !important;
  font-weight: 500;
  margin-left: 0.5rem;
  cursor: pointer;
}
.table-dark thead th {
  color: #e2e8f0 !important;
  font-weight: 600;
  background: rgba(13, 202, 240, 0.1) !important;
  border-bottom: 2px solid #0dcaf0 !important;
}
.table-dark tbody td {
  color: #cbd5e0 !important;
  font-weight: 500;
  vertical-align: middle;
}
.btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 0.6rem 1.5rem !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
  transition: all 0.3s ease !important;
}
.btn-warning:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5) !important;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
}
.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
  transition: all 0.3s ease !important;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5) !important;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
}
.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.btn-success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}
.btn-secondary {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.btn-secondary:hover {
  background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
}
.badge.bg-info {
  background: linear-gradient(135deg, #0dcaf0 0%, #0891b2 100%) !important;
  color: #0b132b !important;
  font-weight: 700;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(13, 202, 240, 0.3);
}
.small.text-white-50 {
  color: #cbd5e0 !important;
  font-weight: 500;
}
.form-control {
  background: #2d3748 !important;
  border: 1px solid #4a5568 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-size: 0.9rem;
}
.form-control:focus {
  border-color: #0dcaf0 !important;
  box-shadow: 0 0 0 2px rgba(13, 202, 240, 0.2) !important;
}
.form-control option {
  background: #2d3748;
  color: #ffffff;
}
</style>
{% endblock %}

{% block content %}
<div class="manager-bg">
  <div class="container">

    <div class="d-flex justify-content-between align-items-center mb-4 text-white">
      <h3 class="m-0">
        <i class="fas fa-gift me-2" style="color: #0dcaf0;"></i>
        <span style="color: #e2e8f0; font-weight: 600;">{% trans "Gerenciar Bônus Diário" %}</span>
      </h3>
      <a href="{% url 'games:daily_bonus_dashboard' %}" class="btn btn-outline-info rounded-pill">
        <i class="fas fa-calendar-check me-1"></i>{% trans "Ver Calendário" %}
      </a>
    </div>

    <!-- Lista de Temporadas -->
    <div class="row g-3 mb-3">
      <div class="col-12">
        <div class="card card-glow">
          <div class="card-header d-flex justify-content-between align-items-center">
            <span><i class="fas fa-list me-2"></i>{% trans "Temporadas" %}</span>
            <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#createSeasonModal">
              <i class="fas fa-plus me-1"></i>{% trans "Nova Temporada" %}
            </button>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="table table-dark table-striped mb-0">
                <thead>
                  <tr>
                    <th>{% trans "Nome" %}</th>
                    <th>{% trans "Período" %}</th>
                    <th>{% trans "Status" %}</th>
                    <th>{% trans "Reset (UTC)" %}</th>
                    <th class="text-end">{% trans "Ações" %}</th>
                  </tr>
                </thead>
                <tbody>
                  {% for s in all_seasons %}
                    <tr {% if season and season.id == s.id %}class="table-info"{% endif %}>
                      <td>
                        <strong>{{ s.name }}</strong>
                        {% if season and season.id == s.id %}<span class="badge bg-info ms-2">{% trans "Editando" %}</span>{% endif %}
                      </td>
                      <td>{{ s.start_date|date:"d/m/Y" }} - {{ s.end_date|date:"d/m/Y" }}</td>
                      <td>
                        {% if s.is_active %}
                          <span class="badge bg-success">{% trans "Ativa" %}</span>
                        {% else %}
                          <span class="badge bg-secondary">{% trans "Inativa" %}</span>
                        {% endif %}
                      </td>
                      <td>{{ s.reset_hour_utc }}h</td>
                      <td class="text-end">
                        <a href="?season_id={{ s.id }}" class="btn btn-sm btn-info rounded-pill me-1">
                          <i class="fas fa-edit"></i> {% trans "Editar" %}
                        </a>
                        {% if not s.is_active %}
                          <form method="post" class="d-inline" onsubmit="return confirm('{% trans 'Tem certeza que deseja ativar esta temporada? Isso desativará outras temporadas ativas.' %}');">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="activate_season" />
                            <input type="hidden" name="season_id" value="{{ s.id }}" />
                            <button type="submit" class="btn btn-sm btn-success rounded-pill me-1">
                              <i class="fas fa-check"></i> {% trans "Ativar" %}
                            </button>
                          </form>
                        {% endif %}
                        <form method="post" class="d-inline" onsubmit="return confirm('{% trans 'Tem certeza que deseja deletar esta temporada? Esta ação não pode ser desfeita.' %}');">
                          {% csrf_token %}
                          <input type="hidden" name="action" value="delete_season" />
                          <input type="hidden" name="season_id" value="{{ s.id }}" />
                          <button type="submit" class="btn btn-sm btn-danger rounded-pill">
                            <i class="fas fa-trash"></i> {% trans "Deletar" %}
                          </button>
                        </form>
                      </td>
                    </tr>
                  {% empty %}
                    <tr>
                      <td colspan="5" class="text-center text-muted">{% trans "Nenhuma temporada criada ainda." %}</td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal para Criar Nova Temporada -->
    <div class="modal fade" id="createSeasonModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content bg-dark text-white">
          <div class="modal-header">
            <h5 class="modal-title">{% trans "Nova Temporada" %}</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
          </div>
          <form method="post">
            {% csrf_token %}
            <input type="hidden" name="action" value="create_season" />
            <div class="modal-body">
              {{ season_form.non_field_errors }}
              <div class="mb-3">
                {{ season_form.name.label_tag }}
                {{ season_form.name }}
              </div>
              <div class="row">
                <div class="col-6 mb-3">
                  {{ season_form.start_date.label_tag }}
                  {{ season_form.start_date }}
                </div>
                <div class="col-6 mb-3">
                  {{ season_form.end_date.label_tag }}
                  {{ season_form.end_date }}
                </div>
              </div>
              <div class="row">
                <div class="col-6 mb-3">
                  {{ season_form.reset_hour_utc.label_tag }}
                  {{ season_form.reset_hour_utc }}
                </div>
                <div class="col-6 mb-3">
                  <div class="form-check mt-4">
                    {{ season_form.is_active }}
                    {{ season_form.is_active.label_tag }}
                  </div>
                  <div class="form-check mt-2">
                    {{ season_form.allow_retroactive_claim }}
                    {{ season_form.allow_retroactive_claim.label_tag }}
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancelar" %}</button>
              <button type="submit" class="btn btn-success">{% trans "Criar Temporada" %}</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    {% if season %}
    <div class="row g-3">
      <div class="col-12 col-lg-5">
        <div class="card card-glow">
          <div class="card-header">
            <i class="fas fa-clock me-2"></i>{% trans "Editar Temporada" %}: <strong>{{ season.name }}</strong>
          </div>
          <div class="card-body">
            <form method="post" class="row g-2">
              {% csrf_token %}
              <input type="hidden" name="action" value="save_season" />
              <input type="hidden" name="season_id" value="{{ season.id }}" />
              {{ season_form.non_field_errors }}
              <div class="col-12">{{ season_form.name.label_tag }} {{ season_form.name }}</div>
              <div class="col-6">{{ season_form.start_date.label_tag }} {{ season_form.start_date }}</div>
              <div class="col-6">{{ season_form.end_date.label_tag }} {{ season_form.end_date }}</div>
              <div class="col-6">{{ season_form.reset_hour_utc.label_tag }} {{ season_form.reset_hour_utc }}</div>
              <div class="col-6 form-check mt-4">{{ season_form.is_active }} {{ season_form.is_active.label_tag }}</div>
              <div class="col-12 form-check">{{ season_form.allow_retroactive_claim }} {{ season_form.allow_retroactive_claim.label_tag }}</div>
              <div class="col-12 text-end mt-2">
                <button class="btn btn-warning rounded-pill" type="submit">{% trans "Salvar Alterações" %}</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-7">
        <div class="card card-glow h-100">
          <div class="card-header d-flex justify-content-between align-items-center">
            <span style="color: #e2e8f0; font-weight: 600;">{% trans "Pool de Itens (Sorteio Aleatório)" %}</span>
            <form method="post" class="d-flex gap-2 align-items-center">
              {% csrf_token %}
              <input type="hidden" name="action" value="add_pool" />
              {{ pool_form.item }}
              {{ pool_form.weight }}
              <button class="btn btn-primary btn-sm" type="submit">
                <i class="fas fa-plus me-1"></i>{% trans "Adicionar" %}
              </button>
            </form>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="table table-dark table-striped mb-0">
                <thead><tr><th>{% trans "Item" %}</th><th style="width:120px">{% trans "Peso" %}</th><th class="text-end" style="width:180px">{% trans "Ações" %}</th></tr></thead>
                <tbody>
                  {% if pool_entries %}
                    {% for e in pool_entries %}
                    <tr class="pool-item-row" id="pool-row-{{ e.id }}">
                      <td class="view-mode-{{ e.id }}">{{ e.item.name }} +{{ e.item.enchant }}</td>
                      <td class="view-mode-{{ e.id }}">{{ e.weight }}</td>
                      <td class="text-end">
                        <div class="view-mode-{{ e.id }}">
                          <button class="btn btn-outline-info btn-sm" onclick="toggleEditMode({{ e.id }}, '{{ e.item.id }}', {{ e.weight }}, '{{ e.item.name|escapejs }} +{{ e.item.enchant }}')">
                            <i class="fas fa-edit"></i> {% trans "Editar" %}
                          </button>
                          <form method="post" class="d-inline">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="delete_pool" />
                            <input type="hidden" name="entry_id" value="{{ e.id }}" />
                            <button class="btn btn-outline-danger btn-sm" type="submit" onclick="return confirm('{% trans 'Tem certeza que deseja remover este item?' %}')">
                              <i class="fas fa-trash"></i> {% trans "Remover" %}
                            </button>
                          </form>
                        </div>
                        <form method="post" class="edit-mode-{{ e.id }}" style="display:none;">
                          {% csrf_token %}
                          <input type="hidden" name="action" value="edit_pool" />
                          <input type="hidden" name="entry_id" value="{{ e.id }}" />
                          <div class="edit-mode-inputs">
                            <select name="item" class="item-select-{{ e.id }}" required>
                              {% for item in pool_form.item.field.queryset %}
                                <option value="{{ item.id }}" {% if item.id == e.item.id %}selected{% endif %}>{{ item.name }} +{{ item.enchant }}</option>
                              {% endfor %}
                            </select>
                            <input type="number" name="weight" value="{{ e.weight }}" min="1" class="weight-input-{{ e.id }}" required />
                            <button class="btn btn-success btn-sm" type="submit">
                              <i class="fas fa-check"></i>
                            </button>
                            <button class="btn btn-secondary btn-sm" type="button" onclick="cancelEdit({{ e.id }})">
                              <i class="fas fa-times"></i>
                            </button>
                          </div>
                        </form>
                      </td>
                    </tr>
                    {% endfor %}
                  {% else %}
                    <tr><td colspan="3" class="text-center text-white-50 py-3">{% trans "Nenhum item no pool." %}</td></tr>
                  {% endif %}
                </tbody>
              </table>
            </div>
            
            <!-- Legenda sobre o Peso -->
            <div class="legend-box">
              <div class="legend-title">
                <i class="fas fa-info-circle"></i>
                {% trans "Como funciona o Peso?" %}
              </div>
              <div class="legend-content">
                <p class="mb-2">
                  {% trans "O <strong>peso</strong> determina a probabilidade de cada item ser sorteado quando o dia está configurado como <strong>Aleatório</strong>." %}
                </p>
                <p class="mb-2">
                  {% trans "Quanto maior o peso, maior a chance do item ser sorteado. A probabilidade é calculada proporcionalmente em relação ao peso total de todos os itens." %}
                </p>
                <div class="legend-example">
                  <strong>{% trans "Exemplo:" %}</strong><br>
                  {% trans "• Item A (peso 5) = 5/(5+3+2) = 50% de chance" %}<br>
                  {% trans "• Item B (peso 3) = 3/(5+3+2) = 30% de chance" %}<br>
                  {% trans "• Item C (peso 2) = 2/(5+3+2) = 20% de chance" %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12">
        <div class="card card-glow">
          <div class="card-header d-flex justify-content-between align-items-center">
            <span style="color: #e2e8f0; font-weight: 600;">
              <i class="fas fa-calendar-alt me-2"></i>{% trans "Mapa de Dias" %}
            </span>
          </div>
          <div class="card-body">
            <div class="row g-2 row-cols-2 row-cols-md-4 row-cols-lg-7">
              {% for d in days_range %}
              {% with dd=day_map|get_item:d %}
                <div class="col">
                  <div class="card card-glow h-100">
                    <div class="card-body text-center">
                      <span class="badge bg-info mb-2">{% trans "Dia" %} {{ d }}</span>
                      <div class="small text-white-50 mb-2">
                        {% if dd %}
                          {% if dd.mode == 'FIXED' and dd.fixed_item %}
                            {% trans "Fixo" %}: {{ dd.fixed_item.name }} +{{ dd.fixed_item.enchant }}
                          {% else %}
                            {% trans "Aleatório do Pool" %}
                          {% endif %}
                        {% else %}
                          {% trans "Aleatório do Pool" %}
                        {% endif %}
                      </div>
                      <form method="post" class="mt-auto">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="save_day" />
                        <input type="hidden" name="day_of_month" value="{{ d }}" />
                        <div class="mb-2">
                          <select name="mode" class="form-control">
                            <option value="RANDOM" {% if not dd or dd.mode == 'RANDOM' %}selected{% endif %}>{% trans "Aleatório" %}</option>
                            <option value="FIXED" {% if dd and dd.mode == 'FIXED' %}selected{% endif %}>{% trans "Fixo" %}</option>
                          </select>
                        </div>
                        <div class="mb-2">
                          <select name="fixed_item" class="form-control">
                            <option value="" {% if not dd or not dd.fixed_item_id %}selected{% endif %}>— {% trans "Selecione o item" %} —</option>
                            {% for it in pool_entries %}
                              <option value="{{ it.item.id }}" {% if dd and dd.fixed_item_id == it.item.id %}selected{% endif %}>{{ it.item.name }} +{{ it.item.enchant }}</option>
                            {% endfor %}
                          </select>
                        </div>
                        <button class="btn btn-primary btn-sm" type="submit">{% trans "Salvar" %}</button>
                      </form>
                    </div>
                  </div>
                </div>
              {% endwith %}
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>
    {% else %}
    <div class="row g-3">
      <div class="col-12">
        <div class="alert alert-info">
          <i class="fas fa-info-circle me-2"></i>
          {% trans "Selecione uma temporada da lista acima para editar, ou crie uma nova temporada para começar a configurar." %}
        </div>
      </div>
    </div>
    {% endif %}
  </div>
</div>

<script>
function toggleEditMode(entryId, itemId, weight, itemName) {
  // Esconder modo visualização
  const viewModes = document.querySelectorAll('.view-mode-' + entryId);
  viewModes.forEach(el => el.style.display = 'none');
  
  // Mostrar modo edição
  const editModes = document.querySelectorAll('.edit-mode-' + entryId);
  editModes.forEach(el => el.style.display = 'block');
  
  // Adicionar classe de highlight na linha
  const row = document.getElementById('pool-row-' + entryId);
  if (row) row.classList.add('editing');
}

function cancelEdit(entryId) {
  // Mostrar modo visualização
  const viewModes = document.querySelectorAll('.view-mode-' + entryId);
  viewModes.forEach(el => el.style.display = '');
  
  // Esconder modo edição
  const editModes = document.querySelectorAll('.edit-mode-' + entryId);
  editModes.forEach(el => el.style.display = 'none');
  
  // Remover classe de highlight
  const row = document.getElementById('pool-row-' + entryId);
  if (row) row.classList.remove('editing');
}
</script>
{% endblock %}