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

{% block title %}Concepts — Mnemosyne{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6 max-w-4xl">
    <h1 class="text-3xl font-bold mb-6">Knowledge Graph — Concepts</h1>

    <!-- Search -->
    <form method="get" action="{% url 'library:concept-list' %}" class="mb-6">
        <div class="join w-full">
            <input type="text" name="q" value="{{ query }}"
                   placeholder="Search concepts..."
                   class="input input-bordered join-item w-full"
                   autofocus>
            <button type="submit" class="btn btn-primary join-item">Search</button>
        </div>
    </form>

    {% if error %}
    <div class="alert alert-error mb-6">
        <span>{{ error }}</span>
    </div>
    {% endif %}

    {% if concepts %}
    <div class="overflow-x-auto">
        <table class="table table-zebra w-full">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    {% if query %}<th>Score</th>{% endif %}
                </tr>
            </thead>
            <tbody>
                {% for concept in concepts %}
                <tr class="hover">
                    <td>
                        <a href="{% url 'library:concept-detail' uid=concept.uid %}"
                           class="link link-primary font-medium">
                            {{ concept.name }}
                        </a>
                    </td>
                    <td>
                        {% if concept.concept_type %}
                        <span class="badge badge-outline badge-sm">{{ concept.concept_type }}</span>
                        {% else %}
                        <span class="opacity-40">—</span>
                        {% endif %}
                    </td>
                    {% if query %}
                    <td>
                        <span class="badge badge-ghost badge-sm">{{ concept.score|floatformat:3 }}</span>
                    </td>
                    {% endif %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <p class="text-sm opacity-60 mt-4">Showing {{ concepts|length }} concepts.</p>
    {% else %}
    <div class="alert alert-info">
        <span>{% if query %}No concepts found for "{{ query }}".{% else %}No concepts in the knowledge graph yet.{% endif %}</span>
    </div>
    {% endif %}
</div>
{% endblock %}