{% set active_page = "libraries" %}
{% extends "base.html" %}
{% block title %}Libraries{% endblock %}
{% block content %}
<div class="page-header animate-in">
    <div class="page-title">Libraries</div>
    <div class="page-subtitle">{{ total_libraries }} third-party packages indexed</div>
</div>

{% if libraries %}
{% set max_syms = libraries|map(attribute='symbols')|max if libraries else 1 %}
<div class="grid-3 animate-in delay-1">
    {% for lib in libraries %}
    <div class="card card-glow" style="padding:18px">
        <div class="flex items-center justify-between mb-3">
            <span class="mono text-white" style="font-weight:600;font-size:13px">{{ lib.name }}</span>
            <span class="badge badge-{{ lib.manager }}">{{ lib.manager }}</span>
        </div>
        <div class="flex items-center justify-between mb-3">
            <span class="mono text-xs text-faint">v{{ lib.version }}</span>
            <span class="mono text-sm text-accent" style="font-weight:600">{{ "{:,}".format(lib.symbols) }}</span>
        </div>
        <div class="bar-track">
            <div class="bar-fill fill-accent" style="width:{{ (lib.symbols / max_syms * 100)|round(1) }}%"></div>
        </div>
        {% if lib.repo_url %}
        <div class="mt-2">
            <a href="{{ lib.repo_url }}" target="_blank" class="mono text-xs" style="color:var(--text-faint)">{{ lib.repo_url|truncate(50) }}</a>
        </div>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state animate-in delay-1">
    <div style="font-size:28px;margin-bottom:12px;opacity:0.3">&#9670;</div>
    No libraries indexed yet<br>
    <span class="text-faint">Use <span class="mono">sylvan library add pip/package@version</span> to index a library</span>
</div>
{% endif %}
{% endblock %}