<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JustEmbed - Query Results</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="mb-6">
            <a href="/" class="text-blue-600 hover:text-blue-800 flex items-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                Back to Home
            </a>
        </div>

        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <h1 class="text-2xl font-bold text-gray-900 mb-2">Query Results</h1>
            <p class="text-gray-600">Query: <span class="font-semibold">"{{ query }}"</span></p>
        </div>

        {% if mode == "count" %}
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6">
            <h2 class="text-xl font-semibold text-blue-900 mb-4">Total Matches: {{ total }}</h2>
            <div class="space-y-2">
                {% for r in by_kb %}
                <div class="bg-white p-4 rounded-md border border-blue-100">
                    <span class="font-semibold text-gray-900">{{ r.kb }}:</span>
                    <span class="text-blue-700">{{ r.count }} matches</span>
                    <span class="text-xs text-gray-500 ml-2">({{ r.model }})</span>
                </div>
                {% endfor %}
            </div>
        </div>
        {% else %}
        <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
            <p class="text-green-800 font-semibold">Found {{ count }} results</p>
        </div>

        <div class="space-y-4">
            {% for r in results %}
            <div class="bg-white rounded-lg shadow p-6 border-l-4 border-blue-500">
                <div class="flex items-start justify-between mb-3">
                    <div class="flex-1">
                        <div class="flex items-center space-x-2 mb-1">
                            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">{{ r.kb }}</span>
                            <span class="text-sm text-gray-600 font-mono">{{ r.file }}</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="text-xs text-gray-500">{{ r.model }}</span>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-2xl font-bold text-green-600">{{ "%.3f"|format(r.score) }}</div>
                        <div class="text-xs text-gray-500">similarity</div>
                    </div>
                </div>
                <div class="text-gray-700 leading-relaxed">
                    {{ r.text[:400] }}{% if r.text|length > 400 %}<span class="text-gray-400">...</span>{% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>

    <footer class="bg-white border-t border-gray-200 mt-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <p class="text-center text-sm text-gray-500">
                Copyright © Krishnamoorthy Sankaran | 
                <a href="https://github.com/sekarkrishna/justembed" target="_blank" class="text-blue-600 hover:text-blue-800">GitHub</a> | 
                <a href="https://pypi.org/project/justembed" target="_blank" class="text-blue-600 hover:text-blue-800">PyPI</a>
            </p>
        </div>
    </footer>
</body>
</html>
