{% extends "base.html" %}

{% block title %}Dashboard - Tareas Periódicas{% endblock %}

{% block content %}
<h1>Panel de Administración de Tareas</h1>

<div class="row">
  <div class="col-md-6">
    <h2>Tareas Activas</h2>
    {% if tasks %}
      <ul class="list-group">
      {% for task in tasks %}
        <li class="list-group-item d-flex justify-content-between align-items-center">
          {{ task }}
          <div>
            <form action="/pause_task/" method="post" style="display:inline;">
              <input type="hidden" name="task_name" value="{{ task }}">
              <input type="hidden" name="token" value="SUPERVISOR_TOKEN">
              <button type="submit" class="btn btn-warning btn-sm">Pausar</button>
            </form>
            <form action="/resume_task/" method="post" style="display:inline;">
              <input type="hidden" name="task_name" value="{{ task }}">
              <input type="hidden" name="token" value="SUPERVISOR_TOKEN">
              <button type="submit" class="btn btn-success btn-sm">Reanudar</button>
            </form>
            <form action="/stop_task/" method="post" style="display:inline;">
              <input type="hidden" name="task_name" value="{{ task }}">
              <input type="hidden" name="token" value="SUPERVISOR_TOKEN">
              <button type="submit" class="btn btn-danger btn-sm">Detener</button>
            </form>
          </div>
        </li>
      {% endfor %}
      </ul>
    {% else %}
      <p>No hay tareas activas.</p>
    {% endif %}
  </div>

  <div class="col-md-6">
    <h2>Logs Recientes</h2>
    {% if logs %}
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Fecha/Hora</th>
          <th>Tarea</th>
          <th>Mensaje</th>
        </tr>
      </thead>
      <tbody>
        {% for log in logs %}
          <tr>
            <td>{{ log[1] }}</td>
            <td>{{ log[2] }}</td>
            <td>{{ log[3] }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
      <p>No se encontraron logs recientes.</p>
    {% endif %}
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  // Actualiza el panel cada 10 segundos
  setInterval(function(){
    location.reload();
  }, 10000);
</script>
{% endblock %}