{% extends "base.html" %}
{% set active = "skills" %}

{% block title %}Skills{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Skills</h1>
    <p class="page-subtitle">{{ skills|length }} skill{{ "s" if skills|length != 1 }} loaded with {{ skills | sum(attribute='tool_count') }} tools</p>
</div>

{% set skill_colors = ["purple", "blue", "green", "yellow", "red"] %}

{% for skill in skills %}
<details class="skill-card"{% if loop.index <= 5 %} open{% endif %}>
    <summary>
        {% set sc = skill_colors[loop.index0 % 5] %}
        <div class="avatar avatar-{{ sc }}" style="width: 36px; height: 36px; border-radius: 8px; font-size: 13px;">
            {{ skill.name[:2] }}
        </div>
        <span style="flex: 1; margin-left: 4px;">{{ skill.name }}</span>
        <span class="badge badge-muted" style="margin-left: auto;">{{ skill.tool_count }} tool{{ "s" if skill.tool_count != 1 }}</span>
    </summary>
    <div class="skill-body">
        <table>
            <thead>
                <tr><th>Tool</th><th>Description</th><th>Approval</th></tr>
            </thead>
            <tbody>
            {% for tool in skill.tools %}
            <tr>
                <td><code>{{ tool.name }}</code></td>
                <td style="color: var(--text-muted);">{{ tool.description }}</td>
                <td>
                    {% if tool.human == "approve" %}
                        <span class="badge badge-yellow">approve</span>
                    {% elif tool.human == "confirm" %}
                        <span class="badge badge-yellow">confirm</span>
                    {% elif tool.human == "dynamic" %}
                        <span class="badge badge-blue">dynamic</span>
                    {% else %}
                        <span class="badge badge-green">auto</span>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</details>
{% endfor %}

{% if not skills %}
<div class="card">
    <div class="empty-state">
        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
        <div>No skills loaded. Add skill directories to <code>skills.paths</code> in config.</div>
    </div>
</div>
{% endif %}
{% endblock %}