{% extends "base.html" %}
{% block title %}Poblaciones{% endblock %}
{% block content %}

<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-icons/bootstrap-icons.css') }}">

 
<div class="page-header">
  <div class="page-eyebrow">Configuración</div>
  <div class="page-title">Poblaciones</div>
  <div class="page-subtitle">Gestiona las poblaciones administradas.</div>

</div>


<div style="display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;">

  {# Formulario añadir #}
  <div style="background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;min-width:260px;">
    <p class="form-label" style="margin-bottom:14px;">Nueva población</p>
    <form method="POST" action="{{ url_for('poblaciones_nueva') }}">
      <div class="form-group">
        <input class="form-input" type="text" name="poblacion"
               placeholder="Nombre de la población" required autofocus>
      </div>
      <button type="submit" class="btn btn-primary" style="width:100%;margin-top:8px;">
        ✚ Añadir
      </button>
    </form>
  </div>

  {# Listado #}
  <div style="flex:1;min-width:280px;max-width: 800px;">
    <p style="margin-top:8px;font-size:12px;color:var(--muted)">{{ rows|length }} poblaciones</p>
    <div class="table-wrap border">
      <table id="tabla" class="">
        <thead class="">
          <tr class="">
            <th hidden >ID</th>
            <th>Población</th>
            <!-- <th style="text-align:right">Acción</th> -->
          </tr>
        </thead>
        <tbody>
          {% for r in rows %}
          {% set nombre_pob = r['poblacion'] %}
          <tr class="border-bottom">
            <td hidden class="td-id">{{ r['id'] }}</td>
            <td>{{ r['poblacion'] }}</td>

          </tr>
          {% else %}
          <tr><td colspan="3"><div class="empty-state">Sin poblaciones registradas.</div></td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<script src="{{ url_for('static', filename='js/jquery-3.7.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/tabledit.min.js') }}"></script>


<script>
$('#tabla').Tabledit({
    url:'/editar_poblaciones',

    editButton:true,
    deleteButton:true,
    restoreButton:false,
    hideIdentifier:false,

    buttons:{
        edit:{
            class:'btn btn-sm border rounded me-1',
            html:'<i class="bi bi-pencil"></i> '
        },
        delete:{
            class:'btn btn-sm btn-light text-danger border me-1',
            html:'<i class="bi bi-trash"></i>'
            // html:'Borrar'
        },
        save:{
            class:'btn btn-sm btn-success',
            html:'Guardar'
        },
        confirm:{
            class:'btn btn-sm btn-warning',
            html:'¿Seguro?'
        }
    },

    columns:{
        identifier:[0,'id'],
        editable:[
            [1,'poblacion']
        ]

    },

    onSuccess:function(data){
        if (data.action == "edit") {
            location.reload();
        }

        if (data.action == "delete") {
            location.reload();
        }
    
    console.log(data);
  }  
});

$('#tabla td:last-child').attr(
    'style',
    'white-space: nowrap; width:185px;'
);
</script>

{% endblock %}