{% load i18n %}

<h5 class="d-flex align-items-center gap-2 mb-2 mt-2">
  <span class="badge text-bg-secondary">4</span>
  <i class="mdi mdi-flask-outline"></i>
  {% trans "Demo" %}
</h5>
<div class="card mb-4">
  <div class="card-body">
    {% if setup_allow_destructive_actions %}
    {% if not all_tcs_ok %}
    <p class="text-muted small mb-3">{% trans "Available after section 3 is complete." %}</p>
    {% endif %}
    <div class="row g-3">
      <div class="col-md-4">
        <div class="card h-100 border-primary-subtle">
          <div class="card-body">
            <h6 class="card-title fw-semibold">{% trans "Starter demo" %}</h6>
            <p class="card-text text-muted small mb-3">
              {% trans "Zone Matrix + Addresses rulebooks." %}
            </p>
            <form method="post" class="m-0">
              {% csrf_token %}
              <input type="hidden" name="action" value="create_demo_starter">
              <button type="submit" class="btn btn-outline-primary btn-sm"
                      {% if not can_run_demo %}disabled{% endif %}
                      title="{% if not all_tcs_ok %}{% trans 'Complete section 3 first' %}{% endif %}">
                <i class="mdi mdi-plus me-1"></i>{% trans "Create" %}
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
    {% else %}
    <p class="text-muted small mb-0">
      {% trans "Demo actions are disabled (setup_allow_destructive_actions)." %}
    </p>
    {% endif %}
  </div>
</div>