{% extends "base.html" %}
{% block title %}{{ d.name }}{% endblock %}
{% block head %}<link rel="stylesheet" href="/static/dashboard.css?v=1">{% endblock %}
{% block content %}
<div class="dhead">
  <div class="dhead-l">
    <select id="dswitch" class="dswitch" aria-label="Switch dashboard">{% for o in others %}<option value="{{ o.id }}"{% if o.id == d.id %} selected{% endif %}>{{ o.name }}{% if o.is_default %} ★{% endif %}</option>{% endfor %}</select>
    <div style="min-width:0"><h1>{{ d.name }}{% if editing %} <span class="pill brand" style="vertical-align:middle">editing</span>{% endif %}</h1>{% if d.description %}<div class="small muted">{{ d.description }}</div>{% endif %}</div>
  </div>
  <div class="actions">
    <span id="drefresh" class="drefresh" title="Refreshes every {{ d.refresh_seconds }} s · click to refresh now">Loading…</span>
    {% if editing %}
    <span id="dstatus" class="dstatus">Saved</span>
    <button class="btn sm primary" type="button" id="dadd-btn">+ Add tile</button>
    <button class="btn sm" type="button" id="dsave-btn" title="Ctrl/Cmd+S">Save</button>
    <a class="btn sm" id="ddone-btn" href="/app/dashboards/{{ d.id }}">Done editing</a>
    {% elif user.can_edit %}
    <a class="btn sm primary" href="/app/dashboards/{{ d.id }}?edit=1">Edit</a>
    {% endif %}
    <a class="btn sm" href="/app/dashboards/{{ d.id }}?present=1" title="Full-screen wall board">Present</a>
    <a class="btn sm ghost" href="/app/dashboards/{{ d.id }}/export.json" title="Export as JSON">JSON</a>
    {% if user.can_edit %}<button class="btn sm ghost" type="button" id="dsettings-btn">Settings</button>{% endif %}
  </div>
</div>
{% if user.can_edit %}
<div id="dsettings" class="panel dsettings" hidden>
  <form method="post" action="/app/dashboards/{{ d.id }}/rename" class="dsettings-form">
    <input type="hidden" name="csrf" value="{{ csrf }}">
    <div><label for="ds-name">Name</label><input id="ds-name" type="text" name="name" value="{{ d.name }}" required maxlength="120"></div>
    <div><label for="ds-desc">Description</label><input id="ds-desc" type="text" name="description" value="{{ d.description or '' }}" maxlength="300" placeholder="What this board is for"></div>
    <div><label for="ds-ref">Refresh (seconds)</label><input id="ds-ref" type="number" name="refresh_seconds" value="{{ d.refresh_seconds }}" min="10" max="3600"></div>
    <div><button class="btn primary sm" type="submit">Save settings</button></div>
  </form>
</div>
{% endif %}
<div id="dgrid" class="dgrid{% if editing %} editing{% endif %}">
{% for t in d.tiles %}<div class="dtile" data-id="{{ t.id }}" style="grid-column:{{ t.x + 1 }} / span {{ t.w }};grid-row:{{ t.y + 1 }} / span {{ t.h }};order:{{ t.y * 12 + t.x }};--h:{{ t.h }}"><div class="dtile-h"><span class="ttl">{{ t.title }}</span></div><div class="dtile-b" id="tile-body-{{ t.id }}"><div class="tile-empty">Loading…</div></div></div>
{% else %}<div class="dempty">{% if editing %}No tiles yet. Click "Add tile" to start building.{% else %}This dashboard has no tiles yet.{% endif %}</div>{% endfor %}
</div>
{% if editing %}
<p class="xs dim" style="margin-top:14px">Drag a tile by its header to move it, pull the bottom-right corner to resize. Keyboard: arrows move a focused tile, Shift+arrows resize, Delete removes, Enter configures, Ctrl/Cmd+Z undoes. Changes autosave.</p>
<div id="dadd" class="dadd" role="dialog" aria-label="Add a tile">
  <div class="box">
    <h2>Add a tile <button class="btn sm ghost" type="button" data-close>Close</button></h2>
    <p class="sub" style="margin-bottom:14px">{{ types|length }} tile types. New tiles land in the first free spot; drag them where you want.</p>
    <div class="types"></div>
  </div>
</div>
<aside id="ddrawer" class="ddrawer" aria-label="Configure tile">
  <div class="dd-h"><h3>Configure · <span id="ddrawer-type"></span></h3><button class="btn sm ghost" type="button" data-close>✕</button></div>
  <div class="dd-b">
    <form id="ddrawer-form" autocomplete="off"></form>
    <div class="dpv-l">Live preview</div>
    <div id="dpreview" class="dpv"><div class="tile-empty">Loading…</div></div>
  </div>
  <div class="dd-f"><button class="btn sm ghost" type="button" data-close>Cancel</button><button class="btn sm primary" type="button" id="ddrawer-apply">Apply</button></div>
</aside>
{% endif %}
{% endblock %}
{% block scripts %}
<script>
window.VIGIL_DASH = {
  id: {{ d.id }},
  editing: {{ 'true' if editing else 'false' }},
  present: false,
  refresh: {{ d.refresh_seconds or 60 }},
  csrf: {{ csrf|tojson }},
  tiles: {{ tiles_json|replace('<', '\\u003c')|safe }},
  catalogue: {{ catalogue_json|replace('<', '\\u003c')|safe }},
  pickers: {{ pickers_json|replace('<', '\\u003c')|safe }}
};
</script>
<script src="/static/dashboard.js?v=1"></script>
{% endblock %}