<div class="w-full max-w-lg mx-auto mt-8">
  <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
    <div class="px-4 py-5 sm:px-8 sm:py-6">
      <div class="mx-auto flex items-center justify-center rounded-full bg-green-100 h-12 w-12">
        <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
      </div>
      <h3 class="mt-6 text-center text-2xl leading-6 font-medium text-gray-900 dark:text-gray-200">
        Site locked
      </h3>

      <%= case @conn.assigns[:current_user_role] do %>
        <% :owner -> %>
          <div class="mt-3 text-gray-600 dark:text-gray-300 text-center">
            <p>
              This site is locked because you don't have an active subscription. We are still counting stats in the background but your access to the dashboard is restricted. Subscribe with the link below to access your stats again.
            </p>
          </div>
          <div class="mt-6 w-full text-center">
            <%= link("Manage my subscription", to: "/settings", class: "inline-flex items-center px-4 py-2 border border-transparent shadow-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm") %>
          </div>
        <% role when role in [:admin, :viewer] -> %>
          <div class="mt-3 text-gray-600 dark:text-gray-300 text-center">
            <p>
            This site is currently locked and cannot be accessed. The site owner <b><%= @owner.email %></b> must upgrade their subscription plan in order to
            unlock the site.
            </p>
            <div class="mt-6 text-sm text-gray-500">
              <p>Want to pay for this site with the account you're logged in with?</p>
              <p class="mt-1">Contact <%= @owner.email %> and ask them to <%= link("transfer the ownership", class: "text-indigo-500", to: "https://plausible.io/docs/transfer-ownership", rel: "noreferrer") %> of the site over to you</p>
            </div>
          </div>
          <div class="mt-6 w-full text-center">
            <%= link("Back to my sites", to: "/sites", class: "inline-flex items-center px-4 py-2 border border-transparent shadow-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm") %>
          </div>
        <% _ -> %>
          <div class="mt-3 text-gray-600 dark:text-gray-300 text-center">
            <p>
            This site is currently locked and cannot be accessed. You can check back later or contact the site owner to unlock it.
            </p>
          </div>
          <%= if @conn.assigns[:current_user] do %>
            <div class="mt-6 w-full text-center">
              <%= link("Back to my sites", to: "/sites", class: "inline-flex items-center px-4 py-2 border border-transparent shadow-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm") %>
            </div>
          <% end %>
      <% end %>
    </div>
  </div>
</div>
