Diffuser/lib/diffuser_web/live/prompt_request_live/index.html.heex

<%= if @live_action in [:new, :edit] do %>
  <.modal return_to={Routes.prompt_request_index_path(@socket, :index)}>
    <.live_component
      module={DiffuserWeb.PromptRequestLive.FormComponent}
      id={@prompt_request.id || :new}
      title={@page_title}
      action={@live_action}
      prompt_request={@prompt_request}
      user={@user}}
    />
  </.modal>
<% end %>

<%= if @user do %>
<div class="p-4 max-w-7xl mx-auto bg-gray">
  <div class="collapse">
    <input type="checkbox" />
    <div class="collapse-title text-xl btn btn-outline">
      Info
    </div>
    <div class="collapse-content prose">
      <h3 class="pt-4">IP Address: <%= @user.ip_address %></h3>
      <p>Yes. Your server, Silas, will keep a record of which IP sent what.</p>

      <h3>Username: <%= display_name(@user) %></h3>
      <.form let={f} for={@user_changeset} phx-submit="update_user">
        <div class="form-control w-full">
          <label class="label">
            <span class="label-text">Optionally set your own username. Might I recommend <%= fake_name() %>?</span>
          </label>
        <%= text_input f, :username, class: "input input-bordered input-secondary" %>
        <%= error_tag f, :username %>

        <%= submit "Save Username", class: "btn" %>
        </div>
      </.form>

      <h3>Code: <%= if Map.get(@user, :code, nil), do: @user.code, else: "Not set" %></h3>
      <.form let={f} for={@user_changeset} phx-submit="update_user">
        <div class="form-control w-full">
          <label class="label">
            <span class="label-text">You'll need a code from Silas to use the generator.</span>
          </label>
          <%= text_input f, :code, class: "input input-bordered input-secondary" %>
          <%= error_tag f, :code %>
          <%= submit "Save Code", class: "btn" %>
        </div>
      </.form>
    </div>
  </div>
</div>
<% end %>
<div class="p-4 max-w-7xl mx-auto grid place-items-center">
  <form phx-change="search" style="width: 100%;">
    <%= text_input :search, :query, placeholder: "Search for image by prompt", "phx-debounce": "1000", class: "input w-full center-placeholder" %>
  </form>
  <div class="pt-4" style="width: 100%; text-align: center;"><%= display_current_filters(@params) %></div>
</div>

<div class="max-w-7xl mx-auto">
  <div class="p-4 flex space-x-2 justify-center">
    <div>
      <button class="btn btn-outline btn-xs sm:btn-sm md:btn-md lg:btn-lg" style="min-height: 45px"><%= live_patch "New Prompt", to: Routes.prompt_request_index_path(@socket, :new), class: "pagination-link" %></button>
    </div>
    <div>
      <button phx-click="order_by" phx-value-votes="desc" class="btn btn-xs sm:btn-sm md:btn-md lg:btn-lg btn-outline" style="min-height: 45px;">Most Votes</button>
    </div>
        <div>
      <button phx-click="clear" class="btn btn-xs sm:btn-sm md:btn-md lg:btn-lg btn-outline" style="min-height: 45px;">Reset Filter</button>
    </div>
  </div>

  <div class="grid gap-1 md:gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
    <%= for prompt_request <- @page.entries do %>
      <div class="card w-90 bg-gray shadow-xl text-primary-content">
        <% result = if prompt_request.images |> length > 0, do: prompt_request.images |> List.first() %>
        <%= if result do %>
          <figure><img src={"#{Diffuser.Uploaders.Image.url({result.image, result})}"} /></figure>
        <% else %>
          <figure><%= prompt_request.status %>, <%= prompt_request.completed_steps %>/<%= prompt_request.steps %></figure>
        <% end %>
        <div class="card-body prose">
          <h2 class="card-title"><%= prompt_request.prompt %></h2>
          <p>Steps: <%= prompt_request.steps %>, Guidance Scale: <%= prompt_request.guidance_scale %><br />
            <%= if prompt_request.status == "finished" do %>
              <%= total_time(prompt_request) %><br />
            <% end %>

            <%= case prompt_request.user do %>
              <%= %NotLoaded{} -> %>
              <% user -> %>
                <%= if user do %>
                  Created by: <%= display_name(user) %> <%= if @is_admin, do: "(#{user.ip_address}, #{prompt_request.code})" %><br />
                <% end %>
            <% end %>

            Votes: <%= prompt_request.votes |> Enum.count() %> <br />

            <%= if has_voted(@user, prompt_request) do %>
              <% else %>
                <%= link "Upvote", to: "#", phx_click: "upvote", phx_value_id: prompt_request.id %>
            <% end %>

          </p>

          <%= if prompt_request.status == "finished" and (@is_admin or owns_prompt_request(@user, prompt_request)) do %>
            <div class="card-actions justify-end">
              <%= link "Delete", to: "#", phx_click: "delete", phx_value_id: prompt_request.id, data: [confirm: "Are you sure?"] %>
            </div>
          <% end %>
        </div>
      </div>
    <% end %>
  </div>
</div>

<div class="p-4 mx-auto grid place-items-center">
  <span>Total results: <%= @page.total_entries %></span>
</div>

<div class="btn-group p-4 grid grid-cols-3 mx-auto pagination-btns">
  <%= if @page.total_pages > 1 do %>

    <%= if @page.page_number > 1 do %>
      <%= link "<< Prev", to: "#", class: "btn btn-outline", phx_click: "go_to", phx_value_page: @page.page_number - 1 %>
      <% else %>
       <div class="btn btn-outline btn-disabled"></div>
    <% end %>

      <form phx-change="go_to">
      <%= select :jump, :page, 1..@page.total_pages, class: "select w-full max-w-xs", selected: @page.page_number %>
      </form>

    <%= if @page.page_number < @page.total_pages do %>
      <%= link "Next >>", to: "#", class: "btn btn-outline", phx_click: "go_to", phx_value_page: @page.page_number + 1 %>
    <% end %>
  <% end %>
</div>