{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Playbooks - Gvelo Enterprise Platform{% endblock %}
{% block body_class %}operational-page ops-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/operational-experience.css">
{% endblock %}
{% block content %}
<main class="ops-shell">
    <header class="ops-header">
        <div>
            <h1>Operational Playbooks</h1>
            <div class="ops-subtitle">
                Step-by-step procedures, checklists, runbooks, and deployment validation discipline.
            </div>
        </div>
    </header>

    <section class="ops-grid">
        {% for playbook in snapshot.playbooks %}
            <div class="ops-panel">
                <h2>{{ playbook.title }}</h2>
                <div class="ops-list">
                    {% for step in playbook.steps %}
                        <div class="ops-list-item">{{ loop.index }}. {{ step }}</div>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </section>
</main>
{% endblock %}