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

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

{% block content %}
{% if is_guest_browse %}
  {% include "partials/guest_auth_banner.html" %}
{% endif %}
<div 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="hg-page-header mb-3" data-testid="skill-header">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
            <div class="flex-grow-1 min-w-0">
                <h1 class="hg-page-title d-flex align-items-center gap-2 mb-1">
                    <i class="fa-solid fa-hand-holding-magic hg-page-title-icon text-primary" aria-hidden="true"></i>
                    <span data-testid="skill-title">{{ skill.title }}</span>
                </h1>
                <p class="text-muted small mb-1">
                    {% 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 %}
                </p>
                <p class="text-muted small mb-0">
                    <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>
            <div role="toolbar" aria-label="Skill actions" class="d-flex flex-wrap gap-2 align-items-center flex-shrink-0">
            {% if can_edit %}
                <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>
            {% elif can_submit_pip %}
                <a href="{% url 'pip_create' %}?playbook={{ playbook.pk }}"
                   class="btn btn-primary"
                   data-testid="skill-submit-pip-btn"
                   data-bs-toggle="tooltip"
                   title="Propose changes to this Released playbook">
                    <i class="fa-solid fa-lightbulb"></i> Submit PIP
                </a>
            {% endif %}
            {% include "partials/copy_prompt/button.html" with copy_prompt_text=copy_prompt_text text_testid=copy_prompt_text_testid %}
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <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 mb-0">No content yet.</p>
                    {% endif %}
                </div>
            </div>
        </div>

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

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fa-solid fa-book-sparkles"></i> Playbook</h5>
                </div>
                <div class="card-body">
                    <h6 class="card-title mb-1">{{ playbook.name }}</h6>
                    <p class="card-text small text-muted mb-2">v{{ playbook.version }}</p>
                    <a href="{% url 'playbook_detail' pk=playbook.pk %}"
                       class="btn btn-sm btn-outline-primary">
                        <i class="fa-solid fa-arrow-right"></i> View Playbook
                    </a>
                </div>
            </div>

            <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 mm-view-rail-scroll" data-testid="activities-section">
                    {% if activities %}
                    <ul class="list-group list-group-flush">
                        {% for act in activities %}
                        <li class="list-group-item px-0">
                            <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 d-block ms-3">
                                <i class="fa-solid fa-diagram-project"></i> {{ act.workflow.name }}
                            </small>
                        </li>
                        {% endfor %}
                    </ul>
                    {% else %}
                    <p class="text-muted mb-0">No activities are currently linked to this skill.</p>
                    {% endif %}
                </div>
            </div>
        </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 %}