{% extends "base.html" %}

{% block title %}Agregar Contacto{% endblock %}

{% block content %}

<div class="row mt-4">
  <div class="col-md-6">
    <h2>Agregar Persona</h2>
    <form action="{{url_for('agregar')}}" method="post">
      <div class="row g-3">
        <div class="col-md-6">
          <input type="text" class="form-control" name="Nombre" placeholder="Nombre">
        </div>
        <div class="col-md-6">
          <input type="text" class="form-control" name="Apellido" placeholder="Apellido">
        </div>
        <div class="col-md-6">
          <input type="text" class="form-control" name="Apodo" placeholder="Apodo">
        </div>
        <div class="col-md-6">
          <input type="tel" class="form-control" name="Telefono" placeholder="Teléfono">
        </div>
        <div class="col-12">
          <input type="text" class="form-control" name="Direccion" placeholder="Dirección">
        </div>
        <div class="col-12">
          <button type="submit" class="btn btn-success btn-block">➕ Agregar contacto</button>
        </div>
      </div>
    </form>
  </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 %}