{# templates/methodology/partials/my_playbooks_section.html #}
{# My Playbooks section partial for dashboard #}

<div class="col-lg-6 mb-4" data-testid="my-playbooks-section">
    <div class="card h-100">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">
                <i class="fas fa-book-sparkles text-primary"></i>
                My Playbooks
            </h5>
            <small class="text-muted">{{ playbook_count }} recent</small>
        </div>
        <div class="card-body">
            {% if recent_playbooks %}
                <div class="row">
                    {% for playbook in recent_playbooks %}
                    <div class="col-12 mb-3">
                        <div class="d-flex justify-content-between align-items-start gap-3 border-bottom pb-2 dashboard-playbook-item"
                             data-testid="playbook-item-{{ forloop.counter }}">
                            <div class="flex-grow-1 min-w-0">
                                <h6 class="mb-1 text-truncate">
                                    <a href="{% url 'playbook_detail' playbook.id %}" 
                                       class="text-decoration-none"
                                       data-testid="playbook-link-{{ forloop.counter }}">
                                        {{ playbook.name }}
                                    </a>
                                </h6>
                                <small class="text-muted">
                                    <i class="fas fa-folder"></i> {{ playbook.get_category_display }}
                                    <span class="mx-2">•</span>
                                    <i class="fas fa-code-branch"></i> v{{ playbook.version }}
                                </small>
                                {% if playbook.description %}
                                <p class="text-muted small mb-0 mt-1 dashboard-playbook-description">{{ playbook.description|truncatechars:80 }}</p>
                                {% endif %}
                            </div>
                            <div class="text-end flex-shrink-0">
                                <span class="badge bg-{{ playbook.status|yesno:'success,secondary' }}">
                                    {{ playbook.get_status_display }}
                                </span>
                                <br>
                                <small class="text-muted">
                                    {{ playbook.updated_at|date:"M d, H:i" }}
                                </small>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="text-center mt-3">
                    <a href="/playbooks/" class="btn btn-outline-primary btn-sm" data-testid="view-all-playbooks">
                        <i class="fas fa-list"></i> View All Playbooks
                    </a>
                </div>
            {% else %}
                <div class="text-center py-4" data-testid="no-playbooks">
                    <i class="fas fa-book-sparkles fa-3x text-muted mb-3"></i>
                    <h6 class="text-muted">No playbooks yet</h6>
                    <p class="text-muted small">Create your first playbook to get started</p>
                    <a href="{% url 'playbook_create' %}" class="btn btn-primary" data-testid="create-first-playbook">
                        <i class="fas fa-plus-circle"></i> Create Playbook
                    </a>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
    .dashboard-playbook-item {
        overflow: hidden;
    }

    .dashboard-playbook-description {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
        word-break: break-word;
        max-width: 100%;
    }
</style>