{% import "macros/icons.html" as icons %}

{% extends layout %}

{% block head_title_content %}Users · {{ super() }}{% endblock %}

{% macro column_switcher(label, slug) %}
<li class="w-full">
  <a href="?{{ datatable_query_parameters.toggle_column(slug) }}" class="block rounded text-sm hover:bg-slate-100 p-2">
    <div class="flex flex-row items-center justify-between select-none text-sm rounded hover:bg-slate-100">
      {{ label }}
      {% if slug in datatable_query_parameters.columns %}
        {{ icons.eye('w-3 h-3') }}
      {% else %}
        {{ icons.eye_slash('w-3 h-3') }}
      {% endif %}
    </div>
  </a>
</li>
{% endmacro %}

{% block main %}
<div class="sm:flex sm:justify-between sm:items-center mb-8">

  <div class="mb-4 sm:mb-0">
    <h1 class="text-2xl md:text-3xl text-slate-800 font-bold">Users</h1>
  </div>

  <div class="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
    <div class="relative inline-flex">
      <button
        class="btn bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600"
        aria-haspopup="true"
        _="install DropdownMenuToggle(menuId: 'user-fields-selector')"
      >
        {{ icons.ellipsis_vertical('w-4 h-4') }}
      </button>
      <div
        id="user-fields-selector"
        class="origin-top-right z-10 absolute top-full right-0 bg-white focus:outline-none mt-1 transition ease-out duration-200 transform hidden"
        hx-boost="true"
        hx-target="#main"
      >
          <ul class="bg-white rounded shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none w-56 p-1">
            {% for column in columns %}
              {{ column_switcher(column.title, column.slug) }}
            {% endfor %}
          </ul>
      </div>
    </div>
    <a
      href="{{ url_for('dashboard.users:create') }}"
      class="btn bg-primary-500 hover:bg-primary-600 text-white"
      hx-boost="true"
      hx-target="#modal"
      _="install OpenModal"
    >
      {{ icons.plus('w-4 h-4') }}
      <span class="hidden sm:block ml-2">Create User</span>
    </a>
  </div>

</div>
{% include "admin/users/table.html" %}
{% endblock %}
