{% extends "base.html" %}
{% block title %}Claude Config — MCP Factory{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1>Claude Config</h1>
        <p class="page-subtitle">Manage your Claude Desktop <code>claude_desktop_config.json</code></p>
    </div>
</div>

<div class="config-info">
    <div style="display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem;">
        {% if config_exists %}
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--success)" stroke-width="2.5" stroke-linecap="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
            <span style="color: var(--success); font-weight: 600;">Config file exists</span>
        {% else %}
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
            <span style="color: var(--text-muted); font-weight: 600;">Not created yet</span>
        {% endif %}
    </div>
    <p class="dim" style="font-size: 0.85rem;"><strong>Path:</strong> <code>{{ config_path }}</code></p>
</div>

<div class="config-actions">
    <button class="btn btn-primary"
            hx-post="/api/config/export"
            hx-target="#config-status">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
        Export All Servers
    </button>
</div>

<div id="config-status"></div>

<div id="config-list">
    {% include "partials/config_list.html" %}
</div>
{% endblock %}