{% extends "base.html" %}

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

{% block crumbs %}
<div class="wf-crumbs">
  <a href="/">HOOKS</a><span class="sep">/</span>
  <span aria-current="page">{{ slug | upper }}</span>
</div>
{% endblock %}

{% block actions %}
<a class="wf-btn sm" href="/hooks/{{ slug }}/edit">EDIT</a>
<form method="post" action="/hooks/{{ slug }}/delete"
      onsubmit="return confirm('Delete hook {{ name }}?')" class="wf-ib">
  <button type="submit" class="wf-btn sm danger">DELETE</button>
</form>
{% endblock %}

{% block content %}
<div class="wf-f wf-ai-b wf-gap-4 wf-mb-2">
  <h1 class="wf-pagetitle wf-p-0">{{ name }}</h1>
  {% if enabled %}
    <span class="wf-tag ok"><span class="dot"></span>ENABLED</span>
  {% else %}
    <span class="wf-tag"><span class="dot"></span>DISABLED</span>
  {% endif %}
</div>
{% if description %}
<p class="wf-fg-muted wf-t-sm wf-mb-4">{{ description }}</p>
{% endif %}

<div class="wf-split wf-grow">

{# ── Left: config ── #}
<div class="wf-panel wf-p-0 wf-grow">
  <div class="wf-panel-head"><span class="wf-panel-title">OVERVIEW</span></div>
  <dl class="wf-dl flush">
    <div class="wf-dl-row"><dt>Slug</dt><dd><code>{{ slug }}</code></dd></div>
    {% if description %}
    <div class="wf-dl-row"><dt>Description</dt><dd>{{ description }}</dd></div>
    {% endif %}
    <div class="wf-dl-row"><dt>Endpoint</dt><dd><code>/hook/{{ slug }}</code></dd></div>
    <div class="wf-dl-row">
      <dt>Status</dt>
      <dd>
        {% if enabled %}
          <span class="wf-tag ok"><span class="dot"></span>ENABLED</span>
        {% else %}
          <span class="wf-tag"><span class="dot"></span>DISABLED</span>
        {% endif %}
      </dd>
    </div>
  </dl>

  <div class="wf-panel-head wf-dim"><span class="wf-panel-title">EXECUTOR</span></div>
  <dl class="wf-dl flush">
    <div class="wf-dl-row"><dt>Type</dt><dd>{{ executor_type }}</dd></div>
    <div class="wf-dl-row">
      <dt>{{ executor_value_label }}</dt>
      <dd class="wf-f wf-ai-c wf-gap-2">
        <code>{{ executor_command }}</code>
        {% if script_edit_url %}
          <a class="wf-btn sm" href="{{ script_edit_url }}">EDIT SCRIPT</a>
        {% endif %}
      </dd>
    </div>
    {% if cwd %}
    <div class="wf-dl-row"><dt>Working dir</dt><dd><code>{{ cwd }}</code></dd></div>
    {% endif %}
    <div class="wf-dl-row"><dt>Timeout</dt><dd>{{ timeout_secs }}s</dd></div>
    {% if env_vars %}
    <div class="wf-dl-row">
      <dt>Environment</dt>
      <dd class="wf-f wf-wrap wf-gap-1">
        {% for var in env_vars %}
        <span class="wf-tag">{{ var }}</span>
        {% endfor %}
      </dd>
    </div>
    {% endif %}
  </dl>

  {% if auth_mode != "none" %}
  <div class="wf-panel-head wf-dim"><span class="wf-panel-title">AUTHENTICATION</span></div>
  <dl class="wf-dl flush">
    <div class="wf-dl-row">
      <dt>Mode</dt>
      <dd>
        <span class="wf-tag {% if auth_mode == 'bearer' %}info{% elif auth_mode == 'hmac' %}accent{% endif %}">
          {{ auth_mode | upper }}
        </span>
      </dd>
    </div>
    {% if auth_header %}
    <div class="wf-dl-row"><dt>Header</dt><dd><code>{{ auth_header }}</code></dd></div>
    {% endif %}
    {% if auth_algorithm %}
    <div class="wf-dl-row"><dt>Algorithm</dt><dd>{{ auth_algorithm }}</dd></div>
    {% endif %}
  </dl>
  {% endif %}

  {% if payload_fields is defined and payload_fields %}
  <div class="wf-panel-head wf-dim"><span class="wf-panel-title">PAYLOAD SCHEMA</span></div>
  <table class="wf-table">
    <thead>
      <tr>
        <th>NAME</th>
        <th>TYPE</th>
        <th>REQUIRED</th>
      </tr>
    </thead>
    <tbody>
      {% for field in payload_fields %}
      <tr>
        <td class="strong"><code>{{ field.name }}</code></td>
        <td><code>{{ field.type }}</code></td>
        <td>
          {% if field.required %}
            <span class="wf-tag warn">REQUIRED</span>
          {% else %}
            <span class="muted">optional</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% endif %}

  {% set has_trigger_rules = (trigger_filter_rows and trigger_filter_rows | length > 0)
    or (trigger_window_rows and trigger_window_rows | length > 0)
    or trigger_cooldown
    or trigger_rate_max %}
  {% if has_trigger_rules %}
  <div class="wf-panel-head wf-dim"><span class="wf-panel-title">TRIGGER RULES</span></div>
  {% if trigger_cooldown or trigger_rate_max %}
  <dl class="wf-dl flush">
    {% if trigger_cooldown %}
    <div class="wf-dl-row"><dt>Cooldown</dt><dd>{{ trigger_cooldown }}</dd></div>
    {% endif %}
    {% if trigger_rate_max %}
    <div class="wf-dl-row"><dt>Rate limit</dt><dd>{{ trigger_rate_max }} per {{ trigger_rate_window }}</dd></div>
    {% endif %}
  </dl>
  {% endif %}
  {% if trigger_filter_rows and trigger_filter_rows | length > 0 %}
  <table class="wf-table">
    <thead><tr><th>FIELD</th><th>OPERATOR</th><th>VALUE</th></tr></thead>
    <tbody>
      {% for row in trigger_filter_rows %}
      <tr>
        <td class="strong"><code>{{ row.field }}</code></td>
        <td><span class="wf-tag info">{{ row.operator }}</span></td>
        <td>{{ row.value if row.value else "—" }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% endif %}
  {% if trigger_window_rows and trigger_window_rows | length > 0 %}
  <table class="wf-table">
    <thead><tr><th>DAYS</th><th>START</th><th>END</th></tr></thead>
    <tbody>
      {% for row in trigger_window_rows %}
      <tr>
        <td>{{ row.days }}</td>
        <td><code>{{ row.start_time }}</code></td>
        <td><code>{{ row.end_time }}</code></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% endif %}
  {% endif %}

  {% if hook_rate_limit_max_per_minute is defined and hook_rate_limit_max_per_minute %}
  <div class="wf-panel-head wf-dim"><span class="wf-panel-title">RATE LIMIT</span></div>
  <dl class="wf-dl flush">
    <div class="wf-dl-row">
      <dt>Max per minute</dt>
      <dd>{{ hook_rate_limit_max_per_minute }}</dd>
    </div>
  </dl>
  {% endif %}
