labelmaker/lib/labelmaker_web/controllers/labels_html/index.html.heex

<div class="max-w-6xl mx-auto p-6">
  <div class="flex justify-between items-center mb-6">
    <h1 class="text-4xl font-bold text-primary">Generated Labels</h1>
    <a href={~p"/"} class="text-primary hover:underline">← Back to Home</a>
  </div>

  <%= if @total_count == 0 do %>
    <div class="text-center py-12">
      <p class="text-xl text-gray-600 dark:text-gray-400 mb-4">
        No labels generated yet.
      </p>
      <a
        href={~p"/"}
        class="inline-block bg-primary text-fg-light px-4 py-2 rounded hover:bg-highlight focus:ring-fg-light"
      >
        Create Your First Label
      </a>
    </div>
  <% else %>
    <div class="mb-4 flex justify-between items-center">
      <div class="text-gray-600 dark:text-gray-400">
        Showing <%= (@page - 1) * @per_page + 1 %>-<%= min(@page * @per_page, @total_count) %> of <%= @total_count %> labels
      </div>
      <%= if @total_pages > 1 do %>
        <div class="text-sm text-gray-600 dark:text-gray-400">
          Page <%= @page %> of <%= @total_pages %>
        </div>
      <% end %>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <%= for label <- @labels do %>
        <div class="border border-gray-300 dark:border-gray-600 rounded-lg p-4 bg-secondary-light dark:bg-secondary-dark">
          <div class="mb-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded flex items-center justify-center p-4 min-h-[150px]">
            <img
              src={label.url}
              alt="Label image"
              class="max-w-full max-h-[200px] object-contain"
            />
          </div>

          <div class="space-y-2 text-sm">
            <div class="flex justify-between">
              <span class="text-gray-600 dark:text-gray-400">Size:</span>
              <span class="font-medium text-fg-light dark:text-fg-dark">
                <%= format_size(label.size) %>
              </span>
            </div>

            <div class="flex justify-between">
              <span class="text-gray-600 dark:text-gray-400">Modified:</span>
              <span class="font-medium text-fg-light dark:text-fg-dark text-xs">
                <%= format_datetime(label.modified) %>
              </span>
            </div>

            <div class="pt-2 flex gap-2">
              <a
                href={label.url}
                target="_blank"
                class="flex-1 text-center bg-primary text-fg-light px-3 py-2 rounded text-sm hover:bg-highlight"
              >
                View Full Size
              </a>
            </div>

            <div class="pt-1">
              <input
                type="text"
                readonly
                value={label.url}
                class="w-full text-xs px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-fg-light dark:text-fg-dark"
                onclick="this.select()"
              />
            </div>
          </div>
        </div>
      <% end %>
    </div>

    <%= if @total_pages > 1 do %>
      <div class="mt-8 flex justify-center items-center gap-2">
        <%= if @page > 1 do %>
          <a
            href={~p"/labels?page=#{@page - 1}"}
            class="px-4 py-2 bg-secondary-light dark:bg-secondary-dark border border-gray-300 dark:border-gray-600 rounded text-fg-light dark:text-fg-dark hover:bg-primary hover:text-white transition"
          >
            ← Previous
          </a>
        <% else %>
          <span class="px-4 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-400 dark:text-gray-600 cursor-not-allowed">
            ← Previous
          </span>
        <% end %>

        <div class="flex gap-1">
          <%= for page_num <- pagination_range(@page, @total_pages) do %>
            <%= if page_num == :ellipsis do %>
              <span class="px-3 py-2 text-gray-400 dark:text-gray-600">
                ...
              </span>
            <% else %>
              <%= if page_num == @page do %>
                <span class="px-3 py-2 bg-primary text-white rounded font-bold">
                  <%= page_num %>
                </span>
              <% else %>
                <a
                  href={~p"/labels?page=#{page_num}"}
                  class="px-3 py-2 bg-secondary-light dark:bg-secondary-dark border border-gray-300 dark:border-gray-600 rounded text-fg-light dark:text-fg-dark hover:bg-primary hover:text-white transition"
                >
                  <%= page_num %>
                </a>
              <% end %>
            <% end %>
          <% end %>
        </div>

        <%= if @page < @total_pages do %>
          <a
            href={~p"/labels?page=#{@page + 1}"}
            class="px-4 py-2 bg-secondary-light dark:bg-secondary-dark border border-gray-300 dark:border-gray-600 rounded text-fg-light dark:text-fg-dark hover:bg-primary hover:text-white transition"
          >
            Next →
          </a>
        <% else %>
          <span class="px-4 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded text-gray-400 dark:text-gray-600 cursor-not-allowed">
            Next →
          </span>
        <% end %>
      </div>
    <% end %>
  <% end %>
</div>