{% extends "base.html" %}
{% block content %}
<div class="max-w-xl">
  <div class="card">
    <h1>Create a Team</h1>
    <p class="text-muted">Invite team members to collaborate on shared forms.</p>

    <form method="POST" class="mt-4">
      <div class="form-group">
        <label>Team Name</label>
        <input type="text" name="name" class="form-control" placeholder="e.g. Marketing Team" required autofocus>
      </div>

      <div style="margin-top:1.5rem;display:flex;gap:0.5rem;">
        <button type="submit" class="btn">Create Team</button>
        <a href="{{ url_for('teams.list_teams') }}" class="btn btn-outline">Cancel</a>
      </div>
    </form>
  </div>

  <div class="card" style="margin-top:1.5rem;">
    <h2>Team Tiers</h2>
    <div class="grid md:grid-cols-2 gap-4" style="margin-top:1rem;">
      <div style="border:2px solid var(--border);border-radius:8px;padding:1.5rem;">
        <h3 style="margin:0 0 0.5rem;">Teams</h3>
        <p style="font-size:1.5rem;font-weight:700;margin:0.25rem 0;">$49/mo</p>
        <ul style="margin:0.5rem 0;padding-left:1.2rem;">
          <li>Up to 5 members</li>
          <li>Unlimited sites</li>
          <li>25K submissions/mo</li>
          <li>Role-based access</li>
          <li>Team analytics</li>
        </ul>
      </div>
      <div style="border:2px solid var(--primary);border-radius:8px;padding:1.5rem;">
        <h3 style="margin:0 0 0.5rem;">Teams Plus</h3>
        <p style="font-size:1.5rem;font-weight:700;margin:0.25rem 0;">$99/mo</p>
        <ul style="margin:0.5rem 0;padding-left:1.2rem;">
          <li>Unlimited members</li>
          <li>Unlimited sites</li>
          <li>50K submissions/mo</li>
          <li>Custom branding</li>
          <li>SSO & advanced security</li>
        </ul>
      </div>
    </div>
  </div>
</div>
{% endblock %}