{% extends "base.html" %}
{% block content %}
<div class="max-w-4xl">
  <div class="card" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;">
    <div>
      <h1 style="margin:0;">My Teams</h1>
      <p class="text-muted" style="margin:0.25rem 0 0;">Collaborate with your team on shared forms.</p>
    </div>
    <a href="{{ url_for('teams.create_team_view') }}" class="btn">+ New Team</a>
  </div>

  {% if teams %}
  <div class="grid md:grid-cols-2 gap-4">
    {% for team in teams %}
    <div class="card">
      <div style="display:flex;justify-content:space-between;align-items:start;">
        <div>
          <h2 style="margin:0 0 0.25rem;">{{ team.name }}</h2>
          <p class="text-muted" style="margin:0;">
            <span class="badge">{{ team.role }}</span>
            {% if team.tier == 'teams_plus' %}
            <span class="badge badge-warning">Teams Plus</span>
            {% elif team.tier == 'teams' %}
            <span class="badge badge-secondary">Teams</span>
            {% endif %}
          </p>
        </div>
        <a href="{{ url_for('teams.manage_team', team_id=team.id) }}" class="btn btn-sm btn-outline">Manage</a>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="card" style="text-align:center;padding:3rem;">
    <h2>No teams yet</h2>
    <p class="text-muted">Create a team to collaborate on shared forms with your team members.</p>
    <a href="{{ url_for('teams.create_team_view') }}" class="btn">+ Create Your First Team</a>
  </div>
  {% endif %}
</div>
{% endblock %}