{% extends "base.j2" %}

{% block cron %}active{% endblock %}

{% block content %}
<style>.htmx-request > svg { display: none; }</style>
<div class="container">
  <div class="row mt-3">
    <div class="col-12">
      <div class="card shadow">
        <div class="card-body">
          <div class="row mb-3" style="max-height: 100%">
            <div class="col-8">
              <h3 class="card-title">Cron Registry</h3>
            </div>
          </div>
          <table class="table table-sm table-striped table-hover" id="tasks">
            <thead>
              <tr>
                <th scope="col">Next Run</th>
                <th scope="col">Name</th>
                <th scope="col">Cron Tab</th>
                <th scope="col" style="width: 5%"></th>
              </tr>
            </thead>
            <tbody class="font-monospace">
              {% for name, tab in registry.items() %}
              <tr>
                <td>{{ schedule[name] }}</td>
                <td>{{ name }}</td>
                <td>{{ tab }}</td>
                <td>
                  <div class="d-inline" hx-delete="{{ base_url }}cron/{{ name }}" hx-confirm="Remove {{ name }}?" hx-target="closest tr" hx-swap="delete">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" role="button" class="text-danger" style="cursor: pointer">
                      <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
                      <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
                    </svg>
                    <img class="htmx-indicator" src="https://www.tastyware.dev/static/bars.svg" width="16" height="16"/>
                  </div>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
