<div class="shadow bg-white dark:bg-gray-800 sm:rounded-md sm:overflow-hidden py-6 px-4 sm:p-6">
  <header class="relative border-b border-gray-200 pb-4">
    <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
      Import Data
    </h2>
    <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">
      Import existing data from external sources.
      <%= if FunWithFlags.enabled?(:csv_imports_exports, for: @site) do %>
        Pick one of the options below to start a new import.
      <% else %>
        Click below to start a new import.
      <% end %>
    </p>

    <PlausibleWeb.Components.Generic.docs_info slug="google-analytics-import" />
  </header>

  <%= live_render(@conn, PlausibleWeb.Live.ImportsExportsSettings,
    session: %{"domain" => @site.domain}
  ) %>
</div>

<%= if FunWithFlags.enabled?(:csv_imports_exports, for: @site) do %>
  <div class="shadow bg-white dark:bg-gray-800 dark:text-gray-200 sm:rounded-md sm:overflow-hidden py-6 px-4 sm:p-6">
    <header class="relative border-b border-gray-200 pb-4 mb-5">
      <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
        Export Data
      </h2>
      <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">
        Export all your data into CSV format.
      </p>
    </header>

    <%= live_render(@conn, PlausibleWeb.Live.CSVExport,
      session: %{
        "site_id" => @site.id,
        "email_to" => @current_user.email,
        "storage" => on_full_build(do: "s3", else: "local")
      }
    ) %>
  </div>
<% end %>
