<div class="max-w-md w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded px-8 pt-6 pb-8 mb-4 mt-8">
  <h2 class="text-xl font-black dark:text-gray-100">Import from Google Analytics</h2>

  <div class="mt-6 text-sm text-gray-500 dark:text-gray-200">
    <p>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-4 w-4 inline text-orange-600"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
        />
      </svg>
      Important: Since your GA property includes data from before 23rd August 2016, you have to take an extra step to make sure we can import data smoothly.
    </p>

    <ol class="mt-4">
      <li>1. Navigate to the GA property you want to import from</li>
      <li>2. Go to Admin &gt; Property Settings &gt; User Analysis</li>
      <li>3. Make sure <i>Enable Users Metric in Reporting</i> is <b>OFF</b></li>
    </ol>

    <p class="mt-4">
      The setting may take a few minutes to take effect. If your imported data is showing 0 visitors in unexpected places, it's probably caused by this and you
      can try importing again later.
    </p>
  </div>

  <div class="mt-6 flex flex-col-reverse sm:flex-row justify-between items-center">
    <p class="text-sm mt-4 sm:mt-0 dark:text-gray-100">
      <a
        href={
          Routes.google_analytics_path(@conn, :property_or_view, @site.domain,
            property_or_view: @property_or_view,
            access_token: @access_token,
            refresh_token: @refresh_token,
            expires_at: @expires_at
          )
        }
        class="underline text-indigo-600"
      >
        Go back
      </a>
    </p>

    <%= link("Continue ->",
      to:
        Routes.google_analytics_path(@conn, :confirm, @site.domain,
          property_or_view: @property_or_view,
          access_token: @access_token,
          refresh_token: @refresh_token,
          expires_at: @expires_at,
          start_date: @start_date,
          end_date: @end_date
        ),
      class: "button sm:w-auto w-full"
    ) %>
  </div>
</div>
