{% extends "base.html" %}
{% block title %}Dashboards{% endblock %}
{% block content %}
{% from '_limit.html' import limit, paused, locked %}
<div class="hdr"><div><h1>Dashboards</h1><p class="sub" style="margin:0">Build any number of boards from {{ types|length }} tile types: drag, resize, live data. The default board is what your team sees first. {{ rows|length }}/{{ plan.dashboards if plan.dashboards < 999 else '∞' }} used.</p></div>
  {% if user.can_edit %}<button class="btn primary" onclick="document.getElementById('newd').hidden=!document.getElementById('newd').hidden">+ New dashboard</button>{% endif %}</div>
<div id="newd" class="panel" hidden style="margin-bottom:18px"><form method="post" action="/app/dashboards" class="grid g3" style="align-items:end"><input type="hidden" name="csrf" value="{{ csrf }}">
  <div class="row" style="margin:0"><label>Name</label><input type="text" name="name" placeholder="NOC wall · Client Acme · SRE on-call" required></div>
  <div class="row" style="margin:0"><label>Start from</label><select name="template" id="tpl" onchange="document.getElementById('copyrow').hidden=this.value!=='copy';document.getElementById('jsonrow').hidden=this.value!=='json'"><option value="blank">Blank</option><option value="overview">Overview template (all the basics)</option><option value="copy">Copy of an existing dashboard</option><option value="json">Import JSON</option></select></div>
  <div class="row" style="margin:0" id="copyrow" hidden><label>Copy</label><select name="copy_from">{% for d in rows %}<option value="{{ d.id }}">{{ d.name }}</option>{% endfor %}</select></div>
  <div class="row" style="margin:0;grid-column:1/-1" id="jsonrow" hidden><label>Dashboard JSON</label><textarea name="json" rows="5" class="mono" placeholder='{"name": "...", "tiles": [...]}'></textarea></div>
  <div><button class="btn primary">Create</button></div></form></div>
<div class="grid g3" style="grid-template-columns:repeat(auto-fill,minmax(300px,1fr))">
{{ limit(rows|length, plan.dashboards, 'dashboards') }}
{% for d in rows %}
<div class="panel" style="display:flex;flex-direction:column;gap:8px{% if d.paused_by_plan %};opacity:.6{% endif %}">
  <div class="hdr" style="margin:0"><div><b style="font-size:16px"><a href="/app/dashboards/{{ d.id }}">{{ d.name }}</a></b>{% if d.is_default %} <span class="pill brand">default</span>{% endif %} {{ paused(d.paused_by_plan, 'dashboards') }}<div class="small muted">{{ d.description or '' }}</div></div></div>
  <div class="xs dim">{{ (d.tiles or [])|length }} tiles · refresh {{ d.refresh_seconds }} s · updated {{ d.updated_at|timeago }}{% if d.created_by %} · by {{ d.created_by }}{% endif %}</div>
  <div class="actions" style="margin-top:auto"><a class="btn primary sm" href="/app/dashboards/{{ d.id }}">Open</a><a class="btn sm" href="/app/dashboards/{{ d.id }}?present=1" title="Full-screen wall board">Present</a>{% if user.can_edit %}<a class="btn sm" href="/app/dashboards/{{ d.id }}?edit=1">Edit</a>{% if not d.is_default %}<form method="post" action="/app/dashboards/{{ d.id }}/default" class="inline"><input type="hidden" name="csrf" value="{{ csrf }}"><button class="btn sm ghost">Make default</button></form><form method="post" action="/app/dashboards/{{ d.id }}/delete" class="inline" onsubmit="return confirm('Delete this dashboard?')"><input type="hidden" name="csrf" value="{{ csrf }}"><button class="btn sm ghost danger">Delete</button></form>{% endif %}{% endif %}<a class="btn sm ghost" href="/app/dashboards/{{ d.id }}/export.json">JSON</a></div>
</div>
{% endfor %}
</div>
{% endblock %}