{% 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" data-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 %}