{% extends "base.html" %}
{% load scoped_tags %}

{% block title %}Teams{% endblock %}
{% block page_title %}Teams{% endblock %}
{% block page_subtitle %}Scopes, membership, and sharing boundaries (Layer 4){% endblock %}
{% block layer_indicator %}L4 Tenancy{% endblock %}

{% block content %}
{% if teams %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {% for team in teams %}
  <a href="{% url 'teams_detail' team.id %}" class="bg-white rounded-xl border border-slate-200 shadow-sm p-5 hover:border-brand-300 transition-colors">
    <div class="flex items-center justify-between mb-3">
      <h3 class="text-sm font-semibold text-slate-900">{{ team.name }}</h3>
      {% if team.is_owner %}
      <span class="text-xs text-green-600 font-medium">Owner</span>
      {% endif %}
    </div>
    <p class="text-xs text-slate-500 mb-4">{{ team.description|default:"No description"|truncatewords:15 }}</p>
    <div class="flex items-center gap-4 text-xs text-slate-400">
      <span>{{ team.member_count }} member{{ team.member_count|pluralize }}</span>
      <span>{{ team.service_count }} service{{ team.service_count|pluralize }}</span>
    </div>
  </a>
  {% endfor %}
</div>
{% else %}
{% include "components/_empty_state.html" with title="No teams" message="You're not a member of any teams yet." %}
{% endif %}
{% endblock %}