{% set registered_count = widget.rows | length %}
{% set declared_keys = widget.declared.keys() | list %}
{% set unregistered = declared_keys | reject('in', widget.rows | map(attribute='capability') | list) | list %}
{% set plugins_with_caps = widget.declared.values() | sum(start=[]) | unique | list %}

{# ===== Stats Row ===== #}
<div class="row g-3 mb-3">
    <div class="col-6 col-lg-3">
        <div class="fp-stat-tile fp-stat-tile--blue">
            <div class="fp-stat-tile__value">{{ registered_count }}</div>
            <div class="fp-stat-tile__label">Registered</div>
            <i class="ti ti-plug fp-stat-tile__icon"></i>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="fp-stat-tile fp-stat-tile--teal">
            <div class="fp-stat-tile__value">{{ declared_keys | length }}</div>
            <div class="fp-stat-tile__label">Declared</div>
            <i class="ti ti-file-description fp-stat-tile__icon"></i>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="fp-stat-tile {% if unregistered %}fp-stat-tile--amber{% else %}fp-stat-tile--green{% endif %}">
            <div class="fp-stat-tile__value">{{ unregistered | length }}</div>
            <div class="fp-stat-tile__label">Unregistered</div>
            <i class="ti ti-alert-circle fp-stat-tile__icon"></i>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="fp-stat-tile fp-stat-tile--violet">
            <div class="fp-stat-tile__value">{{ plugins_with_caps | length }}</div>
            <div class="fp-stat-tile__label">Plugins</div>
            <i class="ti ti-puzzle fp-stat-tile__icon"></i>
        </div>
    </div>
</div>

{# ===== Registered Capabilities ===== #}
<div class="card mb-3 fp-card-accent-blue">
    <div class="card-header">
        <h4 class="card-title">
            <i class="ti ti-plug text-primary me-2"></i>Registered Capabilities
        </h4>
        <div class="card-options">
            <span class="fp-meta-chip fp-meta-chip--blue">{{ registered_count }} total</span>
        </div>
    </div>
    {% if widget.rows %}
    <div class="card-body p-0">
        <table class="table table-vcenter card-table">
            <thead>
                <tr>
                    <th>Capability</th>
                    <th>Provider Plugin</th>
                    <th>Metadata</th>
                </tr>
            </thead>
            <tbody>
                {% for row in widget.rows %}
                <tr>
                    <td>
                        <code class="fp-path-code">{{ row.capability }}</code>
                        {% if row.capability in widget.declared %}
                            <span class="fp-badge--green ms-2">declared</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if row.provider_url %}
                            <a href="{{ row.provider_url }}" class="fp-meta-chip fp-meta-chip--blue text-decoration-none">
                                <i class="ti ti-external-link me-1"></i>{{ row.provider }}
                            </a>
                        {% else %}
                            <span class="fp-meta-chip fp-meta-chip--dim">{{ row.provider }}</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if row.meta %}
                            {% for k, v in row.meta.items() %}
                                <span class="fp-meta-chip fp-meta-chip--dim me-1">
                                    <span class="text-muted">{{ k }}:</span> {{ v }}
                                </span>
                            {% endfor %}
                        {% else %}
                            <span class="fp-meta-none">—</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="card-body">
        <div class="fp-dep-empty">
            <i class="ti ti-plug-x"></i>
            <span>No capabilities registered yet.</span>
        </div>
    </div>
    {% endif %}
</div>

{# ===== Declared Capabilities (plugin metadata) ===== #}
<div class="card mb-3 fp-card-accent-teal">
    <div class="card-header">
        <h4 class="card-title">
            <i class="ti ti-file-description me-2" style="color: var(--c-teal)"></i>Declared by Plugins
        </h4>
        <div class="card-options">
            <span class="fp-meta-chip fp-meta-chip--dim">{{ declared_keys | length }} capability names</span>
        </div>
    </div>
    {% if widget.declared %}
    <div class="card-body p-0">
        <table class="table table-vcenter card-table">
            <thead>
                <tr>
                    <th>Capability</th>
                    <th>Declared by</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                {% for cap_name, mod_names in widget.declared.items() %}
                {% set is_registered = cap_name in (widget.rows | map(attribute='capability') | list) %}
                <tr>
                    <td><code class="fp-path-code">{{ cap_name }}</code></td>
                    <td>
                        <div class="d-flex flex-wrap gap-1">
                            {% for mod in mod_names %}
                                <span class="fp-meta-chip fp-meta-chip--mono">{{ mod }}</span>
                            {% endfor %}
                        </div>
                    </td>
                    <td>
                        {% if is_registered %}
                            <span class="fp-badge--green"><i class="ti ti-check me-1"></i>Registered</span>
                        {% else %}
                            <span class="fp-badge--amber"><i class="ti ti-clock me-1"></i>Not yet registered</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="card-body">
        <div class="fp-dep-empty">
            <i class="ti ti-file-off"></i>
            <span>No plugins declare capabilities via the <code>capabilities</code> field.</span>
        </div>
    </div>
    {% endif %}
</div>
