{% extends 'private_template.html' %}
{% load static %}

{% block titulo %}Makarios | Eventos{% endblock %}

{% block header %}
  {% include 'private_header.html' %}
{% endblock %}

{% block content %}
<style>
  .tab-content { display: none; }
  .tab-content.active { display: block; }
  .main-tabs { background-color: #F8F3EE !important; }
</style>

<section class="page-header">
  <div class="container">
    <h2>Lista de Eventos</h2>
  </div>
</section>

<div class="main-tabs">
  <section class="main container sbr clearfix">
    <a class="btn btn-secondary col-md-2 offset-md-10 mb-2" href="{% url 'criar_evento' %}">Novo Evento</a>

    <div class="content-tabs tabs-style-1 mb-1">
      <ul class="tabs-nav clearfix">
        <li><a href="#tab-geral" class="active">Lista Geral</a></li>
        <li><a href="#tab-proximos">Próximos</a></li>
        <li><a href="#tab-passados">Passados</a></li>
      </ul>

      <div class="tabs-container">
        <div class="tab-content active" id="tab-geral">
          {% include "events/tabela.html" with itens=eventos %}
        </div>

        <div class="tab-content" id="tab-proximos">
          {% include "events/tabela.html" with itens=eventos_proximos %}
        </div>

        <div class="tab-content" id="tab-passados">
          {% include "events/tabela.html" with itens=eventos_passados %}
        </div>
      </div>
    </div>
  </section>
</div>

<script src="{% static 'js/jquery-1.7.2.min.js' %}"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const tabs = document.querySelectorAll('.tabs-nav a');
    const contents = document.querySelectorAll('.tab-content');

    tabs.forEach(tab => {
      tab.addEventListener('click', function (e) {
        e.preventDefault();
        tabs.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        contents.forEach(c => c.classList.remove('active'));
        const pane = document.querySelector(this.getAttribute('href'));
        if (pane) pane.classList.add('active');
      });
    });

    if (tabs.length > 0) tabs[0].click();
  });
</script>
{% endblock %}