{% extends "library/_layout.html" %}
{% from "_macros.html" import icon %}
{% set section = "skills" %}

{% block title %}Skills - {{ brand.name }}{% endblock %}
{% block heading %}Skills{% endblock %}
{% block actions %}
<a class="btn btn--primary btn--sm" href="/library/skills/new">{{ icon("plus", "icon--sm") }} New skill</a>
{% endblock %}

{% block library_content %}
<p class="admin-lede">
  Saved procedures. Every enabled skill's name and description are shown to the
  model on each turn; it reads the instructions only when it decides one
  applies. A model may write and revise its own — every version is kept, so any
  change can be read and undone.
</p>

{#
  Two views, as links, so a filtered list is a real URL you can keep -- the same
  shape the admin lists use. Same as the notes list.
#}
<div class="filter-tabs" style="margin-bottom: var(--sp-4)">
  <a class="filter-tab {{ 'is-active' if not shared }}" href="/library/skills">All skills</a>
  <a class="filter-tab {{ 'is-active' if shared }}" href="/library/skills?shared=1">Shared with me</a>
</div>
<form method="get" action="/library/skills" class="btn-row" style="margin-bottom: var(--sp-5)">
  <input class="input" type="search" name="q" value="{{ q }}" style="flex: 1"
         placeholder="Search skills…">
  <button class="btn" type="submit">{{ icon("search", "icon--sm") }} Search</button>
  {% if q %}<a class="btn btn--sm" href="/library/skills">Clear</a>{% endif %}
</form>

{% if not skills %}
<div class="empty">
  {{ icon("sparkle", "empty__mark") }}
  <h2 class="empty__title">{{ "Nothing found" if q else "No skills yet" }}</h2>
  <p class="empty__text">
    {% if q %}
      No skill matches “{{ q }}”.
    {% else %}
      Write one for a task you explain often, or let a model save one after it
      has worked the task out.
    {% endif %}
  </p>
</div>
{% else %}
<ul class="model-list">
  {% for skill in skills %}
  <li class="model-list__item">
    <div style="min-width: 0">
      <a href="/library/skills/{{ skill.id }}"><strong class="mono">{{ skill.name }}</strong></a>
      <div class="text-xs faint">{{ skill.description }}</div>
    </div>
    <div class="btn-row">
      {% if not skill.enabled %}<span class="badge">off</span>{% endif %}
      {% if skill.author == "model" %}<span class="badge badge--leaf">written by a model</span>{% endif %}
      {% if skill.owner_id != user.id %}<span class="badge">shared</span>{% endif %}
    </div>
  </li>
  {% endfor %}
</ul>
{% include "library/_pager.html" %}
{% endif %}
{% endblock %}