</div>

{# ── Right: activity ── #}
<div class="wf-panel wf-p-0 wf-grow">
  <div class="wf-tabs" id="activity-tabs">
    <button class="is-active" onclick="switchActivityTab('executions', this)">Executions</button>
    <button onclick="switchActivityTab('attempts', this)">Trigger Attempts</button>
  </div>

  <div id="activity-tab-executions" class="wf-f wf-col wf-grow wf-min-w-0"
       hx-get="/hooks/{{ slug }}/executions?page=1"
       hx-trigger="load"
       hx-swap="innerHTML">
  </div>

  <div id="activity-tab-attempts" class="wf-col wf-grow wf-min-w-0 wf-hidden"
       hx-get="/hooks/{{ slug }}/attempts"
       hx-trigger="revealed"
       hx-swap="innerHTML">
  </div>
</div>

</div>

<script>
function switchActivityTab(tab, el) {
  var tabs = document.querySelectorAll('#activity-tabs button');
  for (var i = 0; i < tabs.length; i++) tabs[i].classList.remove('is-active');
  el.classList.add('is-active');

  var exec = document.getElementById('activity-tab-executions');
  var att = document.getElementById('activity-tab-attempts');
  if (tab === 'executions') {
    exec.classList.remove('wf-hidden');
    exec.classList.add('wf-f');
    att.classList.add('wf-hidden');
    att.classList.remove('wf-f');
  } else {
    exec.classList.add('wf-hidden');
    exec.classList.remove('wf-f');
    att.classList.remove('wf-hidden');
    att.classList.add('wf-f');
  }
}
</script>
{% endblock %}