<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.1.3/fetch-jsonp.min.js"></script>
<script>
  plan = function() {
    return {
      localizedPlan: null,
      price() {
        var currency = {
          'USD': '$',
          'EUR': '€',
          'GBP': '£'
        }[this.localizedPlan.currency]

        return currency + this.localizedPlan.price.net
      },
      fetchPlan() {
        fetchJsonp('<%= Plausible.Billing.PaddleApi.checkout_domain() %>/api/2.0/prices?product_ids=<%= @plan.paddle_plan_id %>')
          .then(res => res.json())
          .then((data) => {
            this.localizedPlan = data.response.products[0]
          })
      }
    }
  }
</script>

<div class="mx-auto mt-6 text-center">
  <h1 class="text-3xl font-black dark:text-gray-100">Upgrade your free trial</h1>
</div>

<div class="w-full max-w-lg px-4 mx-auto mt-4">
  <div x-init="fetchPlan()" x-data="window.plan()" class="flex-1 p-8 mt-8 bg-white rounded shadow-md dark:bg-gray-800">
    <div x-show="!localizedPlan" class="mx-auto my-32 loading sm"><div></div></div>
    <template x-if="localizedPlan">
      <div>
        <div class="w-full pb-4 dark:text-gray-100">
          <span>We've prepared a custom enterprise plan for your account with the following limits:</span>
        </div>

        <ul class="w-full py-4 dark:text-gray-100">
          <li>Up to <b><%= PlausibleWeb.StatsView.large_number_format(@plan.monthly_pageview_limit) %></b> monthly pageviews</li>
          <li>Up to <b><%= PlausibleWeb.StatsView.large_number_format(@plan.site_limit) %></b> sites</li>
          <li>Up to <b><%= PlausibleWeb.StatsView.large_number_format(@plan.hourly_api_request_limit) %></b> hourly api requests</li>
        </ul>

        <ul class="w-full py-4 dark:text-gray-100">
          <span>The plan is priced at</span>
          <template x-if="localizedPlan"><b x-text="price()"></b> </template>
          <span>per <%= if @plan.billing_interval == :yearly, do: "year", else: "month" %> + VAT if applicable. Click the button below to upgrade.
        </ul>

      </div>
    </template>

    <div class="mt-6">
      <button type="button" data-theme="none" data-product="<%= @plan.paddle_plan_id %>" data-email="<%= @conn.assigns[:current_user].email %>" data-disable-logout="true" data-passthrough="<%= @conn.assigns[:current_user].id %>" data-success="/billing/upgrade-success" class="paddle_button items-center button">
        <svg fill="currentColor" viewBox="0 0 20 20" class="inline w-4 h-4 mr-2"><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>
        Pay securely via Paddle
      </button>
    </div>
  </div>
</div>

<div class="mt-8 text-center dark:text-gray-100">
  Questions? <%= link("Contact us", to: "https://plausible.io/contact", class: "text-indigo-500") %>
</div>

<%= render("_paddle_script.html") %>
