{% extends "base.html" %}
{% block title %}Status pages{% endblock %}
{% block head %}
<style>
.pcard{display:flex;flex-direction:column;gap:10px}
.pcard .ph{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pcard .ph b{font-size:15px}
.pcard .meta{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.pcard .foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:6px}
</style>
{% endblock %}
{% block content %}
{% from '_limit.html' import limit, paused, locked %}
<div class="hdr"><div><h1>Status pages</h1><p class="sub" style="margin:0">Public pages with live status, 90-day uptime, incidents, subscriptions and embeds for the monitors you choose. {{ plan.name }} plan: {{ pages|length }} of {{ plan.status_pages }} page{% if plan.status_pages != 1 %}s{% endif %} used{% if plan.custom_domain %}, custom domains included{% endif %}.</p></div>
  {% if pages|length < plan.status_pages %}<div class="actions"><a class="btn primary sm" href="#create">New page</a></div>{% else %}<div class="actions"><a class="btn sm" href="/app/billing">Upgrade for more pages</a></div>{% endif %}</div>

{% if pages %}
<div class="grid g3" style="margin-bottom:24px">
  {{ limit(pages|length, plan.status_pages, 'status pages') }}
  {% for p in pages %}{% set o = overview[p.id] %}
  <div class="panel pcard"{% if p.paused_by_plan %} style="opacity:.6"{% endif %}>
    <div class="ph"><div><span class="dot {% if o.overall == 'operational' %}ok{% elif o.overall == 'degraded' %}warn{% elif o.overall == 'down' %}err{% elif o.overall == 'maintenance' %}info{% endif %}"></span><b><a href="/app/status/{{ p.id }}">{{ p.title }}</a></b> {{ paused(p.paused_by_plan, 'status pages') }}<div class="small muted" style="margin-left:16px">{{ o.label }}</div></div>
      {% if not p.is_public %}<span class="pill">hidden</span>{% elif p.password_hash %}<span class="pill brand">private</span>{% else %}<span class="pill ok">public</span>{% endif %}</div>
    <div class="mono small" style="word-break:break-all"><a href="/s/{{ p.slug }}" target="_blank">{{ base_host }}/s/{{ p.slug }}</a>{% if p.custom_domain %}<br><a href="https://{{ p.custom_domain }}" target="_blank">{{ p.custom_domain }}</a>{% endif %}</div>
    <div class="meta"><span>{{ o.monitors }} component{% if o.monitors != 1 %}s{% endif %}</span><span>{{ p.groups|length }} group{% if p.groups|length != 1 %}s{% endif %}</span><span>{{ o.subscribers }} subscriber{% if o.subscribers != 1 %}s{% endif %}</span>{% if p.hide_branding and plan.hide_branding %}<span>no branding</span>{% endif %}</div>
    <div class="foot"><a class="btn sm primary" href="/app/status/{{ p.id }}">Open</a><a class="btn sm" href="/s/{{ p.slug }}{% if p.password_hash and p.access_token %}?key={{ p.access_token }}{% endif %}" target="_blank">View public</a></div>
  </div>
  {% endfor %}
</div>
{% endif %}

<div class="grid g2" style="align-items:start" id="create">
<div class="panel">
  <h2>Create a page</h2>
  {% if pages|length >= plan.status_pages %}<div class="callout" style="margin-bottom:12px">Your {{ plan.name }} plan allows {{ plan.status_pages }} status page{% if plan.status_pages != 1 %}s{% endif %}. <a href="/app/billing">Upgrade</a> for more.</div>{% endif %}
  <form method="post" action="/app/status">
    <input type="hidden" name="csrf" value="{{ csrf }}">
    <div class="row"><label>Title</label><input type="text" name="title" placeholder="Acme Cloud status" required></div>
    <div class="row"><label>URL slug</label><input type="text" name="slug" placeholder="acme" pattern="[a-z0-9-]{3,50}" required><div class="help">Page will live at {{ base_host }}/s/<b>slug</b>. You can add a custom domain, password, logo, groups and custom CSS after creating it.</div></div>
    <div class="row"><label>Monitors to show</label>{% if monitors %}<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 12px">{% for m in monitors %}<label style="font-weight:500;display:flex;gap:8px;align-items:center;margin:0;padding:3px 0"><input type="checkbox" name="monitor_ids" value="{{ m.id }}" style="width:auto"> {{ m.name }} <span class="pill">{{ m.mode }}</span></label>{% endfor %}</div>{% else %}<div class="help">Create some <a href="/app/monitors/new">monitors</a> first.</div>{% endif %}</div>
    <button class="btn primary" {% if not user.can_edit %}disabled{% endif %}>Create status page</button>
  </form>
</div>
<div>
  <div class="panel" style="margin-bottom:16px">
    <h3>What a status page includes</h3>
    <dl class="kv">
      <dt>Components</dt><dd>Grouped monitors with live state, 90-day uptime bars and response times</dd>
      <dt>Incidents</dt><dd>Automatic outages plus manual incidents and maintenance with update timelines and postmortems</dd>
      <dt>Subscriptions</dt><dd>Slack, Discord and webhook subscribers, Atom feed</dd>
      <dt>Embeds</dt><dd>Status badges per page and per component, a floating website widget, JSON API</dd>
      <dt>Private pages</dt><dd>Password or private link{% if not plan.private_pages %} <span class="pill brand">Pro</span>{% endif %}</dd>
      <dt>Branding</dt><dd>Logo, custom CSS, custom domain{% if not plan.custom_domain %} <span class="pill brand">Pro</span>{% endif %}</dd>
    </dl>
  </div>
  <div class="callout">Maintenance windows created under <a href="/app/maintenance">Maintenance</a> appear on every page that lists the affected monitors, and switch those components to "Maintenance" while active.</div>
</div>
</div>
{% endblock %}