{% extends "base.html" %}
{% import "_icons.html" as icons %}
{% block title %}Skills{% endblock %}
{% block heading %}Skills{% endblock %}
{% block subhead %}
  <p class="lede">The agent skills shipped with this install, and the curated packs that bundle them.</p>
{% endblock %}
{% block head_aside %}
  {% set installed_count = overview.skills | selectattr('installed') | list | length %}
  <div class="head-counts">
    <span class="count-pill">{{ icons.icon("package", 14) }} {{ overview.skills | length }} skills</span>
    <span class="count-pill count-pill-ok">{{ icons.icon("check-circle", 14) }} {{ installed_count }} installed</span>
  </div>
{% endblock %}

{% macro skill_card(s) %}
  <a class="app-card" href="{{ url_for('skill_detail', slug=s.slug) }}">
    <div class="app-card-top">
      <span class="app-icon">{{ icons.icon('scheduled' if s.cadence != '—' else 'zap', 20) }}</span>
      {% if s.installed %}
        <span class="badge badge-ok">{{ icons.icon("check", 12) }} installed</span>
      {% else %}
        <span class="badge badge-muted">not installed</span>
      {% endif %}
    </div>
    <span class="app-name">{{ s.name }}</span>
    <p class="app-desc">{{ s.description }}</p>
    <div class="app-tags">
      {% if s.cadence != '—' %}
        <span class="tag-chip">{{ icons.icon("clock", 11) }} {{ s.cadence }}</span>
      {% else %}
        <span class="tag-chip">{{ icons.icon("zap", 11) }} on-demand</span>
      {% endif %}
      <span class="tag-chip mono">{{ s.slug }}</span>
    </div>
  </a>
{% endmacro %}

{% block content %}
  <section class="card feature-card">
    <div class="check-card-head">
      <span class="cat-icon cat-icon-accent">{{ icons.icon("package", 18) }}</span>
      <div class="check-card-title">
        <h2>Skill packs</h2>
        <span class="check-card-sub">Install a whole workflow at once</span>
      </div>
    </div>
    <p class="note">
      Skills land in
      {% if overview.install_root %}<code>{{ overview.install_root }}</code>{% else %}
      your scheduled-tasks directory (<code>VAULT_PATH</code> not set — set it to enable installs){% endif %}.
    </p>
    <div class="pack-grid">
      {% for pack in overview.packs %}
        <div class="pack">
          <div class="pack-head">
            <span class="pack-icon">{{ icons.icon("layers", 16) }}</span>
            <span class="pack-name">{{ pack.name }}</span>
            <span class="badge badge-info">{{ pack.skills | length }} skill{{ '' if pack.skills | length == 1 else 's' }}</span>
          </div>
          <p class="pack-desc">{{ pack.description }}</p>
          <div class="pack-skills">
            {% for sk in pack.skills %}<span class="tag-chip mono">{{ sk }}</span>{% endfor %}
          </div>
          <form method="post" action="{{ url_for('install_pack', name=pack.name) }}">
            <button type="submit" {{ 'disabled' if not overview.install_root else '' }}>
              {{ icons.icon("download", 16) }} Install pack
            </button>
          </form>
        </div>
      {% endfor %}
    </div>
  </section>

  {% set scheduled_skills = overview.skills | selectattr('cadence', 'ne', '—') | list %}
  {% set ondemand_skills = overview.skills | rejectattr('cadence', 'ne', '—') | list %}

  {% if scheduled_skills %}
    <div class="section-head">
      <span class="section-icon">{{ icons.icon("scheduled", 16) }}</span>
      <h2 class="section-title">Scheduled automations</h2>
      <span class="section-count">{{ scheduled_skills | length }}</span>
    </div>
    <div class="app-grid">
      {% for s in scheduled_skills %}{{ skill_card(s) }}{% endfor %}
    </div>
  {% endif %}

  {% if ondemand_skills %}
    <div class="section-head">
      <span class="section-icon">{{ icons.icon("zap", 16) }}</span>
      <h2 class="section-title">On-demand skills</h2>
      <span class="section-count">{{ ondemand_skills | length }}</span>
    </div>
    <div class="app-grid">
      {% for s in ondemand_skills %}{{ skill_card(s) }}{% endfor %}
    </div>
  {% endif %}
{% endblock %}