{% extends "base.html" %}
{% block title %}Monitor Groups - DevPlace{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-6">
  <div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-bold">Monitor Groups</h1>
    <button class="btn btn-primary" onclick="alert('Group creation form coming soon')">+ New Group</button>
  </div>

  {% if groups %}
    {% for group in groups %}
    <div class="card mb-3">
      <div class="card-body">
        <h3 class="font-semibold">{{ group.name }}</h3>
        {% if group.description %}<p class="text-sm text-muted mt-1">{{ group.description }}</p>{% endif %}
        <p class="text-xs text-muted mt-2">Created {{ group.created_at[:10] if group.created_at else '?' }}</p>
      </div>
    </div>
    {% endfor %}
  {% else %}
    <p class="text-center text-muted py-8">No groups yet.</p>
  {% endif %}
</div>
{% endblock %}