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

{% block titulo %}Makarios | Bem Aventurados em Cristo{% endblock %}

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

{% block content %}
<style>
  .tab-content {
    display: none;
  }
  .tab-content.active {
    display: block;
  }
  .main-membros{
    background-color: #F8F3EE !important;
  }
</style>
<section class="page-header">
  <div class="container">
    <h2>Membros</h2>
  </div>
</section>
<div class="main-membros">
  <section class="main container sbr clearfix">
  <a class="btn btn-secondary col-md-2 offset-md-10 mb-2" href="/registro">Novo Membro</a>
  <table class="table table-bordered">
      <thead>
        <tr>
          <th>Nome</th>
          <th>Email</th>
          <th>Celular</th>
          <th>Ações</th>
        </tr>
      </thead>
      <tbody>
        {% for membro in membros %}
        <tr>
          <td>{{ membro.first_name }} {{ membro.last_name }}</td>
          <td>{{ membro.email }}</td>
          <td>{{ membro.celular }}</td>
          <td>
            <a href="{% url 'editar_membro' membro.pk %}">
              <i class="fas fa-pen text-warning"></i>
            </a>
            <a href="{% url 'excluir_membro' membro.pk %}">
              <i class="fas fa-minus-circle text-danger"></i>
            </a>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="4">Nenhum membro encontrado.</td></tr>
        {% endfor %}
      </tbody>
  </table>
</section>
</div>

{% include 'footer.html' %}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
{% endblock %}