{% extends "base.html" %}

{% block title %}MCP Matrix{% endblock %}
{% block content %}
<div>

  <div class="page-header">
    <span class="page-title-icon">⬡</span>
    <h1 class="page-title">MCP Matrix</h1>
  </div>

  <!-- Stack preset buttons -->
  {% if stacks %}
  <div class="mcp-stack-bar">
    {% for stack in stacks %}
    <button
      class="mcp-stack-pill {% if stack.source == 'template' %}source-template{% endif %}"
      title="{{ stack.description }}"
      data-stack="{{ stack.name }}"
    >
      {{ stack.name }}
    </button>
    {% endfor %}
  </div>
  {% endif %}

  <!-- MCP grid (auto-refreshed every 10s via partial's own hx-trigger) -->
  <div class="mcp-matrix-wrap">
    {% include "partials/mcp_grid.html" %}
  </div>

</div>
{% endblock %}