% layout '_dashboard_layout', title => 'Slapbird APM - Upgrade', description => 'Slapbird APM dashboard, upgrade your plan';

<div class="box mt-6">
    <h1 class="is-2 title">Change your SlapbirdAPM plan</h1>
    % if ($user_is_associated) {
        <p class="has-text-grey">
            Ask the manager of your SlapbirdAPM plan to upgrade.
        </p>
    % } else {
        <p class="has-text-grey">
            Please select from one of the plans below to continue
        </p>
        <div class="is-flex is-justify-content-center">
            % for my $price (@$pricing_plans) {
                <div class="box is-flex is-flex-direction-column mx-2 mt-6" style="width: 249; height: 400px">
                    <header class="card-header has-text-centered">
                        <h3 class="title is-4 mb-2 mt-2">
                            <%= $price->name %>
                        </h3>
                    </header>
                    <div class="card-content">
                        <div class="content">
                            <h4 class="is-5">
                                $<%= $price->price_pretty %> USD/month
                            </h4>
                            <%== $price->description %>
                        </div>
                    </div>
                    <div class="mt-auto" style="background-color: transparent; justify-self: end">
                        <form method="POST" action="/dashboard/manage-plan/stripe/upgrade" class="has-text-centered">
                            % if ($user_pricing_plan->pricing_plan_id eq $price->pricing_plan_id) {
                                <p class="has-text-grey">Your current plan</p>
                            % } else {
                                <input name="price_id" type="hidden" value="<%= $price->stripe_id %>" />
                                <button class="slapbird-button slapbird-is-secondary">
                                    Upgrade
                                </button>
                            % }
                        </form>
                    </div>
                </div>
            % }
        </div>
        <hr>
        <h2 class="title is-2 mb-2 mt-4">Addons</h2>
        <div class="is-flex">
            % for my $addon (@$addons) {
                <div class="box is-flex is-flex-direction-column mx-2 mt-3" style="max-width: 249px;">
                    <header class="card-header has-text-centered">
                        <h3 class="title is-4 mb-2 mt-2">
                            <%= $addon->name %>
                        </h3>
                    </header>
                    <div class="card-content">
                        <div class="content">
                            <h4 class="is-5">
                                $<%= $addon->price_pretty %> USD/month
                            </h4>
                            <%== $addon->description %>
                        </div>
                    </div>
                    <div class="mt-2" style="background-color: transparent; justify-self: end">
                        <form method="POST" action="/dashboard/manage-plan/stripe/upgrade" class="has-text-centered">
                            % my @addons = map { $_->addon } $user_pricing_plan->user_pricing_plan_addons;
                            % if (grep { $_->addon_id eq $addon->addon_id } @addons) {
                                <p class="has-text-grey">You already have this addon</p>
                            % } else {
                                <input name="price_id" type="hidden" value="<%= $addon->stripe_id %>" />
                                <button class="slapbird-button slapbird-is-secondary">
                                    Add to plan
                                </button>
                            % }
                        </form>
                    </div>
                </div>
            % }
        </div>
    % } 
</div>
