{% extends "base.html" %}

{% block title %}sendword — hooks{% endblock %}

{% block crumbs %}
<div class="wf-crumbs">
  <span aria-current="page">HOOKS</span>
</div>
{% endblock %}

{% block actions %}
<a class="wf-btn sm primary" href="/hooks/new">+ NEW HOOK</a>
{% endblock %}

{% block content %}
<div class="wf-f wf-ai-b wf-gap-4 wf-mb-2">
  <h1 class="wf-pagetitle wf-p-0">Hooks</h1>
</div>
<p class="wf-fg-muted wf-t-sm wf-mb-4">{{ hooks | length }} hook{{ 's' if hooks | length != 1 }} configured</p>

{% if hooks | length == 0 %}
<div class="wf-empty">
  <div class="wf-empty-title">NO HOOKS YET</div>
  <div class="wf-empty-msg">Create your first webhook hook to get started.</div>
  <a class="wf-btn sm primary" href="/hooks/new">+ NEW HOOK</a>
</div>
{% else %}
<div class="wf-panel">
  <div class="wf-panel-head">
    <span class="wf-panel-title">ALL HOOKS</span>
    <div class="wf-input-group" style="max-width: 240px;">
      <span class="wf-input-addon">&#x2315;</span>
      <input class="wf-input sm" placeholder="Filter hooks…" id="hook-filter" oninput="filterHooks(this.value)">
    </div>
  </div>
  <table class="wf-table is-interactive">
    <thead>
      <tr>
        <th>NAME</th>
        <th>SLUG</th>
        <th>STATUS</th>
        <th>RECENT</th>
        <th>LAST TRIGGERED</th>
      </tr>
    </thead>
    <tbody id="hook-list">
      {% for hook in hooks %}
      <tr data-hook-name="{{ hook.name | lower }}" data-hook-slug="{{ hook.slug }}">
        <td class="strong"><a href="/hooks/{{ hook.slug }}">{{ hook.name }}</a></td>
        <td><code>{{ hook.slug }}</code></td>
        <td>
          {% if hook.enabled %}
            <span class="wf-tag ok"><span class="dot"></span>ENABLED</span>
          {% else %}
            <span class="wf-tag"><span class="dot"></span>DISABLED</span>
          {% endif %}
        </td>
        <td>
          {% for status in hook.recent_statuses %}
            <span class="wf-dot" style="color: var({% if status == 'success' %}--ok{% elif status == 'failed' %}--err{% elif status == 'running' %}--warn{% else %}--fg-muted{% endif %});"></span>
          {% endfor %}
        </td>
        <td>
          {% if hook.last_triggered_at %}
            <span data-ts="{{ hook.last_triggered_at }}">{{ hook.last_triggered_at }}</span>
          {% else %}
            <span class="muted">—</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

<script>
function filterHooks(query) {
  var q = query.toLowerCase();
  document.querySelectorAll('#hook-list tr').forEach(function(row) {
    var name = row.getAttribute('data-hook-name') || '';
    var slug = row.getAttribute('data-hook-slug') || '';
    row.style.display = (name.includes(q) || slug.includes(q)) ? '' : 'none';
  });
}
</script>
{% endblock %}