<% content_for :title, 'Users' %>

<div class="min-h-content w-full my-5">
  <h1 class="text-3xl font-bold mb-6">Users management</h1>
  <%= render 'settings/navigation' %>

  <div class="flex flex-col lg:flex-row w-full my-10 space-x-4">
    <div class="overflow-x-auto w-10/12 mx-auto">
      <button class="btn" onclick="create_user.showModal()">Add new user</button>
      <table class="table w-full">
        <thead>
          <tr>
            <th>Email</th>
            <th>Points</th>
            <th>Created at</th>
          </tr>
        </thead>
        <tbody>
          <% @users.each do |user| %>
            <tr>
              <td>
                <div>
                  <%= link_to user.email, edit_settings_user_path(user), class: 'font-bold underline hover:no-underline' %>
                </div>
              </td>
              <td>
                <%= number_with_delimiter user.points_count %>
              </td>
              <td>
                <%= human_datetime(user.created_at) %>
              </td>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
  </div>
</div>

<dialog id="create_user" class="modal">
  <div class="modal-box">
    <h2 class="text-2xl font-bold">Create a new user!</h1>
    <%= form_for :user, url: settings_users_path, method: :post, data: { turbo_method: :post, turbo: false } do |f| %>
      <div class="form-control">
        <%= f.label :email do %>
          Email
        <% end %>
        <%= f.email_field :email, value: '', class: "input input-bordered" %>
      </div>
      <div class="form-control mt-5">
        <%= f.label :password do %>
          Password
        <% end %>
        <%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: "input input-bordered", minlength: 6 %>
      </div>
      <div class="form-control mt-5">
        <%= f.submit "Create", class: "btn btn-primary" %>
      </div>
    <% end %>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</dialog>
