{% extends "docs/base.html" %}

{% block docs_content %}
  <div class="mb-4">
    <h1 class="h3 mb-1">{{ page.heading }}</h1>
    <p class="text-muted mb-0">{{ page.summary }}</p>
  </div>

  <div class="card shadow-sm mb-4">
    <div class="card-body">
      <h2 class="h6 text-uppercase text-muted">Commands</h2>
      <ul class="mb-0">
        {% for command in page.commands %}
          <li><code>{{ command }}</code></li>
        {% endfor %}
      </ul>
    </div>
  </div>

  <div class="card shadow-sm mb-4">
    <div class="card-body">
      <h2 class="h6 text-uppercase text-muted">Example</h2>
      <div class="bg-light border rounded p-3">
        <pre class="mb-0"><code>{{ page.example }}</code></pre>
      </div>
    </div>
  </div>

  <div class="card shadow-sm mb-4">
    <div class="card-body">
      <h2 class="h6 text-uppercase text-muted">Help Output</h2>
      <div class="bg-light border rounded p-3">
        <pre class="mb-0"><code>{{ page.help_output }}</code></pre>
      </div>
    </div>
  </div>

  <div class="card shadow-sm">
    <div class="card-body">
      <h2 class="h6 text-uppercase text-muted">Notes</h2>
      <ul class="mb-0">
        {% for item in page.notes %}
          <li>{{ item }}</li>
        {% endfor %}
      </ul>
    </div>
  </div>
{% endblock %}