{% extends "themis/base.html" %}

{% block title %}{{ model.name }} — LLM Model{% endblock %}

{% block content %}
<div class="text-sm breadcrumbs mb-4">
    <ul>
        <li><a href="{% url 'llm_manager:dashboard' %}">LLM Manager</a></li>
        <li><a href="{% url 'llm_manager:model_list' %}">Models</a></li>
        <li>{{ model.name }}</li>
    </ul>
</div>

<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold font-mono">{{ model.name }}</h1>
    <div class="flex gap-2">
        <a href="{% url 'llm_manager:model_edit' model.pk %}" class="btn btn-sm btn-primary">Edit</a>
        <a href="{% url 'llm_manager:model_delete' model.pk %}" class="btn btn-sm btn-error btn-outline">Delete</a>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="card bg-base-200 shadow">
        <div class="card-body">
            <h2 class="card-title text-lg">Details</h2>
            <div class="grid grid-cols-2 gap-2 text-sm">
                <span class="font-semibold">Display Name:</span><span>{{ model.display_name|default:"—" }}</span>
                <span class="font-semibold">API:</span><span><a href="{% url 'llm_manager:api_detail' model.api.pk %}" class="link link-primary">{{ model.api.name }}</a></span>
                <span class="font-semibold">Type:</span><span class="badge badge-ghost">{{ model.get_model_type_display }}</span>
                <span class="font-semibold">Active:</span><span>{% if model.is_active %}Yes{% else %}No{% endif %}</span>
                <span class="font-semibold">Context Window:</span><span>{{ model.context_window|default:"—" }} tokens</span>
                <span class="font-semibold">Max Output:</span><span>{{ model.max_output_tokens|default:"—" }} tokens</span>
                <span class="font-semibold">Dimensions:</span><span>{{ model.vector_dimensions|default:"—" }}</span>
            </div>
        </div>
    </div>

    <div class="card bg-base-200 shadow">
        <div class="card-body">
            <h2 class="card-title text-lg">Capabilities</h2>
            <div class="flex flex-wrap gap-2">
                {% if model.supports_cache %}<span class="badge badge-success">Cache</span>{% endif %}
                {% if model.supports_vision %}<span class="badge badge-info">Vision</span>{% endif %}
                {% if model.supports_multimodal %}<span class="badge badge-accent">Multimodal</span>{% endif %}
                {% if model.supports_function_calling %}<span class="badge badge-secondary">Functions</span>{% endif %}
                {% if model.supports_json_mode %}<span class="badge badge-warning">JSON Mode</span>{% endif %}
            </div>
            <h3 class="font-semibold mt-4 text-sm">Pricing (per 1K tokens)</h3>
            <div class="grid grid-cols-2 gap-2 text-sm">
                <span>Input:</span><span>${{ model.input_cost_per_1k }}</span>
                <span>Output:</span><span>${{ model.output_cost_per_1k }}</span>
                {% if model.cached_cost_per_1k %}<span>Cached:</span><span>${{ model.cached_cost_per_1k }}</span>{% endif %}
            </div>
            <h3 class="font-semibold mt-4 text-sm">System Defaults</h3>
            <div class="flex flex-wrap gap-2">
                {% if model.is_system_embedding_model %}<span class="badge badge-success">System Embedding</span>{% endif %}
                {% if model.is_system_chat_model %}<span class="badge badge-info">System Chat</span>{% endif %}
                {% if model.is_system_reranker_model %}<span class="badge badge-warning">System Reranker</span>{% endif %}
                {% if not model.is_system_embedding_model and not model.is_system_chat_model and not model.is_system_reranker_model %}
                    <span class="text-base-content/50 text-sm">Not a system default</span>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}