{% macro panel(base, hooks, csrf, what) %}
<section class="panel" id="webhooks">
  <h2>Webhooks</h2>
  <p class="small mute">{{ what }}</p>
  {% if hooks.is_empty() %}<p class="mute small">None.</p>{% else %}
  <ul class="hooks">
  {% for r in hooks %}
  <li class="hook">
    <div class="hook-head">
      <code class="hook-url" title="The path is shortened: webhook URLs often carry a secret token">{{ r.masked }}</code>
      <span class="tag">{{ r.hook.format }}</span>
      {% if r.hook.active %}<span class="tag head">active</span>{% else %}<span class="tag dim">disabled</span>{% endif %}
    </div>
    <p class="small mute">events <code>{{ r.hook.events }}</code> ·
      {% if let Some((ok, text)) = r.last_result() %}last delivery {% if ok %}<span class="sig sig-valid">✔</span>{% else %}<span class="sig sig-invalid">✘</span>{% endif %} {{ text }}{% else %}nothing delivered yet{% endif %}
      · <a href="{{ base }}/hooks/{{ r.hook.id }}/deliveries">deliveries</a></p>
    <form class="tiny" method="post" action="{{ base }}/hooks"><input type="hidden" name="_csrf" value="{{ csrf }}"><input type="hidden" name="id" value="{{ r.hook.id }}"><button name="action" value="ping">ping</button> <button name="action" value="toggle">{% if r.hook.active %}disable{% else %}enable{% endif %}</button> <button name="action" value="delete" onclick="return confirm('Delete this webhook?')">delete</button></form>
    <details class="hook-edit"><summary class="small">edit</summary>
      <form class="card" method="post" action="{{ base }}/hooks">
        <input type="hidden" name="_csrf" value="{{ csrf }}"><input type="hidden" name="id" value="{{ r.hook.id }}"><input type="hidden" name="action" value="update">
        <label for="hu{{ r.hook.id }}">URL</label><input type="text" id="hu{{ r.hook.id }}" name="url" placeholder="{{ r.masked }}" autocomplete="off">
        <p class="small mute">Leave empty to keep the current URL.</p>
        <label for="hs{{ r.hook.id }}">Secret</label><input type="text" id="hs{{ r.hook.id }}" name="secret" placeholder="unchanged" autocomplete="off">
        <label for="he{{ r.hook.id }}">Events</label><input type="text" id="he{{ r.hook.id }}" name="events" value="{{ r.hook.events }}">
        <label for="hf{{ r.hook.id }}">Format</label>
        <select id="hf{{ r.hook.id }}" name="format">
          <option value="oxygenhub"{% if r.hook.format == "oxygenhub" %} selected{% endif %}>OxygenHub (signed JSON envelope)</option>
          <option value="discord"{% if r.hook.format == "discord" %} selected{% endif %}>Discord</option>
          <option value="slack"{% if r.hook.format == "slack" %} selected{% endif %}>Slack</option>
        </select>
        <div class="choice"><label><input type="checkbox" name="active" value="1"{% if r.hook.active %} checked{% endif %}> active</label></div>
        <button type="submit">SAVE</button>
      </form>
    </details>
  </li>
  {% endfor %}
  </ul>{% endif %}
  <form class="card" method="post" action="{{ base }}/hooks">
    <input type="hidden" name="_csrf" value="{{ csrf }}">
    <h3>Add a webhook</h3>
    <label for="hurl">URL</label><input type="text" id="hurl" name="url" placeholder="https://…" required autocomplete="off">
    <label for="hformat">Format</label>
    <select id="hformat" name="format">
      <option value="">From the URL (Discord and Slack are recognised)</option>
      <option value="oxygenhub">OxygenHub (signed JSON envelope)</option>
      <option value="discord">Discord</option>
      <option value="slack">Slack</option>
    </select>
    <label for="hsecret">Secret (signs each delivery)</label><input type="text" id="hsecret" name="secret" autocomplete="off">
    <label for="hevents">Events (<code>*</code>, or a list such as <code>push,proposal,issue</code>)</label><input type="text" id="hevents" name="events" value="*">
    <button type="submit">ADD WEBHOOK</button>
  </form>
</section>
{% endmacro %}