{% extends "base.html" %}

{% block title %}Playbooks{% endblock %}

{% block content %}
{% if is_guest_browse %}
  {% include "partials/guest_auth_banner.html" %}
{% endif %}

<div class="hg-page-header mb-3" data-testid="playbooks-list-header">
  <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
    <div>
      <h1 class="hg-page-title d-flex align-items-center gap-2 mb-1">
        <i class="fa-solid fa-book-sparkles hg-page-title-icon text-primary" aria-hidden="true"></i>
        <span>Playbooks</span>
      </h1>
      <p class="text-muted small mb-0">
        {% if is_guest_browse %}
          Explore public released playbooks
        {% else %}
          Browse and manage your engineering playbooks
        {% endif %}
      </p>
    </div>
    {% if not is_guest_browse %}
    <div role="toolbar" aria-label="Playbook actions" class="d-flex flex-wrap gap-2 align-items-center">
      <a href="{% url 'playbook_create' %}"
         class="btn btn-primary"
         data-bs-toggle="tooltip"
         title="Create a new playbook">
        <i class="fa-solid fa-plus me-1"></i> Create New Playbook
      </a>
    </div>
    {% endif %}
  </div>
</div>

{% if has_playbooks %}
  <div class="row" data-testid="playbooks-list-section">
    {% for playbook in playbooks %}
      {% include "playbooks/_playbook_list_card.html" %}
    {% endfor %}
    {% for playbook in public_playbooks %}
      {% include "playbooks/_playbook_list_card.html" %}
    {% endfor %}
    {% for playbook in team_playbooks %}
      {% include "playbooks/_playbook_list_card.html" %}
    {% endfor %}
  </div>
{% else %}
  <div class="alert alert-info text-center" data-testid="playbooks-empty-state">
    <i class="fa-solid fa-info-circle fa-3x mb-3"></i>
    {% if is_guest_browse %}
      <h4>No public playbooks yet</h4>
      <p>Released public playbooks will appear here when authors share them.</p>
    {% else %}
      <h4>No playbooks yet</h4>
      <p>Create your first playbook to get started!</p>
      <a href="{% url 'playbook_create' %}" class="btn btn-primary">
        <i class="fa-solid fa-plus me-1"></i> Create New Playbook
      </a>
    {% endif %}
  </div>
{% endif %}
{% endblock %}