{% extends 'core/base.html' %}
{% load i18n %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <div>
    <h1 class="h3 mb-1">{% trans "Teams" %}</h1>
    <div class="text-muted">{% trans "All teams you belong to." %}</div>
  </div>
  <a class="btn btn-sm btn-outline-secondary" href="/">← {% trans "back" %}</a>
</div>

<div class="row g-4">
  <section class="col-lg-4 order-lg-2">
    <div class="card item-card shadow-sm"><div class="card-body">
      <h2 class="h5 mb-3">{% trans "Create team" %}</h2>
      <form method="post" class="vstack gap-3">
        {% csrf_token %}
        <div><label class="form-label">{% trans "Team name" %}</label>{{ team_form.name }}</div>
        <div><label class="form-label">{% trans "Team tag" %}</label>{{ team_form.slug }}<div class="small text-muted mt-1">{% trans "This tag automatically turns items into team items, e.g. #my2dos." %}</div></div>
        <button class="btn btn-dark">{% trans "Create team" %}</button>
      </form>
    </div></div>
  </section>

  <section class="col-lg-8">
    <div class="vstack gap-3">
      {% for s in stats %}
        <article class="card item-card shadow-sm"><div class="card-body">
          <div class="d-flex justify-content-between align-items-start gap-3 mb-2">
            <div>
              <h2 class="h5 mb-1"><a class="text-decoration-none" href="{% url 'team_detail' s.team.id %}">{{ s.team.name }}</a></h2>
              <div class="small text-muted">#{{ s.team.slug }} · {{ s.members_count }} {% trans "members" %}</div>
            </div>
            <a class="btn btn-sm btn-outline-primary" href="{% url 'team_detail' s.team.id %}">{% trans "Open team" %}</a>
          </div>
          <div class="d-flex flex-wrap gap-2 mb-3">
            <span class="badge text-bg-light">{{ s.items_count }} {% trans "items" %}</span>
            <span class="badge text-bg-warning">{{ s.open_todos_count }} {% trans "open tasks" %}</span>
          </div>
          <div class="vstack gap-2">
            {% for item in s.recent_items %}
              <a class="border rounded p-2 text-decoration-none text-dark" href="{{ item.get_absolute_url }}">
                <span class="badge text-bg-light me-1">{{ item.get_kind_display }}</span>{{ item.content|truncatechars:120 }}
              </a>
            {% empty %}
              <div class="text-muted small">{% trans "No team items yet." %}</div>
            {% endfor %}
          </div>
        </div></article>
      {% empty %}
        <div class="card item-card shadow-sm"><div class="card-body text-muted">{% trans "You are not a member of any team yet." %}</div></div>
      {% endfor %}
    </div>
  </section>
</div>
{% endblock %}