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

{% block titulo %}Makarios | Forja{% 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>4° Edição do Discipulado "A Forja"</h2>
    </div>
</section>

<div class="main-tabs">
    <section class="main container sbr clearfix">
        <div class="content-tabs tabs-style-1 mb-1">
            <ul class="tabs-nav clearfix">
                <li><a href="#tab1" class="active">Lista Geral</a></li>
                <li><a href="#tab2">Membros</a></li>
                <li><a href="#tab3">Não Membros</a></li>
            </ul>

            <div class="tabs-container">
                <div class="tab-content active" id="tab1">
                    {% include "quarta/tabela.html" with registros=todos %}
                </div>
                <div class="tab-content active" id="tab2">
                    {% include "quarta/tabela.html" with registros=membros %}
                </div>
                <div class="tab-content" id="tab3">
                    {% include "quarta/tabela.html" with registros=nao_membros %}
                </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 id = this.getAttribute('href');
        document.querySelector(id).classList.add('active');
      });
    });

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