{% extends "base.html" %}

{% block title %}Inicio - Directorio Telefónico{% endblock %}

{% block content %}

<h1 style="text-align:center;">Directorio Telefónico - Mi primera aplicación en Flask</h1>

<div class="row mt-4">
  <div class="col-md-6">
    <h2>Datos completos de la persona</h2>
    <table class="table table-bordered table-striped">
      <thead class="thead-dark">
        <tr>
          <th>Nombre</th>
          <th>Apellido</th>
          <th>Apodo</th>
          <th>Teléfono</th>
          <th>Dirección</th>
        </tr>
      </thead>
      <tbody>
        {% for (index, persona) in Todos.items() %}
        {% if index == index_ver %}
        <tr>
          <td>{{persona.nombre}}</td>
          <td>{{persona.apellido}}</td>
          <td>{{persona.apodo}}</td>
          <td>{{persona.telefono}}</td>
          <td>{{persona.direccion}}</td>
        </tr>
        {% endif %}
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="col-md-6">
    <h2>Personas</h2>
    <table class="table table-hover">
      <thead>
        <tr>
          <th>Nombre</th>
          <th>Acciones</th>
        </tr>
      </thead>
      <tbody>
        {% for (index, persona) in Todos.items() %}
        <tr>
          <td>{{persona.nombre}}, {{persona.apellido}}</td>
          <td>
            <a href="{{url_for('ver', index = index)}}" class="btn btn-sm btn-info">Ver</a>
            <a href="{{url_for('editar', index = index)}}" class="btn btn-sm btn-warning">Editar</a>
            <a href="{{url_for('eliminar', id = persona.id)}}" class="btn btn-sm btn-danger">Eliminar</a>
          </td>
        </tr>
        {% endfor %}
        <tr>
          <td colspan="2">
            <a href="{{url_for('agregar')}}" class="btn btn-success btn-block">➕ Agregar contacto</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

{% endblock %}