{% extends "base.html" %}
{% block title %}Combos - Janus{% endblock %}
{% block combos_active %}bg-gray-700 text-white{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-white mb-6">Combos</h1>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    {% for name, models in combos.items() %}
    <div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
        <h2 class="text-lg font-bold text-white mb-4">{{ name }}</h2>
        <div class="flex flex-wrap items-center gap-2">
            {% for model in models %}
            <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-900 text-blue-200">{{ model }}</span>
            {% if not loop.last %}
            <span class="text-gray-500 text-lg">→</span>
            {% endif %}
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>

{% if not combos %}
<div class="bg-gray-800 rounded-xl p-8 border border-gray-700 text-center">
    <p class="text-gray-400">No combos configured.</p>
</div>
{% endif %}
{% endblock %}