{% extends "base.html" %}
{% block title %}Members — 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">Members</h1>
  <div class="mt-4 md:mt-0 flex gap-3">
    {% if perms.organization.change_organization or user.is_superuser %}
    <a href="{% url 'organization:user_create' %}"
       class="inline-flex items-center rounded-md bg-brand px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-hover">
      Create User
    </a>
    {% endif %}
    {% if perms.organization.add_organizationmember %}
    <a href="{% url 'organization:member_add' %}"
       class="inline-flex items-center rounded-md bg-gray-700 px-4 py-2 text-sm font-semibold text-gray-100 shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-600">
      Add Existing Member
    </a>
    {% endif %}
  </div>
</div>

<div class="mb-4">
  <input type="search"
         name="search"
         value="{{ search }}"
         placeholder="Search members..."
         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:members' %}"
         hx-trigger="input changed delay:300ms, search"
         hx-target="#member-table"
         hx-swap="outerHTML"
         hx-push-url="true" />
</div>

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