  <% content_for :title, "Benutzerliste" %>
<h1 class="text-4xl font-bold text-hsrm-gray">Benutzerliste</h1>
<div class="flex items-center justify-between py-4">
  <!-- <div>
      <div class="mt-6 md:flex md:items-center md:justify-between">
        <div class="relative flex items-center mt-4 md:mt-0">
          <span class="absolute">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mx-3 text-gray-400 dark:text-gray-600">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
            </svg>
          </span>
          <input type="text" placeholder="Search" class="block w-full py-1.5 pr-5 text-gray-700 bg-white border border-gray-200 rounded-lg md:w-80 placeholder-gray-400/70 pl-11 rtl:pr-11 rtl:pl-5 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
        </div>
        <fieldset class="inline-flex -space-x-px overflow-hidden rounded-md border bg-white shadow-sm">
          <legend class="sr-only">Color</legend>
          <div>
            <label for="ColorBlack" class="inline-block selecet:bg-green-500 px-4 py-2 text-sm font-medium uppercase text-gray-800 hover:bg-green-300 focus:relative">
              <input type="radio" name="ColorOption" value="ColorBlack" id="ColorBlack" class="sr-only" checked />
              <p class="text-sm font-medium">Alle</p>
            </label>
          </div>
          <div>
            <label for="ColorBlack" class="inline-block selecet:bg-green-500 px-4 py-2 text-sm font-medium uppercase text-gray-800 hover:bg-green-300 focus:relative">
              <input type="radio" name="ColorOption" value="ColorBlack" id="ColorBlack" class="sr-only" checked />
              <p class="text-sm font-medium">User</p>
            </label>
          </div>
          <div>
            <label for="ColorRed" class="inline-block px-4 py-2 text-sm font-medium uppercase text-gray-800 hover:bg-yellow-300 focus:relative">
              <input type="radio" name="ColorOption" value="ColorRed" id="ColorRed" class="sr-only" />
              <p class="text-sm font-medium">Operator</p>
            </label>
          </div>
          <div>
            <label for="ColorBlue" class="inline-block px-4 py-2 text-sm font-medium uppercase text-gray-800 hover:bg-red-300 focus:relative">
              <input type="radio" name="ColorOption" value="ColorBlue" id="ColorBlue" class="sr-only" />
              <p class="text-sm font-medium">Admin</p>
            </label>
          </div>
        </fieldset>
      </div> -->
  <%= search_form_for @q, data: { turbo_frame: :admin_users, turbo_action: 'advance' }, url: admin_users_path do |f| %>
    <%#= f.label :firstname_cont, "Vorname:" %>
    <%#= f.search_field :firstname_cont, oninput: 'this.form.requestSubmit();' %>
    <%#= f.label :lastname_cont, "Nachname:" %>
    <%#= f.search_field :lastname_cont, oninput: 'this.form.requestSubmit();' %>
    <%#= f.label :email_start, "E-Mail:" %>
    <%#= f.search_field :email_start, oninput: 'this.form.requestSubmit();' %>
    <%#= f.label :firstname_or_lastname_or_email_cont, "Suchen:" %>
    <%= f.search_field :firstname_or_lastname_or_email_cont, placeholder: "Suchen", oninput: 'this.form.requestSubmit();' %>
    <%= f.label :created_at_dategteq, "Registriert von:" %>
    <%= f.date_field :created_at_dategteq, onchange: 'this.form.requestSubmit();'  %>
    <%= f.label :created_at_datelteq, "bis:" %>
    <%= f.date_field :created_at_datelteq, onchange: 'this.form.requestSubmit();'  %>
    <%= f.label :verified_eq, "E-Mail validiert:" %>
    <%= f.select :verified_eq, [true,false], {include_blank: "alle"}, onchange: 'this.form.requestSubmit();' %>
    <%= f.label :role_eq, "Rolle:" %>
    <%#= f.collection_radio_buttons :role_eq, User::AVAILABLE_ROLES, 0,0  %>
    <%= f.select :role_eq, User.roles.keys, {include_blank: "alle"}, onchange: 'this.form.requestSubmit();' %>
    <%#= f. %>
    <%= f.submit "Filter anwenden", class: "py-2 px-3 bg-hsrm-red hover:bg-hsrm-red-light shadow-lg text-white inline-block font-medium cursor-pointer" %>
  <% end %>
</div>
<%= turbo_frame_tag "admin_users", data: { turbo_action: 'advance'} do %>
  <div class="flex justify-between items-center">
    <%== pagy_nav(@pagy) %>
    <%== pagy_info(@pagy) %>
  </div>
  <div class="min-w-full overflow-auto shadow-lg pt-2">
    <table class="w-full py-8 table-auto">
      <thead class="font-semibold tracking-wide bg-gray-200 border-b-2 border-gray-300 text text-hsrm-gray">
        <tr>
          <th class="w-1 p-2 py-3 text-center text-nowrap"><%= sort_link(@q, :id, "ID", ) %></th>
          <th class="min-w-24 p-2 py-3 text-left"><%= sort_link(@q, :firstname, "Vorname") %></th>
          <th class="min-w-24 p-2 py-3 text-left"><%= sort_link(@q, :lastname, "Nachname") %></th>
          <th class="p-2 py-3 text-left"><%= sort_link(@q, :email, "E-Mail-Adresse") %></th>
          <th class="w-1 p-2 py-3 text-right text-nowrap"><%= sort_link(@q, :customer_jobs_count, "# Jobs") %></th>
          <th class="w-1 p-2 py-3 text-center text-nowrap"><%= sort_link(@q, :created_at, "Registriert am") %></th>
          <th class="w-1 p-2 py-3 text-center"><%= sort_link(@q, :role, "Rolle") %></th>
        </tr>
      </thead>
      <tbody id='jobs' class="divide-y divivde-gray-300">
        <%= render partial: "user_tr", collection: @records, as: :user %>
      </tbody>
    </table>
  </div>
  <div class="flex justify-between items-center">
    <%== pagy_nav(@pagy) %>
    <%== pagy_info(@pagy, item_name: "Users") %>
  </div>
</div>
<% end %>
