{% extends "base.html" %}
{% block title %}Brain MCP — Connected Apps{% endblock %}

{% block content %}
<hgroup>
    <h1>📱 Connected Apps</h1>
    <p>Your conversation sources</p>
</hgroup>

<!-- Action buttons -->
<div class="grid">
    <div>
        <button class="outline"
                hx-get="/api/sources/discover"
                hx-target="#discover-results"
                hx-swap="innerHTML">
            🔍 Find Apps
        </button>
    </div>
    <div style="text-align: right;">
        <button hx-post="/api/sources/sync-all"
                hx-target="#sync-progress"
                hx-swap="innerHTML"
                hx-indicator="#sync-spinner">
            🔄 Update All
        </button>
    </div>
</div>

<!-- Sync progress area -->
<div id="sync-progress"></div>

<!-- Discovery results (hidden until clicked) -->
<div id="discover-results"></div>

<!-- Source cards — loaded via htmx -->
<div id="source-cards"
     hx-get="/api/sources/cards"
     hx-trigger="load"
     hx-swap="innerHTML">
    <article aria-busy="true">Loading sources...</article>
</div>
{% endblock %}