<script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.1.3/fetch-jsonp.min.js"></script>
<div class="mx-auto mt-6 text-center">
  <h1 class="text-3xl font-black dark:text-gray-100">Change subscription plan</h1>
</div>

<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="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-40 loading sm"><div></div></div>
    <template x-if="localizedPlan">
      <div>
        <div class="w-full pb-4 dark:text-gray-100">
          <span>We've prepared your account for an upgrade to custom limits outside the listed plans:</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" %>. On the next page, our payment provider will calculate the prorated amount that your card will be charged if you decide to upgrade now.</span>
        </ul>

        <div class="mt-6 text-left">
          <span class="inline-flex w-full rounded-md shadow-sm">
            <%= link(to: Routes.billing_path(@conn, :change_plan_preview, @plan.paddle_plan_id), class: "inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent leading-5 rounded-md hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:ring active:bg-indigo-700 transition ease-in-out duration-150 ") do %>
              <svg fill="currentColor" viewBox="0 0 20 20" class="inline w-4 h-4 mr-2"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
              Preview changes
            <% end %>
          </span>
        </div>
      </div>
    </template>
  </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") %>
