{% extends "base.html" %}
{% load static %}
{% load markdown_filters %}

{% block title %}{{ skill.title }} - {{ playbook.name }}{% endblock %}

{% block content %}
<div class="container mt-4" data-testid="skill-detail">
    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'playbook_list' %}">Playbooks</a></li>
            <li class="breadcrumb-item"><a href="{% url 'playbook_detail' pk=playbook.pk %}">{{ playbook.name }}</a></li>
            <li class="breadcrumb-item"><a href="{% url 'skill_list_playbook' playbook_pk=playbook.pk %}">Skills</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ skill.title }}</li>
        </ol>
    </nav>

    <!-- Skill header -->
    <div class="d-flex justify-content-between align-items-start mb-4" data-testid="skill-header">
        <div>
            <h2 data-testid="skill-title">
                <i class="fa-solid fa-hand-holding-magic"></i> {{ skill.title }}
            </h2>
            <div class="mb-2">
                {% if skill.capability_domain %}
                <span class="badge bg-info text-dark me-1" data-testid="domain-badge">
                    <i class="fa-solid fa-cubes"></i> {{ skill.capability_domain }}
                </span>
                {% endif %}
                {% if skill.technology_stack %}
                <span class="badge bg-success me-1" data-testid="stack-badge">
                    <i class="fa-solid fa-layer-group"></i> {{ skill.technology_stack }}
                </span>
                {% endif %}
            </div>
            <p class="text-muted small">
                <i class="fa-solid fa-book-sparkles"></i> {{ playbook.name }}
                &middot;
                <i class="fa-solid fa-clock"></i> Updated {{ skill.updated_at|timesince }} ago
            </p>
        </div>
        {% if can_edit %}
        <div class="btn-group">
            <a href="{% url 'skill_edit' playbook_pk=playbook.pk skill_pk=skill.pk %}"
               class="btn btn-primary"
               data-testid="edit-skill-btn"
               data-bs-toggle="tooltip"
               title="Edit this skill's title, metadata, and content">
                <i class="fa-solid fa-edit"></i> Edit Skill
            </a>
            <button type="button"
                    class="btn btn-outline-danger"
                    data-testid="delete-skill-btn"
                    data-bs-toggle="tooltip"
                    title="Delete this skill permanently"
                    hx-get="{% url 'skill_delete_confirm' playbook_pk=playbook.pk skill_pk=skill.pk %}"
                    hx-target="#skill-delete-modal-container"
                    hx-swap="innerHTML">
                <i class="fa-solid fa-trash"></i> Delete
            </button>
        </div>
        {% endif %}
    </div>

    <!-- Skill content -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="fa-solid fa-file-lines"></i> Content</h5>
        </div>
        <div class="card-body markdown-content" data-testid="skill-content">
            {% if skill.content %}
                {{ skill.content|markdown }}
            {% else %}
                <p class="text-muted">No content yet.</p>
            {% endif %}
        </div>
    </div>

    <!-- Activities referencing this skill -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">
                <i class="fa-solid fa-list-check"></i> Activities Using This Skill
                <span class="badge bg-secondary ms-2" data-testid="activity-count">{{ activities|length }}</span>
            </h5>
        </div>
        <div class="card-body" data-testid="activities-section">
            {% if activities %}
            <ul class="list-group list-group-flush">
                {% for act in activities %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <div>
                        <a href="{% url 'activity_detail' playbook_pk=playbook.pk workflow_pk=act.workflow.pk activity_pk=act.pk %}">
                            <i class="fa-solid fa-list-check text-primary"></i> {{ act.name }}
                        </a>
                        <small class="text-muted ms-2">
                            <i class="fa-solid fa-diagram-project"></i> {{ act.workflow.name }}
                        </small>
                    </div>
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <p class="text-muted mb-0">No activities are currently linked to this skill.</p>
            {% endif %}
        </div>
    </div>

    <!-- Metadata -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="fa-solid fa-info-circle"></i> Metadata</h5>
        </div>
        <div class="card-body">
            <dl class="row mb-0">
                <dt class="col-sm-3">Capability Domain:</dt>
                <dd class="col-sm-9">{{ skill.capability_domain|default:"—" }}</dd>
                <dt class="col-sm-3">Technology Stack:</dt>
                <dd class="col-sm-9">{{ skill.technology_stack|default:"—" }}</dd>
                <dt class="col-sm-3">Created:</dt>
                <dd class="col-sm-9">{{ skill.created_at|timesince }} ago</dd>
                <dt class="col-sm-3">Updated:</dt>
                <dd class="col-sm-9">{{ skill.updated_at|timesince }} ago</dd>
            </dl>
        </div>
    </div>
</div>

<div id="skill-delete-modal-container"></div>

<style>
.markdown-content { line-height: 1.7; }
.markdown-content h1, .markdown-content h2, .markdown-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
.markdown-content pre { background: #f8f9fa; padding: 1rem; border-radius: 4px; }
.markdown-content code { background: #f8f9fa; padding: 0.2em 0.4em; border-radius: 3px; }
.markdown-content pre code { background: none; padding: 0; }
</style>

<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true, theme: 'default', securityLevel: 'loose' });</script>
{% endblock %}