{% extends "profile_base.html" %}

{% set profile_nav_active = "timers" %}
{% block profile_content %}
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
        <div>
          {% set breadcrumbs = [
            {"name": current_user.name | display_name(current_user.username), "href": "/profile"},
            {"name": "Timers"}
          ] %}
          {% include "partials/breadcrumbs.html" %}
        </div>
        <a class="btn btn-sm btn-primary" href="/profile/timers/new">New Timer</a>
      </div>
  {% include "partials/flash.html" %}
      <div class="card shadow-sm">
        <div class="card-header d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center justify-content-between gap-2">
          <span class="fw-semibold">Your Timers</span>
        </div>
        <div class="card-body">
          {% if timers | length == 0 %}
            <p class="text-muted mb-0">
              No timers yet. A timer emits an event carrying your message, either once or on a repeat.
            </p>
          {% else %}
            <div class="table-responsive">
              <table class="table table-sm align-middle mb-0">
                <thead>
                  <tr>
                    <th>Message</th>
                    <th>Schedule</th>
                    <th>Status</th>
                    <th>Next Run</th>
                    <th>Runs</th>
                    <th class="text-end">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {% for timer in timers %}
                    <tr>
                      <td class="pearing-timer-message">{{ timer.message }}</td>
                      <td><span class="text-body-secondary">{{ timer.schedule }}</span></td>
                      <td>
                        {% if timer.status == "active" %}
                          <span class="badge text-bg-success">Active</span>
                        {% elif timer.status == "paused" %}
                          <span class="badge text-bg-warning">Paused</span>
                        {% elif timer.status == "completed" %}
                          <span class="badge text-bg-secondary">Completed</span>
                        {% else %}
                          <span class="badge text-bg-secondary">Cancelled</span>
                        {% endif %}
                      </td>
                      <td>
                        {% if timer.next_run_at %}
                          <span class="text-body-secondary small">{{ timer.next_run_at }}</span>
                        {% else %}
                          <span class="text-body-secondary small">&mdash;</span>
                        {% endif %}
                      </td>
                      <td>{{ timer.run_count }}</td>
                      <td class="text-end">
                        <div class="d-flex gap-2 justify-content-end">
                          <a class="btn btn-sm btn-outline-secondary" href="/profile/timers/{{ timer.uuid }}">Edit</a>
                          <form method="post" action="/profile/timers/{{ timer.uuid }}/delete" data-confirm-modal="confirm-delete-timer" data-confirm-name="{{ timer.message }}">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
                            <button class="btn btn-sm btn-outline-danger" type="submit">Delete</button>
                          </form>
                        </div>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          {% endif %}
        </div>
        {% with page=page, query=query, per_page_id="timers-per-page" %}
          {% include "partials/paging_footer.html" %}
        {% endwith %}
      </div>
      {% with
        modal_id="confirm-delete-timer",
        modal_title="Delete timer",
        modal_body='Delete <span class="fw-semibold" data-confirm-name></span>?',
        modal_confirm_text="Delete timer",
        modal_desc="This timer will be removed and will not fire again."
      %}
        {% include "partials/confirm_modal.html" %}
      {% endwith %}
{% endblock %}