{% extends 'core/base.html' %}
{% load i18n %}
{% block content %}
<a class="btn btn-sm btn-outline-secondary mb-3" href="{% url 'settings' %}">← {% trans "Settings" %}</a>
<div class="d-flex justify-content-between align-items-start gap-3 mb-3">
  <div>
    <h1 class="h3 mb-1">{% trans "Team" %} {{ team.name }}</h1>
    <div class="text-muted">{% trans "Team tag:" %} <a href="/?tag={{ team.slug }}">#{{ team.slug }}</a></div>
  </div>
  <a class="btn btn-dark" href="/?tag={{ team.slug }}">{% blocktrans with slug=team.slug %}Create item with #{{ slug }}{% endblocktrans %}</a>
</div>
<div class="row g-4">
  <section class="col-lg-4">
    <div class="card item-card shadow-sm mb-3"><div class="card-body">
      <h2 class="h5">{% trans "Members" %}</h2>
      <div class="vstack gap-2">
        {% for m in memberships %}<div class="border rounded p-2"><strong>{{ m.user.get_full_name|default:m.user.username }}</strong><div class="small text-muted">{{ m.get_role_display }}</div></div>{% endfor %}
      </div>
    </div></div>
    {% if membership.role == 'owner' or membership.role == 'admin' %}
    <div class="card item-card shadow-sm"><div class="card-body">
      <h2 class="h5">{% trans "Invite" %}</h2>
      <form method="post" class="vstack gap-2">
        {% csrf_token %}
        <div>{{ invite_form.email }}</div>
        <button class="btn btn-dark">{% trans "Create invitation link" %}</button>
      </form>
      <div class="small text-muted mt-3">{% trans "Open invitations:" %}</div>
      {% for invite in invites %}<div class="small border rounded p-2 mt-2">{{ invite.email }}<br><code>{{ request.scheme }}://{{ request.get_host }}{% url 'team_accept_invite' invite.token %}</code></div>{% empty %}<div class="small text-muted">{% trans "No open invitations." %}</div>{% endfor %}
    </div></div>
    {% endif %}
  </section>
  <section class="col-lg-8">
    <h2 class="h5 mb-3">{% trans "Team items" %}</h2>
    <div class="vstack gap-3">
      {% for item in items %}{% include 'core/_item.html' %}{% empty %}<div class="text-muted">{% blocktrans with slug=team.slug %}No team items yet. Create something with #{{ slug }}.{% endblocktrans %}</div>{% endfor %}
    </div>
  </section>
</div>
{% endblock %}