<PhoenixKitWeb.Components.LayoutWrapper.app_layout
  flash={@flash}
  page_title={@page_title}
  current_path={@conn.request_path}
>
  <div class="groups-overview-container max-w-6xl mx-auto px-6 py-8">
    <%!-- Page Header --%>
    <header class="mb-8">
      <h1 class="text-2xl sm:text-4xl font-bold mb-2">Publishing</h1>
      <p class="text-base sm:text-lg text-base-content/70">
        Explore our published content
      </p>
    </header>
    <%!-- Group Cards --%>
    <%= if length(@groups) > 0 do %>
      <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        <%= for group <- @groups do %>
          <article class="card bg-base-200 shadow-md hover:shadow-lg transition-shadow">
            <div class="card-body">
              <h2 class="card-title text-2xl">
                <a
                  href={group_listing_path(@current_language, group["slug"])}
                  class="hover:text-primary"
                >
                  {group["name"]}
                </a>
              </h2>

              <div class="text-sm text-base-content/70 mt-2">
                <span>{group["post_count"]} posts</span>
              </div>

              <div class="card-actions justify-end mt-4">
                <a
                  href={group_listing_path(@current_language, group["slug"])}
                  class="btn btn-sm btn-primary"
                >
                  View Posts →
                </a>
              </div>
            </div>
          </article>
        <% end %>
      </div>
    <% else %>
      <div class="alert alert-info">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          class="stroke-current shrink-0 w-6 h-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          >
          </path>
        </svg>
        <span>No groups configured yet.</span>
      </div>
    <% end %>
  </div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>
