{#
  Overview.

  What an operator wants on opening the panel, in order: is anything broken,
  is anything happening right now, what is deployed, and what just finished.
  Everything else is one click away and does not belong here.
#}
{% extends "base.html" %}
{% import "_macros.html" as m %}

{% block title %}Overview{% endblock %}

{% block content %}

{{ m.page_head("Overview", machine.hostname) }}

{#
  Attention first. When nothing is wrong this section is absent entirely,
  rather than showing a green "all systems operational" panel that trains
  people to ignore the top of the page.
#}
{% if attention %}
  <section style="margin-bottom: var(--space-6)">
    <h2 class="label" style="margin-bottom: var(--space-2)">Needs attention</h2>
    <div class="rows">
      {% for item in attention %}
        {% call m.row(item.domain, item.state, item.meta, item.href, "row-" ~ item.id,
                      none, item.state_text) %}
          <a class="btn btn--sm" href="{{ item.href }}">Open</a>
        {% endcall %}
      {% endfor %}
    </div>
  </section>
{% endif %}

{# In flight, and only when there is something in flight: an empty "running"
   panel on every page load is furniture. #}
{% if running %}
  <section style="margin-bottom: var(--space-6)">
    <h2 class="label" style="margin-bottom: var(--space-2)">Working now</h2>
    <div class="rows">
      {% for job in running %}
        {% call m.row(job.name, job.state,
                      [("step", job.current_step), ("progress", job.progress ~ "/" ~ job.total_steps),
                       ("started", job.started)], "/activity", "row-" ~ job.id,
                      none, job.status) %}
          {{ m.follow_button("Logs", job.name, job.log_url) }}
        {% endcall %}
      {% endfor %}
    </div>
  </section>
{% endif %}

<section style="margin-bottom: var(--space-6)">
  <h2 class="label" style="margin-bottom: var(--space-2)">Applications</h2>

  {% if apps %}
    <div class="rows">
      {% for app in apps %}
        {% call m.row(app.domain, app.state, app.meta, app.href, "row-" ~ app.id,
                      none, app.state_text) %}
          {{ m.follow_button("Logs", app.domain, app.log_url) }}
          {{ m.action_button("Restart", app.restart_endpoint) }}
        {% endcall %}
      {% endfor %}
    </div>
  {% else %}
    {{ m.empty(
        "No applications yet",
        "Deploy one from a Git repository, an archive or a local directory.",
        command="wasm create -d example.com -s https://github.com/you/app") }}
  {% endif %}
</section>

<section>
  <h2 class="label" style="margin-bottom: var(--space-2)">Recent activity</h2>

  {% if activity %}
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Finished</th>
          <th scope="col">Action</th>
          <th scope="col">Resource</th>
          <th scope="col">Result</th>
        </tr>
      </thead>
      <tbody>
        {% for entry in activity %}
          <tr>
            <td class="mono">{{ entry.finished }}</td>
            <td><a href="/activity">{{ entry.name }}</a></td>
            <td class="mono">{{ entry.resource }}</td>
            <td>{{ m.badge(entry.state, entry.status) }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <p class="muted">Nothing has happened on this machine yet.</p>
  {% endif %}
</section>

{% endblock %}