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

{% block content %}
<div class="ac-page-header">
    <h1>Skills Library</h1>
    <p>{{ skills | length }} skill(s) installed.</p>
</div>

<div class="pf-v6-c-form__group" style="margin-bottom:1rem;">
    <span class="pf-v6-c-form-control">
        <input type="search" id="skill-filter" placeholder="Filter skills by name, description, or type..." autofocus>
    </span>
</div>

<table class="pf-v6-c-table pf-m-grid-md" role="grid" aria-label="Skills library">
    <thead>
        <tr role="row">
            <th role="columnheader" scope="col" style="white-space:nowrap;width:15%;">Name</th>
            <th role="columnheader" scope="col" style="width:60%;">Description</th>
            <th role="columnheader" scope="col" style="white-space:nowrap;width:8%;">Type</th>
            <th role="columnheader" scope="col" style="white-space:nowrap;">Actions</th>
        </tr>
    </thead>
    <tbody role="rowgroup">
        {% for skill in skills %}
        {% set url_name = skill.dir_name | urlencode %}
        {% set row_id = "skill-" ~ loop.index %}
        <tr role="row" id="{{ row_id }}">
            <td role="cell" data-label="Name" style="white-space:nowrap;">
                <a href="/skills/{{ url_name }}">{{ skill.name }}</a>
            </td>
            <td role="cell" data-label="Description">{{ skill.description | truncate(120) }}</td>
            <td role="cell" data-label="Type">
                <span class="pf-v6-c-label {% if skill.type == 'built-in' %}pf-m-blue{% else %}pf-m-green{% endif %}">
                    <span class="pf-v6-c-label__content">
                        <span class="pf-v6-c-label__text">{{ skill.type }}</span>
                    </span>
                </span>
            </td>
            <td role="cell" data-label="Actions">
                <div class="ac-action-row">
                    <a href="/skills/{{ url_name }}/download"
                       class="pf-v6-c-button pf-m-secondary pf-m-small">ZIP</a>
                    {% if skill.type != "built-in" %}
                    <button
                        class="pf-v6-c-button pf-m-danger pf-m-small"
                        hx-delete="/skills/{{ url_name }}"
                        hx-target="#{{ row_id }}"
                        hx-swap="outerHTML"
                        hx-confirm="Delete skill '{{ skill.name }}'?">
                        Delete
                    </button>
                    {% endif %}
                    <div class="ac-dropdown">
                        <button type="button" class="pf-v6-c-button pf-m-secondary pf-m-small ac-dropdown-trigger">
                            Install
                            <i class="fas fa-caret-down" style="margin-left:4px;font-size:0.7em;"></i>
                        </button>
                        <div class="ac-dropdown-menu">
                            <form hx-post="/skills/{{ url_name }}/install" hx-target="#install-{{ row_id }}" hx-swap="innerHTML" style="margin:0;">
                                <input type="hidden" name="platform" value="cursor">
                                <button type="submit" class="ac-dropdown-item">Cursor</button>
                            </form>
                            <form hx-post="/skills/{{ url_name }}/install" hx-target="#install-{{ row_id }}" hx-swap="innerHTML" style="margin:0;">
                                <input type="hidden" name="platform" value="claude">
                                <button type="submit" class="ac-dropdown-item">Claude</button>
                            </form>
                            <form hx-post="/skills/{{ url_name }}/install" hx-target="#install-{{ row_id }}" hx-swap="innerHTML" style="margin:0;">
                                <input type="hidden" name="platform" value="gemini">
                                <button type="submit" class="ac-dropdown-item">Gemini CLI</button>
                            </form>
                            <a href="/skills/{{ url_name }}?deploy=aap" class="ac-dropdown-item">AAP</a>
                        </div>
                    </div>
                    <div class="ac-dropdown">
                        <button type="button" class="pf-v6-c-button pf-m-secondary pf-m-small ac-dropdown-trigger">
                            Uninstall
                            <i class="fas fa-caret-down" style="margin-left:4px;font-size:0.7em;"></i>
                        </button>
                        <div class="ac-dropdown-menu">
                            <form hx-post="/skills/{{ url_name }}/uninstall" hx-target="#install-{{ row_id }}" hx-swap="innerHTML" style="margin:0;">
                                <input type="hidden" name="platform" value="cursor">
                                <button type="submit" class="ac-dropdown-item">Cursor</button>
                            </form>
                            <form hx-post="/skills/{{ url_name }}/uninstall" hx-target="#install-{{ row_id }}" hx-swap="innerHTML" style="margin:0;">
                                <input type="hidden" name="platform" value="claude">
                                <button type="submit" class="ac-dropdown-item">Claude</button>
                            </form>
                            <form hx-post="/skills/{{ url_name }}/uninstall" hx-target="#install-{{ row_id }}" hx-swap="innerHTML" style="margin:0;">
                                <input type="hidden" name="platform" value="gemini">
                                <button type="submit" class="ac-dropdown-item">Gemini CLI</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div id="install-{{ row_id }}" class="ac-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('.ac-dropdown-trigger');
    if (trigger) {
        e.preventDefault();
        var dd = trigger.closest('.ac-dropdown');
        var wasOpen = dd.classList.contains('open');
        document.querySelectorAll('.ac-dropdown.open').forEach(function(el) { el.classList.remove('open'); });
        if (!wasOpen) dd.classList.add('open');
        return;
    }
    if (e.target.closest('.ac-dropdown-menu')) return;
    document.querySelectorAll('.ac-dropdown.open').forEach(function(el) { el.classList.remove('open'); });
});

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