{% extends "base.html" %}
{% block title_suffix %} - Skills Library{% endblock %}

{% block content %}
<h1>Skills Library</h1>
<p>{{ skills | length }} skill(s) installed.</p>

<input type="search" id="skill-filter" placeholder="Filter skills by name, description, or type..." autofocus>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Type</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for skill in skills %}
        <tr id="skill-{{ skill.dir_name }}">
            <td><a href="/skills/{{ skill.dir_name }}">{{ skill.name }}</a></td>
            <td>{{ skill.description | truncate(80) }}</td>
            <td><span class="skill-type">{{ skill.type }}</span></td>
            <td>
                <div class="action-row">
                    <a href="/skills/{{ skill.dir_name }}/download"
                       role="button" class="outline action-btn">ZIP</a>
                    {% if skill.type != "built-in" %}
                    <button
                        class="secondary outline action-btn"
                        hx-delete="/skills/{{ skill.dir_name }}"
                        hx-target="#skill-{{ skill.dir_name }}"
                        hx-swap="outerHTML"
                        hx-confirm="Delete skill '{{ skill.name }}'?">
                        Delete
                    </button>
                    {% endif %}
                    <div class="dropdown">
                        <button type="button" class="outline action-btn dropdown-trigger">
                            Install <svg width="10" height="6" viewBox="0 0 10 6" fill="none" style="margin-left:2px;vertical-align:middle;"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </button>
                        <div class="dropdown-menu">
                            <form hx-post="/skills/{{ skill.dir_name }}/install" hx-target="#install-result-{{ skill.dir_name }}" hx-swap="innerHTML" style="margin:0;">
                                <input type="hidden" name="platform" value="cursor">
                                <button type="submit" class="dropdown-item">Cursor</button>
                            </form>
                            <form hx-post="/skills/{{ skill.dir_name }}/install" hx-target="#install-result-{{ skill.dir_name }}" hx-swap="innerHTML" style="margin:0;">
                                <input type="hidden" name="platform" value="claude">
                                <button type="submit" class="dropdown-item">Claude</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div id="install-result-{{ skill.dir_name }}" class="install-result"></div>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<script>
document.getElementById('skill-filter').addEventListener('input', function() {
    var q = this.value.toLowerCase();
    var rows = document.querySelectorAll('tbody tr');
    for (var i = 0; i < rows.length; i++) {
        rows[i].style.display = rows[i].textContent.toLowerCase().indexOf(q) !== -1 ? '' : 'none';
    }
});

document.addEventListener('click', function(e) {
    var trigger = e.target.closest('.dropdown-trigger');
    if (trigger) {
        e.preventDefault();
        var dd = trigger.closest('.dropdown');
        var wasOpen = dd.classList.contains('open');
        document.querySelectorAll('.dropdown.open').forEach(function(el) { el.classList.remove('open'); });
        if (!wasOpen) dd.classList.add('open');
        return;
    }
    if (e.target.closest('.dropdown-menu')) return;
    document.querySelectorAll('.dropdown.open').forEach(function(el) { el.classList.remove('open'); });
});

document.addEventListener('htmx:afterRequest', function(e) {
    var dd = e.target.closest('.dropdown');
    if (dd) dd.classList.remove('open');
});
</script>
{% endblock %}