{% extends "base.html" %}
{% block title %}Teams — Fossilrepo{% endblock %}

{% block content %}
<div class="mb-6">
  <a href="{% url 'organization:settings' %}" class="text-sm text-brand-light hover:text-brand">&larr; Back to Settings</a>
</div>

<div class="md:flex md:items-center md:justify-between mb-6">
  <h1 class="text-2xl font-bold text-gray-100">Teams</h1>
  {% if perms.organization.add_team %}
  <a href="{% url 'organization:team_create' %}"
     class="mt-4 md:mt-0 inline-flex items-center rounded-md bg-brand px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-hover">
    New Team
  </a>
  {% endif %}
</div>

<div class="mb-4">
  <input type="search"
         name="search"
         value="{{ search }}"
         placeholder="Search teams..."
         class="w-full max-w-md rounded-md border-gray-700 bg-gray-800 text-gray-100 shadow-sm focus:border-brand focus:ring-brand sm:text-sm"
         hx-get="{% url 'organization:team_list' %}"
         hx-trigger="input changed delay:300ms, search"
         hx-target="#team-table"
         hx-swap="outerHTML"
         hx-push-url="true" />
</div>

{% include "organization/partials/team_table.html" %}
{% include "includes/_pagination.html" %}
{% endblock %}