{% extends "base.html" %}
{% block title %}{{ _('MCP Server Catalog') }} — mcprack{% endblock %}
{% block content %}

<section class="section">
  <h1>{{ _('MCP Server Catalog') }}</h1>
  <p class="text-muted">{{ _('Select the AI tools and services you want to use, save your selection, then download or copy the config for your client. You can change your selection anytime.') }}</p>
</section>

<section class="section">
  <h2>{{ _('Download Your Config') }}</h2>
  <p class="text-muted">{{ _("Once you've selected the servers you need, download or copy the config for your AI client:") }}</p>

  <div class="action-links">
    <div class="client-card">
      <h4>Claude Desktop</h4>
      <p class="text-sm text-muted">{{ _('Works with Claude for Desktop application.') }}</p>
      <div class="client-card-actions">
        <a href="{{ url_for('catalog.download', client='claude') }}" class="btn btn-secondary" download>
          ⬇️ {{ _('Download Config') }}
        </a>
        <a href="{{ url_for('catalog.view', client='claude') }}" class="btn btn-secondary">
          👁️ {{ _('View & Copy') }}
        </a>
      </div>
    </div>

    <div class="client-card">
      <h4>GitHub Copilot</h4>
      <p class="text-sm text-muted">{{ _('Works with VS Code Copilot and other GitHub Copilot clients.') }}</p>
      <div class="client-card-actions">
        <a href="{{ url_for('catalog.download', client='copilot') }}" class="btn btn-secondary" download>
          ⬇️ {{ _('Download Config') }}
        </a>
        <a href="{{ url_for('catalog.view', client='copilot') }}" class="btn btn-secondary">
          👁️ {{ _('View & Copy') }}
        </a>
      </div>
    </div>
  </div>
</section>

<section class="section">
  <form method="post" action="{{ url_for('catalog.selection') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <h2>{{ _('Available Servers') }}</h2>

    {% if servers %}
      <div class="server-grid">
        {% for server in servers %}
        <div class="server-row">
          <div class="server-row-header">
            <input type="checkbox" class="server-checkbox" name="server_id" value="{{ server.id }}"
                   {{ "checked" if server.id in selected_ids else "" }}
                   id="server-{{ server.id }}" aria-label="{{ _('Select %(label)s', label=server.label) }}">
            <img src="{{ url_for('catalog.server_icon', server_id=server.id) }}" alt="" class="server-icon" loading="lazy" width="24" height="24">
            <label class="server-info" for="server-{{ server.id }}">
              <div class="label">{{ server.label }}</div>
              {% if server.description %}<div class="desc">{{ server.description }}</div>{% endif %}
            </label>
          </div>
          <div class="server-row-footer">
            <span class="server-transport {% if server.transport == 'stdio' %}stdio{% else %}http{% endif %}">
              {{ server.transport | upper }}
            </span>
            {% if server.allow_user_override %}
              <a href="{{ url_for('catalog.override', server_id=server.id) }}" class="btn btn-sm btn-secondary">
                {% if server.id in override_ids %}
                  🔐 {{ _('Using Custom Credentials') }}
                {% else %}
                  🔓 {{ _('Use My Own Credentials') }}
                {% endif %}
              </a>
            {% endif %}
          </div>
        </div>
        {% endfor %}
      </div>
    {% else %}
      <p class="text-muted">{{ _('No servers available yet. Ask an admin to register some.') }}</p>
    {% endif %}

    <div style="margin-top: var(--space-lg);">
      <button type="submit" class="btn btn-primary">
        💾 {{ _('Save Selection') }}
      </button>
    </div>
  </form>
</section>

{% endblock %}