{% extends "monitor/base.html" %}
{% load hb %}
{% block title %}{{ check.name }}{% endblock %}
{% block content %}
<p class="crumbs"><a href="{% url 'dashboard' project.slug %}">&larr; {{ project.name }}</a></p>
<div class="page-head">
  <h1>{{ check.name }} <span class="pill {{ check.status }}">{{ check.status }}</span></h1>
  <div class="actions">
    <a class="btn" href="{% url 'check_edit' project.slug check.uuid %}">Edit</a>
    <form method="post" action="{% url 'check_action' project.slug check.uuid 'pause' %}" class="inline">{% csrf_token %}
    {% if check.status == 'paused' %}
      <button class="btn" formaction="{% url 'check_action' project.slug check.uuid 'resume' %}">Resume</button>
    {% else %}<button class="btn">Pause</button>{% endif %}</form>
    <form method="post" action="{% url 'check_action' project.slug check.uuid 'delete' %}" class="inline" onsubmit="return confirm('Delete this check and all its history?')">{% csrf_token %}<button class="btn danger">Delete</button></form>
  </div>
</div>
{% if check.description %}<p class="muted">{{ check.description }}</p>{% endif %}

<div class="grid">
  <section class="card">
    <h2>Schedule</h2>
    <p class="big">{{ check.describe_schedule }}</p>
    <p class="muted">
      {% if check.schedule_kind == 'cron' %}<code>{{ check.cron_expr }}</code> in {{ check.timezone }}{% else %}Period {{ check.period_seconds }}s{% endif %}
      &middot; grace {{ check.grace_seconds }}s</p>
    <p>Last ping: <b>{{ check.last_ping|ago }}</b>{% if check.last_start and check.status != 'down' %} &middot; running since {{ check.last_start|ago }}{% endif %}<br>
       Next expected: <b>{% if check.status == 'paused' %}-{% else %}{{ check.next_expected|until }}{% endif %}</b></p>
    <h3>Next 5 fire times</h3>
    <ol class="plain">{% for t in upcoming %}<li>{{ t|date:"D Y-m-d H:i" }} UTC</li>{% endfor %}</ol>
  </section>
  <section class="card">
    <h2>Stats</h2>
    <dl class="stats">
      <div><dt>Uptime 24h</dt><dd>{{ stats.uptime.24h|pct }}</dd></div>
      <div><dt>Uptime 7d</dt><dd>{{ stats.uptime.7d|pct }}</dd></div>
      <div><dt>Uptime 30d</dt><dd>{{ stats.uptime.30d|pct }}</dd></div>
      <div><dt>Duration p50</dt><dd>{{ stats.p50|duration }}</dd></div>
      <div><dt>Duration p95</dt><dd>{{ stats.p95|duration }}</dd></div>
      <div><dt>Flaky</dt><dd>{{ stats.flaky_score }}/100 <small class="muted">{{ stats.flaky_label }}</small></dd></div>
    </dl>
    <div class="spark-cell {{ check.status }}">{% sparkline durations 300 40 %}</div>
  </section>
  <section class="card">
    <h2>Ping URLs</h2>
    <p class="muted">Success</p><pre>curl -fsS -m 10 --retry 3 {{ ping_url }}</pre>
    <p class="muted">By name</p><pre>{{ slug_url }}</pre>
    <p class="muted">Append <code>/start</code>, <code>/fail</code>, <code>/log</code> or <code>/&lt;exit-code&gt;</code>.</p>
    <p class="muted">Channels: {% for c in check.channels.all %}{{ c.name }}{% if not forloop.last %}, {% endif %}{% empty %}none{% endfor %}</p>
  </section>
</div>

<div class="grid two">
  <section class="card">
    <h2>Status history</h2>
    <ul class="timeline">
    {% for f in flips %}
      <li><span class="pill {{ f.new_status }}">{{ f.new_status }}</span> <span class="muted">from {{ f.old_status }}</span>
        <div>{{ f.reason }}</div><time class="muted">{{ f.at|date:"Y-m-d H:i:s" }} UTC &middot; {{ f.at|ago }}</time></li>
    {% empty %}<li class="muted">No status changes yet.</li>{% endfor %}
    </ul>
  </section>
  <section class="card">
    <h2>Ping log</h2>
    <table class="log">
      <thead><tr><th>When (UTC)</th><th>Kind</th><th>Exit</th><th>Duration</th><th>Source</th></tr></thead>
      <tbody>
      {% for p in pings %}
        <tr><td>{{ p.created|date:"m-d H:i:s" }}</td><td><span class="kind {{ p.kind }}">{{ p.kind }}</span></td>
          <td>{{ p.exit_code|default_if_none:"-" }}</td><td>{{ p.duration|duration }}</td>
          <td class="muted" title="{{ p.user_agent }}">{{ p.source_ip|default:"-" }}</td></tr>
        {% if p.body %}<tr class="body"><td colspan="5"><pre>{{ p.body|truncatechars:400 }}</pre></td></tr>{% endif %}
      {% empty %}<tr><td colspan="5" class="empty">No pings yet.</td></tr>{% endfor %}
      </tbody>
    </table>
  </section>
</div>
{% endblock %}