{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/feed.css') }}">
<link rel="stylesheet" href="{{ static_url('/static/css/post.css') }}">
<link rel="stylesheet" href="{{ static_url('/static/css/engagement.css') }}">
{% endblock %}
{% block content %}
<div class="saved-page">
    <h1 class="saved-title">Skills</h1>
    <form method="post" action="/skills/install" class="skill-install-form">
        <input type="url" name="url" class="skill-install-input" placeholder="https://example.com/my-skill or a direct SKILL.md URL" aria-label="Skill URL" required maxlength="2000">
        <button type="submit" class="btn btn-primary">Install</button>
    </form>
    {% if install_error %}
    <p class="skill-error">{{ install_error }}</p>
    {% endif %}
    <div class="saved-list">
        {% for item in items %}
        <div class="saved-item note-item">
            <div class="skill-item-header">
                <a href="/skills/{{ item.name }}" class="skill-item-name">{{ item.name }}</a>
                <span class="saved-type badge">{{ 'Enabled' if item.enabled else 'Disabled' }}</span>
                <span class="saved-item-time">{{ dt_ago(item.updated_at) if item.updated_at else '' }}</span>
            </div>
            <p class="note-item-content">{{ item.description }}</p>
            <div class="skill-item-actions">
                <form method="post" action="/skills/{{ item.name }}/enabled">
                    <button type="submit" class="btn btn-secondary btn-sm">{{ 'Disable' if item.enabled else 'Enable' }}</button>
                </form>
                <form method="post" action="/skills/{{ item.name }}/delete">
                    <button type="submit" class="btn btn-danger btn-sm" data-confirm="Delete the skill {{ item.name }}?">Delete</button>
                </form>
            </div>
        </div>
        {% else %}
        <div class="empty-state">No skills installed. Paste a skill URL above, or ask Devii to install one.</div>
        {% endfor %}
    </div>
</div>
{% endblock %}