{% extends "admin/layouts/base.html" %}
{% block title %}Plans{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <h4 class="fw-bold mb-0"><i class="bi bi-card-list me-2"></i>Subscription Plans</h4>
  <a href="{{ url_for('plans.create') }}" class="btn btn-dark btn-sm">
    <i class="bi bi-plus-lg me-1"></i>New Plan
  </a>
</div>
<div class="row g-3">
  {% for plan in plans %}
  <div class="col-md-4">
    <div class="card shadow-sm h-100 {{ '' if plan.is_active else 'opacity-50' }}">
      <div class="card-header d-flex justify-content-between align-items-center">
        <strong>{{ plan.name }}</strong>
        <span class="badge {{ 'bg-success' if plan.is_active else 'bg-secondary' }}">
          {{ 'Active' if plan.is_active else 'Inactive' }}
        </span>
      </div>
      <div class="card-body">
        <h3 class="fw-bold">${{ "%.2f"|format(plan.price_monthly) }}<small class="fs-6 text-muted">/mo</small></h3>
        <p class="text-muted small mb-2">
          Staff: {{ plan.max_staff or 'Unlimited' }} &bull;
          Locations: {{ plan.max_locations or 'Unlimited' }}
        </p>
        <div class="mb-3">
          {% for flag, enabled in (plan.features_json or {}).items() %}
            <span class="badge {{ 'bg-primary' if enabled else 'bg-light text-muted' }} me-1 mb-1" style="font-size:0.7rem;">
              {{ flag }}
            </span>
          {% endfor %}
        </div>
      </div>
      <div class="card-footer d-flex gap-2">
        <a href="{{ url_for('plans.edit', plan_id=plan.id) }}" class="btn btn-outline-secondary btn-sm">Edit</a>
        <form method="POST" action="{{ url_for('plans.toggle_active', plan_id=plan.id) }}" class="d-inline"
              onsubmit="return confirm('Toggle plan status?')">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button class="btn btn-outline-{{ 'danger' if plan.is_active else 'success' }} btn-sm">
            {{ 'Deactivate' if plan.is_active else 'Activate' }}
          </button>
        </form>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}