{% 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 gap-2 flex-wrap">
        <div class="fw-semibold">{{ w.title }}</div>
        <div class="d-flex align-items-center gap-2">
          {% if w.widget_type != 'table' %}
          <select class="form-select form-select-sm" data-range-widget="{{ w.id }}" style="width:auto">
            <option value="1m">1m</option>
            <option value="10m">10m</option>
            <option value="1h" selected>1h</option>
            <option value="3h">3h</option>
            <option value="10h">10h</option>
          </select>
          {% endif %}
          <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>
      <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 %}