{% extends "base.html" %}
{% import "_icons.html" as icons %}
{% block title %}{{ skill.name }}{% endblock %}
{% block heading %}{{ skill.name }}{% endblock %}
{% block subhead %}
  <p class="lede">{{ skill.description }}</p>
{% endblock %}

{% block content %}
  <p><a class="btn-link" href="{{ url_for('skills') }}">{{ icons.icon("arrow-left", 14) }} Back to skills</a></p>

  <div class="meta-row">
    <span class="app-icon app-icon-sm">{{ icons.icon('scheduled' if skill.cadence != '—' else 'zap', 16) }}</span>
    <span class="mono dim">{{ skill.slug }}</span>
    <span class="badge badge-info">{{ icons.icon("clock", 12) }} {{ skill.cadence }}</span>
    {% if skill.installed %}
      <span class="badge badge-ok">{{ icons.icon("check", 12) }} installed</span>
    {% else %}
      <span class="badge badge-muted">not installed</span>
    {% endif %}
  </div>

  <p class="note">{{ icons.icon("terminal", 13) }} Install with <code>eidetic skills install {{ skill.slug }}</code>.</p>

  <section class="card">
    <div class="check-card-head">
      <span class="cat-icon cat-icon-accent">{{ icons.icon("file", 18) }}</span>
      <div class="check-card-title">
        <h2>SKILL.md</h2>
        <span class="check-card-sub">Source definition</span>
      </div>
    </div>
    {% if skill.body %}
      <pre class="skill-source">{{ skill.body }}</pre>
    {% else %}
      <div class="empty">{{ icons.icon("file", 28) }}<p>No SKILL.md found for this skill.</p></div>
    {% endif %}
  </section>
{% endblock %}