<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.min.js" integrity="sha256-E1M+0f/hvoNVoV8K5RSn1gwe4EFwlvORnOrFzghX0wM=" crossorigin="anonymous"></script>
<script>
  function updateStatus() {
    fetch("/api/<%= URI.encode_www_form(@site.domain) %>/status")
    .then(function(res) { return res.json() })
      .then(function(status) {
        if (status === "READY") {
          window.location.reload()
        }
      })
  }

  setInterval(updateStatus, 5000)
</script>

<div class="w-full max-w-md mx-auto mt-8">
  <%= if @site.locked do %>
    <div class="w-full px-4 py-4 text-sm font-bold text-center text-yellow-800 bg-yellow-100 rounded transition" style="top: 91px" role="alert">
      <p>This dashboard is actually locked. You are viewing it with super-admin access</p>
    </div>
  <% end %>
  <div class="bg-white dark:bg-gray-800 shadow-md rounded px-8 pt-6 pb-8 mb-4 mt-16 relative text-center">
    <h2 class="text-xl font-bold dark:text-gray-100">Waiting for first pageview</h2>
    <h2 class="text-xl font-bold dark:text-gray-100">on <%= @site.domain %></h2>
    <div class="my-44">
      <div class="block pulsating-circle top-1/2 left-1/2"></div>
      <p class="text-gray-600 dark:text-gray-400 text-xs absolute left-0 bottom-0 mb-6 w-full text-center leading-normal">
        Need to see the snippet again? <%= link("Click here", to: "/#{URI.encode_www_form(@site.domain)}/snippet", class: "text-indigo-600 dark:text-indigo-500 text-underline")%><br />
        Not working? <%= link("Troubleshoot the integration", to: "https://plausible.io/docs/troubleshoot-integration#keep-seeing-a-blinking-green-dot", class: "text-indigo-600 dark:text-indigo-500 text-underline", rel: "noreferrer") %> with our guide
        <%= if Application.get_env(:plausible, :is_selfhost) do %>
           first<br /> Still not working? Ask on our <%= link("community-supported forum", to: "https://github.com/plausible/analytics/discussions", class: "text-indigo-600 dark:text-indigo-500 text-underline" ) %>
        <% else %>
           first<br /> Still not working? <%= link("Contact us", to: "https://plausible.io/contact", class: "text-indigo-600 dark:text-indigo-500 text-underline" ) %> and we will help you with your setup
        <% end %>
      </p>
    </div>
  </div>
</div>
