{% extends "relay/base.html" %}
{% block title %}Event #{{ event.pk }}{% endblock %}
{% block content %}
<p class="crumb"><a href="{% url 'endpoint_detail' endpoint.pk %}">&larr; {{ endpoint.name }}</a></p>
<div class="page-head">
  <div><h1><span class="method">{{ event.method }}</span> <code>{{ event.path|default:"/" }}</code>{% if event.query %}<code class="muted">?{{ event.query }}</code>{% endif %}</h1>
  <p class="muted">Event #{{ event.pk }} &middot; {{ event.received_at|date:"Y-m-d H:i:s" }} UTC &middot; from {{ event.source_ip|default:"unknown" }} &middot; {{ event.size }} bytes{% if event.parent %} &middot; edited copy of <a href="{% url 'event_detail' event.parent.pk %}">#{{ event.parent.pk }}</a>{% endif %}</p></div>
  <div class="actions"><button class="btn" data-open="replay-dialog">Replay</button><button class="btn" data-open="edit-dialog">Edit &amp; resend</button>
  <button class="btn" data-copy="{{ curl }}">Copy as curl</button></div>
</div>

<div class="card sig sig-{{ event.signature_status }}">
  <span class="badge sig-{{ event.signature_status }}">signature {{ event.signature_status }}</span>
  <span>{{ event.signature_detail }}</span>
</div>

<div class="tabs" data-tabs>
  <button class="tab active" data-tab="pretty">{{ kind }} body</button>
  <button class="tab" data-tab="raw">Raw</button>
  <button class="tab" data-tab="headers">Headers ({{ event.headers|length }})</button>
  <button class="tab" data-tab="curl">curl</button>
</div>
<section data-panel="pretty"><pre class="code">{{ pretty }}</pre></section>
<section data-panel="raw" hidden><pre class="code">{{ raw }}</pre><a href="{% url 'event_raw' event.pk %}">Download raw bytes</a></section>
<section data-panel="headers" hidden>
  <table class="table"><thead><tr><th>Header</th><th>Value</th></tr></thead><tbody>
  {% for k, v in event.headers.items %}<tr><td><code>{{ k }}</code></td><td><code class="wrap">{{ v }}</code></td></tr>{% endfor %}
  </tbody></table>
</section>
<section data-panel="curl" hidden><pre class="code">{{ curl }}</pre></section>

<h2>Deliveries</h2>
{% for d in deliveries %}
<div class="card delivery">
  <div class="dhead">
    <span class="badge state-{{ d.state }}">{{ d.state }}</span>
    <strong>{{ d.destination.name|default:"One-off URL" }}</strong> <code>{{ d.target_url }}</code>
    {% if d.is_replay %}<span class="badge">replay</span>{% endif %}
    <span class="muted">{{ d.attempts }}/{{ d.max_attempts }} attempts{% if d.next_retry_at and d.state == 'pending' %} &middot; next try {{ d.next_retry_at|date:"H:i:s" }}{% endif %}</span>
  </div>
  <ol class="timeline">
    {% for a in d.attempt_log.all %}
    <li class="{% if a.response_status and a.response_status < 300 %}ok{% else %}bad{% endif %}">
      <details>
        <summary>Attempt {{ a.number }} &middot; {{ a.started_at|date:"H:i:s" }} &middot;
          {% if a.response_status %}HTTP {{ a.response_status }}{% else %}no response{% endif %} &middot; {{ a.latency_ms }} ms
          {% if a.error %}<span class="err-inline">{{ a.error|truncatechars:90 }}</span>{% endif %}</summary>
        <div class="two">
          <div><h4>Request</h4><pre class="code small">{% for k, v in a.request_headers.items %}{{ k }}: {{ v }}
{% endfor %}
{{ a.request_body_excerpt }}</pre></div>
          <div><h4>Response</h4><pre class="code small">{% for k, v in a.response_headers.items %}{{ k }}: {{ v }}
{% endfor %}
{{ a.response_body_excerpt }}{% if a.error %}{{ a.error }}{% endif %}</pre></div>
        </div>
      </details>
    </li>
    {% empty %}<li class="muted">Waiting for the delivery worker (<code>python manage.py run_deliveries</code>).</li>
    {% endfor %}
  </ol>
</div>
{% empty %}<p class="muted">No deliveries for this event (no matching destination).</p>
{% endfor %}

{% if derived %}<h2>Edited copies</h2><ul>{% for c in derived %}<li><a href="{% url 'event_detail' c.pk %}">Event #{{ c.pk }}</a> &middot; {{ c.received_at|date:"H:i:s" }}</li>{% endfor %}</ul>{% endif %}

<dialog id="replay-dialog">
  <form method="post" action="{% url 'event_replay' event.pk %}">{% csrf_token %}
    <h2>Replay event #{{ event.pk }}</h2>
    <div class="field"><label>Destination</label>
      <select name="destination"><option value="">One-off URL (below)</option>{% for d in destinations %}<option value="{{ d.pk }}">{{ d.name }}</option>{% endfor %}</select></div>
    <div class="field"><label>One-off URL</label><input name="url" placeholder="http://localhost:3000/hook"></div>
    <div class="actions"><button class="btn primary">Queue replay</button><button type="button" class="btn" data-close>Cancel</button></div>
  </form>
</dialog>
<dialog id="edit-dialog">
  <form method="post" action="{% url 'event_edit_resend' event.pk %}">{% csrf_token %}
    <h2>Edit &amp; resend</h2>
    <p class="muted">Creates a new derived event with your changes. Signature headers are not recomputed.</p>
    <div class="field"><label>Body</label><textarea name="body" rows="9" spellcheck="false">{{ raw }}</textarea></div>
    <div class="field"><label>Headers (Name: value per line)</label><textarea name="headers" rows="5" spellcheck="false">{% for k, v in event.headers.items %}{{ k }}: {{ v }}
{% endfor %}</textarea></div>
    <div class="field"><label>Destination</label>
      <select name="destination"><option value="">One-off URL (below)</option>{% for d in destinations %}<option value="{{ d.pk }}">{{ d.name }}</option>{% endfor %}</select></div>
    <div class="field"><label>One-off URL</label><input name="url" placeholder="http://localhost:3000/hook"></div>
    <div class="actions"><button class="btn primary">Create &amp; send</button><button type="button" class="btn" data-close>Cancel</button></div>
  </form>
</dialog>
{% endblock %}