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

  <table class="small"><tr><th>URL</th><th>Events</th><th>Active</th><th></th></tr>

  {% for h in hooks %}<tr><td>{{ h.url }}</td><td>{{ h.events }}</td><td>{% if h.active %}yes{% else %}no{% endif %}</td>

  <td><a class="small" href="{{ base }}/hooks/{{ h.id }}/deliveries">deliveries</a>

  <form class="tiny" method="post" action="{{ base }}/hooks"><input type="hidden" name="_csrf" value="{{ csrf }}"><input type="hidden" name="id" value="{{ h.id }}"><button name="action" value="ping">ping</button> <button name="action" value="toggle">{% if h.active %}disable{% else %}enable{% endif %}</button> <button name="action" value="delete">delete</button></form></td></tr>{% endfor %}

  </table>{% endif %}

  <form class="card" method="post" action="{{ base }}/hooks">

    <input type="hidden" name="_csrf" value="{{ csrf }}">

    <label for="hurl">URL</label><input type="text" id="hurl" name="url" placeholder="https://…" required>

    <label for="hsecret">Secret (signs each delivery)</label><input type="text" id="hsecret" name="secret">

    <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 %}