{#
  One application.

  This is the page the list links to, and it exists to answer the questions an
  operator would otherwise open an SSH session for: what is it, what runs it,
  what is in front of it, what was it told, and what has happened to it.

  The environment section reads and writes the application's own .env file
  through the same helper the CLI's `wasm env` commands use. Its secrets are
  masked by default, revealing one is audited, and editing it never restarts
  the application on its own: a database password is not something this
  screen changes as a side effect of the operator glancing at it.
#}
{% extends "base.html" %}
{% import "_macros.html" as m %}

{% block title %}{{ domain }}{% endblock %}

{% block content %}

{% call m.page_head(domain, status) %}
  {{ m.follow_button("Logs", domain, log_url) }}
  {{ m.action_button("Restart", restart_endpoint, none, "Restarted " ~ domain) }}
  {{ m.action_button("Stop", stop_endpoint,
                     "Stop " ~ domain ~ "? The site stops answering until it is started again.",
                     "Stopped " ~ domain) }}
  {{ m.action_button("Start", start_endpoint, none, "Started " ~ domain) }}
  {# No rows on this screen: the button targets itself and swaps nothing. The
     deletion is a job, and the job is reported by the feed and the activity
     screen. #}
  {{ m.danger_button("Delete", delete_endpoint, domain, delete_consequence, none, "this") }}
{% endcall %}

<section class="stack--tight">
  <h2 class="stack__title">Application</h2>
  <p class="stack__lead">{{ m.badge(state, status) }}</p>
  {{ m.facts(facts) }}
</section>

{#
  The unit's own vital signs, loaded over htmx like the webhook and history
  sections below so the fragment lives entirely in views/app_charts.py.
  Reading the deployment history for the marks is store work the first paint
  should not wait on. The placeholder is the charts' own silhouette.
#}
<section class="stack--tight">
  <h2 class="stack__title">Resources</h2>
  <div id="app-charts-section"
       hx-get="/apps/{{ domain }}/charts"
       hx-trigger="load" hx-swap="outerHTML">
    <span class="visually-hidden">Reading resource history…</span>
    <div class="charts" aria-hidden="true">
      <div class="skeleton skeleton--chart"></div>
      <div class="skeleton skeleton--chart"></div>
    </div>
  </div>
</section>

<section class="stack--tight">
  <h2 class="stack__title">Certificate</h2>
  {{ m.facts(certificate) }}
  <p class="faint stack__note">
    Issuing and renewal live on the <a href="/certificates">certificates</a> screen.
  </p>
</section>

<section class="stack--tight">
  <h2 class="stack__title">Service</h2>
  {% if service %}
    {{ m.facts(service) }}
  {% else %}
    <p class="muted">No systemd unit is recorded for this application.</p>
  {% endif %}
</section>

<section class="stack--tight">
  <h2 class="stack__title">Site</h2>
  {% if site %}
    {{ m.facts(site) }}
  {% else %}
    <p class="muted">No web server configuration is recorded for this application.</p>
  {% endif %}
</section>

<section class="stack--tight">
  <h2 class="stack__title">Environment</h2>
  {% include "fragments/app_env.html" %}
</section>

{#
  The webhook, deployment history and rollback sections load over htmx rather
  than rendering inline, so they live entirely in views/deploy_form.py and
  views/deployments.py and this page's handler does not have to know they
  exist. Listing rollback points also walks the backup directory, which is
  work the first paint should not wait on.
#}
<section class="stack--tight">
  <h2 class="stack__title">Git webhook</h2>
  <div id="webhook-section"
       hx-get="/apps/{{ domain }}/webhook/section"
       hx-trigger="load" hx-swap="outerHTML">
    <span class="visually-hidden">Reading webhook state…</span>
    <div class="skeleton skeleton--row" aria-hidden="true"></div>
  </div>
</section>


<section class="stack--tight">
  <h2 class="stack__title">Deployments</h2>
  <div id="deploy-history-section"
       hx-get="/apps/{{ domain }}/deployments/recent"
       hx-trigger="load" hx-swap="outerHTML">
    <span class="visually-hidden">Reading deployment history…</span>
    <div class="skeleton skeleton--row" aria-hidden="true"></div>
    <div class="skeleton skeleton--row" aria-hidden="true"></div>
  </div>
</section>

<section class="stack--tight">
  <h2 class="stack__title">Rollback</h2>
  <div id="deploy-rollback-section"
       hx-get="/apps/{{ domain }}/rollback/section"
       hx-trigger="load" hx-swap="outerHTML">
    <span class="visually-hidden">Reading rollback points…</span>
    <div class="skeleton skeleton--row" aria-hidden="true"></div>
  </div>
</section>

<section>
  <h2 class="stack__title">Recent jobs</h2>
  {% if jobs %}
    <div class="rows">
      {% for job in jobs %}
        {% call m.row(job.name, job.state,
                      [("result", job.status), ("finished", job.finished)],
                      "/activity", "row-" ~ job.id) %}
          <a class="btn btn--sm" href="/activity">Open</a>
        {% endcall %}
      {% endfor %}
    </div>
  {% else %}
    <p class="muted">Nothing has run against this application since the panel started.</p>
  {% endif %}
</section>

{% endblock %}