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

{% block title %}{{ concept.name }} — Concepts — Mnemosyne{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6 max-w-4xl">

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

    {% if concept %}
    <div class="flex items-center gap-4 mb-6">
        <h1 class="text-3xl font-bold">{{ concept.name }}</h1>
        {% if concept.concept_type %}
        <span class="badge badge-primary badge-lg">{{ concept.concept_type }}</span>
        {% endif %}
    </div>

    <!-- Stats -->
    <div class="stats shadow mb-6 w-full">
        <div class="stat">
            <div class="stat-title">Chunks Mentioning</div>
            <div class="stat-value text-lg">{{ chunk_count }}</div>
        </div>
        <div class="stat">
            <div class="stat-title">Images Depicting</div>
            <div class="stat-value text-lg">{{ image_count }}</div>
        </div>
        <div class="stat">
            <div class="stat-title">Connected Items</div>
            <div class="stat-value text-lg">{{ items|length }}</div>
        </div>
        <div class="stat">
            <div class="stat-title">Related Concepts</div>
            <div class="stat-value text-lg">{{ related_concepts|length }}</div>
        </div>
    </div>

    <!-- Related Concepts -->
    {% if related_concepts %}
    <h2 class="text-xl font-semibold mb-3">Related Concepts</h2>
    <div class="flex flex-wrap gap-2 mb-6">
        {% for rc in related_concepts %}
        <a href="{% url 'library:concept-detail' uid=rc.uid %}"
           class="badge badge-outline badge-lg gap-1 hover:badge-primary transition-colors">
            {{ rc.name }}
            {% if rc.concept_type %}
            <span class="opacity-60 text-xs">({{ rc.concept_type }})</span>
            {% endif %}
        </a>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Connected Items -->
    {% if items %}
    <h2 class="text-xl font-semibold mb-3">Connected Items</h2>
    <div class="overflow-x-auto mb-6">
        <table class="table table-zebra w-full">
            <thead>
                <tr>
                    <th>Title</th>
                </tr>
            </thead>
            <tbody>
                {% for item in items %}
                <tr class="hover">
                    <td>
                        <a href="{% url 'library:item-detail' uid=item.uid %}"
                           class="link link-primary">
                            {{ item.title }}
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}

    <div class="mt-6">
        <a href="{% url 'library:concept-list' %}" class="btn btn-ghost btn-sm">
            ← Back to Concepts
        </a>
        <a href="{% url 'library:search' %}?q={{ concept.name }}" class="btn btn-outline btn-sm ml-2">
            Search for "{{ concept.name }}"
        </a>
    </div>

    {% else %}
    <div class="alert alert-warning">
        <span>Concept not found.</span>
    </div>
    {% endif %}
</div>
{% endblock %}