{% extends "base.html" %}

{% block title %}Knowledge - {{ app_name }}{% endblock %}
{% block page_title %}Knowledge Base{% endblock %}

{% block content %}
<!-- Knowledge Stats -->
<div class="metrics-grid">
    <div class="metric-card primary">
        <div class="metric-info">
            <span class="metric-label">Total Nodes</span>
            <span class="metric-value">{{ stats.total_nodes }}</span>
        </div>
    </div>
    <div class="metric-card info">
        <div class="metric-info">
            <span class="metric-label">Total Edges</span>
            <span class="metric-value">{{ stats.total_edges }}</span>
        </div>
    </div>
    <div class="metric-card success">
        <div class="metric-info">
            <span class="metric-label">Categories</span>
            <span class="metric-value">{{ stats.categories|length }}</span>
        </div>
    </div>
    <div class="metric-card warning">
        <div class="metric-info">
            <span class="metric-label">Growth Rate</span>
            <span class="metric-value">{{ "%.1f"|format(stats.growth_rate) }}x</span>
        </div>
    </div>
</div>

<!-- Categories -->
<div class="panel">
    <h3><i class="fas fa-folder-open"></i> Knowledge Categories</h3>
    {% if stats.categories %}
    <div class="category-grid">
        {% for category, count in stats.categories.items() %}
        <div class="category-card">
            <i class="fas fa-tag"></i>
            <span class="category-name">{{ category }}</span>
            <span class="category-count">{{ count }} items</span>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p class="empty-state">No categories found. Knowledge base is being populated.</p>
    {% endif %}
</div>

<!-- Knowledge Graph Visualization -->
<div class="panel">
    <h3><i class="fas fa-project-diagram"></i> Knowledge Graph</h3>
    <div class="graph-placeholder">
        <i class="fas fa-network-wired"></i>
        <p>Interactive knowledge graph visualization</p>
        <span class="note">{{ stats.total_nodes }} nodes, {{ stats.total_edges }} connections</span>
    </div>
</div>

<!-- Recent Updates -->
<div class="panel">
    <h3><i class="fas fa-clock"></i> Recent Updates</h3>
    {% if stats.last_updated %}
    <p>Last updated: {{ stats.last_updated }}</p>
    {% else %}
    <p class="empty-state">No recent updates recorded.</p>
    {% endif %}
</div>
{% endblock %}