{% extends "base.html" %}

{% block title %}Editar Contacto{% endblock %}

{% block content %}

<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>

<!-- SECCIÓN DE EDICIÓN (formulario) -->
<div class="row mt-4">
  <div class="col-12">
    <h2>Modificar Persona</h2>
    <h4>Base de datos JSON (Index = {{index_ver}} ID = {{Todos[index_ver].id}})</h4>
    <form action="{{url_for('editar', index = index_ver)}}" method="post">
      <div class="row g-3">
        <input type="hidden" name="id" value="{{Todos[index_ver].id}}">
        <div class="col-md-2">
          <input type="text" class="form-control" name="Nombre" value="{{Todos[index_ver].nombre}}">
        </div>
        <div class="col-md-2">
          <input type="text" class="form-control" name="Apellido" value="{{Todos[index_ver].apellido}}">
        </div>
        <div class="col-md-2">
          <input type="text" class="form-control" name="Apodo" value="{{Todos[index_ver].apodo}}">
        </div>
        <div class="col-md-2">
          <input type="tel" class="form-control" name="Telefono" value="{{Todos[index_ver].telefono}}">
        </div>
        <div class="col-md-2">
          <input type="text" class="form-control" name="Direccion" value="{{Todos[index_ver].direccion}}">
        </div>
        <div class="col-md-2">
          <button type="submit" class="btn btn-primary btn-block">Modificar</button>
        </div>
      </div>
    </form>
  </div>
</div>

{% endblock %}