{% extends "base.html" %}

{% block content %}
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
    <div
        class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Choose an agent model</h1>
    </div>

<div class="container" style="margin-bottom: 100px;">
    {% if prompt %}
    <p class="text-muted">Your prompt:</p>
    <blockquote class="blockquote">{{ prompt|linebreaksbr }}</blockquote>
    {% else %}
    <div class="no-results">
        <p>No prompt was found. Use the scrobble bar to ask a question first.</p>
    </div>
    {% endif %}

    {% if models_error %}
    <div class="alert alert-danger">{{ models_error }}</div>
    {% endif %}

    {% if models %}
    <p class="text-muted">{{ models|length }} free model{{ models|length|pluralize }} available via OpenRouter.</p>
    <div class="list-group">
        {% for model in models %}
        <div class="list-group-item d-flex justify-content-between align-items-center">
            <div>
                <div class="fw-semibold">{{ model.name }}</div>
                <div class="result-meta text-muted">
                    {% if model.provider == "gemini" %}
                    <span class="badge text-bg-light border me-1">Google Gemini</span>
                    {% endif %}
                    {{ model.id }}
                </div>
            </div>
            <form method="post" action="{% url 'agents:agent_scrobble_from_model' %}">
                {% csrf_token %}
                <input type="hidden" name="provider" value="{{ model.provider }}">
                <input type="hidden" name="model" value="{{ model.id }}">
                <input type="hidden" name="prompt" value="{{ prompt }}">
                <button type="submit" class="btn btn-sm btn-outline-success">Ask</button>
            </form>
        </div>
        {% endfor %}
    </div>
    {% elif prompt and not models_error %}
    <div class="no-results">
        No free models are available from OpenRouter right now.
    </div>
    {% endif %}
</div>
</main>
{% endblock %}