FabledSteward/steward/templates/dashboard/_edit_panels.html

{# dashboard/_edit_panels.html — returned by all mutation routes and included by edit.html #}
<div id="edit-panels" style="display:grid;grid-template-columns:1fr 340px;gap:1.5rem;align-items:start;">

  {# ── Current layout (drag to move, drag the corner/edge to resize) ──────── #}
  <div style="min-width:0;">
    <div style="display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:0.75rem;">
      <div class="section-title" style="margin-bottom:0;">Current Layout</div>
      {% if widgets %}
      <span style="font-size:0.75rem;color:var(--text-dim);">Drag to move · drag a corner to resize · saved automatically</span>
      {% endif %}
    </div>
    {% if widgets %}
    <div class="grid-stack" data-dash-id="{{ dashboard.id }}">
      {% for item in widgets %}
      <div class="grid-stack-item" gs-id="{{ item.db.id }}"
           gs-x="{{ item.db.grid_x }}" gs-y="{{ item.db.grid_y }}"
           gs-w="{{ item.db.grid_w }}" gs-h="{{ item.db.grid_h }}">
        <div class="grid-stack-item-content edit-panel">
          <div class="panel-drag" title="Drag to move">
            <span style="color:var(--text-muted);">⠿</span>
            <span style="flex:1;min-width:0;font-weight:600;font-size:0.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
                  title="{{ item.title }}">{{ item.title }}</span>
            <button hx-post="/d/{{ dashboard.id }}/edit/remove/{{ item.db.id }}"
                    hx-target="#edit-panels" hx-swap="outerHTML"
                    class="btn btn-danger btn-sm" style="flex-shrink:0;">Remove</button>
          </div>
          <div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.35rem;overflow:hidden;">{{ item.defn.description }}</div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="card" style="color:var(--text-muted);text-align:center;padding:2rem;font-size:0.9rem;">
      No widgets yet. Add one from the right to begin.
    </div>
    {% endif %}
  </div>

  {# ── Available widgets ────────────────────────────────────────────────── #}
  <div>
    <div class="section-title" style="margin-bottom:0.75rem;">Available Widgets</div>
    {% if addable %}
    {% set _groups = [("core", "Core monitors"), ("capability", "Monitoring capabilities"), ("integration", "Integrations")] %}
    {% for _gkey, _glabel in _groups %}
    {% set _gw = addable | selectattr("group", "equalto", _gkey) | list %}
    {% if _gw %}
    <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-dim);margin:0.85rem 0 0.35rem;">{{ _glabel }}</div>
    <div style="display:grid;gap:0.5rem;">
      {% for w in _gw %}
      <div class="card" style="margin-bottom:0;padding:0;overflow:hidden;">
        <details>
          <summary style="display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
                          padding:0.85rem 1rem;cursor:pointer;list-style:none;user-select:none;">
            <div style="flex:1;min-width:0;">
              <div style="font-weight:600;font-size:0.875rem;">{{ w.label }}</div>
              <div style="font-size:0.77rem;color:var(--text-muted);margin-top:0.1rem;">{{ w.description }}</div>
            </div>
            <span class="btn btn-sm" style="flex-shrink:0;pointer-events:none;">Add ▾</span>
          </summary>

          <form method="post"
                action="/d/{{ dashboard.id }}/edit/add/{{ w.key }}"
                hx-post="/d/{{ dashboard.id }}/edit/add/{{ w.key }}"
                hx-target="#edit-panels"
                hx-swap="outerHTML"
                style="padding:0.75rem 1rem;padding-top:0;border-top:1px solid var(--border);">
            <div style="display:grid;gap:0.5rem;padding-top:0.75rem;">

              <div>
                <label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">
                  Widget title <span style="color:var(--text-dim);">(optional)</span>
                </label>
                <input type="text" name="title" placeholder="{{ w.label }}"
                       style="width:100%;padding:0.32rem 0.6rem;background:var(--bg);
                              border:1px solid var(--border-mid);border-radius:4px;
                              color:var(--text);font-size:0.85rem;">
              </div>

              {% for p in w.params %}
              <div>
                <label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;">
                  {{ p.label }}
                </label>
                {% if p.type == "select" %}
                <select name="param_{{ p.key }}"
                        style="width:100%;padding:0.32rem 0.6rem;background:var(--bg);
                               border:1px solid var(--border-mid);border-radius:4px;
                               color:var(--text);font-size:0.85rem;">
                  {% for opt in p.options %}
                  <option value="{{ opt.value }}" {% if opt.value == p.default %}selected{% endif %}>
                    {{ opt.label }}
                  </option>
                  {% endfor %}
                </select>
                {% elif p.type == "host" %}
                <select name="param_{{ p.key }}" required
                        style="width:100%;padding:0.32rem 0.6rem;background:var(--bg);
                               border:1px solid var(--border-mid);border-radius:4px;
                               color:var(--text);font-size:0.85rem;">
                  <option value="">— select a host —</option>
                  {% for h in hosts %}
                  <option value="{{ h.id }}">{{ h.name }}</option>
                  {% endfor %}
                </select>
                {% endif %}
              </div>
              {% endfor %}

              <button type="submit" class="btn btn-sm" style="width:100%;margin-top:0.1rem;">
                Add to Dashboard
              </button>
            </div>
          </form>
        </details>
      </div>
      {% endfor %}
    </div>
    {% endif %}
    {% endfor %}
    {% else %}
    <div style="color:var(--text-muted);font-size:0.85rem;padding:1rem 0;">
      No plugin widgets available. Enable plugins in Settings → Plugins.
    </div>
    {% endif %}
  </div>

</div>