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" /> 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="admin-stack admin-card-spaced">
  <div id="connections-empty" class="hidden only:block">
    <div class="admin-empty-state">
      <.icon name="hero-cube" class="admin-empty-state-icon" />
      <h2 class="admin-empty-state-title">Connect a print-on-demand provider</h2>
      <p class="admin-empty-state-text">
        Connect your account to import products and start selling.
      </p>
      <div class="admin-empty-state-actions">
        <.button
          :for={provider <- @available_providers}
          navigate={~p"/admin/providers/new?type=#{provider.type}"}
        >
          Connect {provider.name}
        </.button>
      </div>
    </div>
  </div>

  <div
    :for={{dom_id, connection} <- @streams.connections}
    id={dom_id}
    class="admin-card"
  >
    <div class="admin-card-body">
      <div class="admin-card-row">
        <div class="admin-card-content">
          <div class="admin-row">
            <.status_indicator status={connection.sync_status} enabled={connection.enabled} />
            <h3 class="admin-card-title admin-section-heading admin-section-desc-flush">
              {provider_name(connection.provider_type)}
            </h3>
          </div>
          <p class="admin-card-subtitle">{connection.name}</p>
          <div class="admin-card-meta">
            <.connection_info connection={connection} />
          </div>
        </div>

        <div class="admin-card-toolbar">
          <.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 admin-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>