{% extends "base.html" %}
{% block title %}{{ dashboard.name }} - MikroMon{% endblock %}
{% block head %}
<script>window.MIKROMON={dashboardId: {{ dashboard.id }}, publicToken: null};</script>
{% endblock %}
{% block content %}
<div class="d-flex align-items-start justify-content-between mb-3 flex-wrap gap-2">
  <div>
    <h1 class="h3 mb-0">{{ dashboard.name }}</h1>
    {% if dashboard.description %}<div class="text-muted">{{ dashboard.description }}</div>{% endif %}
  </div>
  <div class="d-flex gap-2">
    <a class="btn btn-outline-secondary" href="{{ url_for('dashboards.share', dashboard_id=dashboard.id) }}"><i class="fa-solid fa-share-nodes me-1"></i>Share</a>
    <a class="btn btn-primary" href="{{ url_for('dashboards.widget_new', dashboard_id=dashboard.id) }}"><i class="fa-solid fa-plus me-1"></i>Add widget</a>
  </div>
</div>

<div class="row g-3">
  {% for w in widgets %}
  <div class="col-12 col-lg-{{ w.col_span or 6 }}">
    <div class="card shadow-sm h-100">
      <div class="card-header bg-white d-flex align-items-center justify-content-between">
        <div class="fw-semibold">{{ w.title }}</div>
        <form method="post" action="{{ url_for('dashboards.widget_delete', dashboard_id=dashboard.id, widget_id=w.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button class="btn btn-sm btn-outline-danger" type="submit" title="Delete"><i class="fa-solid fa-trash"></i></button>
        </form>
      </div>
      <div class="card-body">
        {% if w.widget_type == 'table' %}
          <div class="table-responsive">
            <table class="table table-sm align-middle mb-0" data-table-widget="{{ w.id }}">
              <thead class="table-light"></thead>
              <tbody></tbody>
            </table>
          </div>
        {% else %}
          <div class="chart-wrap" style="height: {{ w.height_px or 260 }}px;"><canvas id="chart-{{ w.id }}"></canvas></div>
          <div class="text-muted small mt-2" id="meta-{{ w.id }}">Waiting for data…</div>
        {% endif %}
      </div>
    </div>
  </div>
  {% else %}
  <div class="col-12"><div class="alert alert-info mb-0">No widgets yet. Add the first one.</div></div>
  {% endfor %}
</div>
{% endblock %}