berrypod/lib/berrypod_web/live/admin/providers/index.html.heex

<.header>
  Providers
  <:actions>
    <div class="admin-dropdown">
      <div tabindex="0" role="button" class="admin-btn admin-btn-primary">
        <.icon name="hero-plus" class="size-4 mr-1" /> Connect provider
      </div>
      <ul tabindex="0" class="admin-dropdown-content">
        <li :for={provider <- @available_providers}>
          <.link navigate={~p"/admin/providers/new?type=#{provider.type}"}>{provider.name}</.link>
        </li>
      </ul>
    </div>
  </:actions>
</.header>

<div id="connections" phx-update="stream" class="mt-6 space-y-4">
  <div id="connections-empty" class="hidden only:block text-center py-12">
    <.icon name="hero-cube" class="size-16 mx-auto mb-4 text-base-content/30" />
    <h2 class="text-xl font-medium">Connect a print-on-demand provider</h2>
    <p class="mt-2 text-base-content/60 max-w-md mx-auto">
      Connect your account to import products and start selling.
    </p>
    <div class="flex justify-center gap-3 mt-6">
      <.button
        :for={provider <- @available_providers}
        navigate={~p"/admin/providers/new?type=#{provider.type}"}
      >
        Connect {provider.name}
      </.button>
    </div>
  </div>

  <div
    :for={{dom_id, connection} <- @streams.connections}
    id={dom_id}
    class="admin-card"
  >
    <div class="admin-card-body">
      <div class="flex items-start justify-between gap-4">
        <div class="flex-1 min-w-0">
          <div class="flex items-center gap-2">
            <.status_indicator status={connection.sync_status} enabled={connection.enabled} />
            <h3 class="font-semibold text-lg">
              {provider_name(connection.provider_type)}
            </h3>
          </div>
          <p class="text-base-content/70 mt-1">{connection.name}</p>
          <div class="flex flex-wrap gap-x-4 gap-y-1 mt-2 text-sm text-base-content/60">
            <.connection_info connection={connection} />
          </div>
        </div>

        <div class="flex items-center gap-2">
          <.link
            navigate={~p"/admin/providers/#{connection.id}/edit"}
            class="admin-btn admin-btn-ghost admin-btn-sm"
          >
            Settings
          </.link>
          <button
            phx-click="delete"
            phx-value-id={connection.id}
            data-confirm={"Disconnect from #{provider_name(connection.provider_type)}? Your synced products will remain in your shop."}
            class="admin-btn admin-btn-ghost admin-btn-sm text-error"
          >
            Disconnect
          </button>
        </div>
      </div>

      <div class="admin-card-actions">
        <button
          phx-click="sync"
          phx-value-id={connection.id}
          disabled={connection.sync_status == "syncing"}
          class="admin-btn admin-btn-outline admin-btn-sm"
        >
          <.icon
            name="hero-arrow-path"
            class={
              if connection.sync_status == "syncing", do: "size-4 animate-spin", else: "size-4"
            }
          />
          {if connection.sync_status == "syncing", do: "Syncing...", else: "Sync products"}
        </button>
      </div>
    </div>
  </div>
</div>