{% macro statusBadge(edition, licensedEdition) %}
    {% if edition == CraftEdition %}
        {% if edition == licensedEdition %}
            <div class="license-status installed" data-icon="check">{{ "Installed"|t('app') }}</div>
        {% else %}
            <div class="license-status installed" data-icon="check">{{ "Installed as a trial"|t('app') }}</div>
        {% endif %}
    {% elseif edition == licensedEdition %}
        <div class="license-status licensed" data-icon="check">{{ "Licensed"|t('app') }}</div>
    {% endif %}
{% endmacro %}

{% macro price(edition, info) %}
    {% if info.salePrice %}
        <span class="listedprice">{{ info.formattedPrice }}</span> {{ info.formattedSalePrice }}
    {% else %}
        {{ info.formattedPrice }}
    {% endif %}
{% endmacro %}

{% macro buybtn(edition, info, licensedEdition, canTestEditions) %}
    {%- spaceless %}
        <div class="btngroup">
            {# Show the "Buy" button if this edition is greater than the licensed edition #}
            {% if edition > licensedEdition %}
                <div class="btn buybtn submit" data-edition="{{ edition }}">{{ "Buy now"|t('app') }}</div>
            {% endif %}

            {# Show the "Try" button if they're on a testable domain, this is not the current edition, and is greater than the licensed edition #}
            {% if canTestEditions and edition != CraftEdition and edition > licensedEdition %}
                <div class="btn test" data-edition="{{ edition }}">{{ "Try for free"|t('app') }}</div>
            {% endif %}

            {# Show the "Reinstall" button if they’re licensed to use this edition but not currently on it #}
            {% if edition == licensedEdition and edition != CraftEdition %}
                <div class="btn test" data-edition="{{ edition }}">{{ "Reinstall"|t('app') }}</div>
            {% endif %}

            {# Show the "Uninstall" button if this is the currently-installed edition, but they are only licensed to use Craft Personal #}
            {# (Not necessary to show if the licensed edition is Client/Pro as they will have their own "Install" button) #}
            {% if edition == CraftEdition and licensedEdition == CraftPersonal %}
                <div class="btn test" data-edition="0">{{ "Uninstall"|t('app') }}</div>
            {% endif %}
        </div>
    {% endspaceless -%}
{% endmacro %}

{% from _self import statusBadge, price, buybtn %}
{% import "_includes/forms" as forms %}


<div id="upgrademodal-compare" class="body">
    <table class="data fullwidth">
        <thead>
        <tr class="logos">
            <td></td>
            <th scope="col">
                <h1 class="logo">Client</h1>
                <p>{{ "For sites built for clients with only one content manager."|t('app') }}</p>
            </th>
            <th scope="col">
                <h1 class="logo">Pro</h1>
                <p>{{ "For everything else."|t('app') }}</p>
            </th>
        </tr>
        {% if CraftEdition > CraftPersonal or licensedEdition > CraftPersonal %}
            <tr class="license-statuses">
                <td></td>
                <td>{{ statusBadge(CraftClient, licensedEdition) }}</td>
                <td>{{ statusBadge(CraftPro, licensedEdition) }}</td>
            </tr>
        {% endif %}
        <tr class="price">
            <th scope="row" class="feature">One-Time Price</th>
            <td>{{ price(CraftClient, editions[CraftClient]) }}</td>
            <td>{{ price(CraftPro, editions[CraftPro]) }}</td>
        </tr>
        <tr class="buybtns">
            <td></td>
            <td>{{ buybtn(CraftClient, editions[CraftClient], licensedEdition, canTestEditions) }}</td>
            <td>{{ buybtn(CraftPro, editions[CraftPro], licensedEdition, canTestEditions) }}</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th class="group" colspan="3" data-icon="users">{{ "User Accounts"|t('app') }}</th>
        </tr>
        <tr>
            <th class="feature" scope="row">{{ "Additional user accounts"|t('app') }}</th>
            <td>{{ "One “Client” account"|t('app') }}</td>
            <td>{{ "Unlimited"|t('app') }}</td>
        </tr>
        <tr>
            <th class="feature" scope="row">{{ "User groups"|t('app') }}</th>
            <td></td>
            <td><span data-icon="check"></span></td>
        </tr>
        <tr>
            <th class="feature" scope="row">{{ "User permissions"|t('app') }}</th>
            <td></td>
            <td><span data-icon="check"></span></td>
        </tr>
        <tr>
            <th class="feature" scope="row">{{ "Public user registration"|t('app') }}</th>
            <td></td>
            <td><span data-icon="check"></span></td>
        </tr>

        <tr>
            <th class="group" colspan="3" data-icon="brush">{{ "System Branding"|t('app') }}</th>
        </tr>
        <tr>
            <th class="feature" scope="row">{{ "Custom login screen logo"|t('app') }}</th>
            <td><span data-icon="check"></span></td>
            <td><span data-icon="check"></span></td>
        </tr>
        <tr>
            <th class="feature" scope="row">{{ "Custom HTML email template"|t('app') }}</th>
            <td><span data-icon="check"></span></td>
            <td><span data-icon="check"></span></td>
        </tr>
        <tr>
            <th class="feature" scope="row">{{ "Custom email message wording"|t('app') }}</th>
            <td><span data-icon="check"></span></td>
            <td><span data-icon="check"></span></td>
        </tr>

        <tr class="buybtns">
            <td></td>
            <td>{{ buybtn(CraftClient, editions[CraftClient], licensedEdition, canTestEditions) }}</td>
            <td>{{ buybtn(CraftPro, editions[CraftPro], licensedEdition, canTestEditions) }}</td>
        </tr>
        </tbody>
    </table>
</div>


<div id="upgrademodal-checkout" class="body hidden">
    <div class="logowrapper">
        <h1 class="logo"></h1>
    </div>

    <form class="pane">
        {{ csrfInput() }}

        {{ forms.textField({
            first: true,
            placeholder: "Name"|t('app'),
            id: 'customer-name'
        }) }}

        {{ forms.textField({
            placeholder: "Email"|t('app'),
            id: 'customer-email',
            value: currentUser.email
        }) }}

        {% set ccInputs %}
            <div class="multitext">
                <div class="multitextrow">
                    {{ forms.text({
                        id: 'cc-num',
                        type: 'tel',
                        placeholder: "Card number"|t('app'),
                        autocomplete: false
                    }) }}
                </div>
                <div class="multitextrow">
                    {{ forms.text({
                        id: 'cc-exp',
                        type: 'tel',
                        placeholder: "MM"|t('app')~' / '~"YY"|t('app')
                    }) }}
                    {{ forms.text({
                        id: 'cc-cvc',
                        type: 'tel',
                        placeholder: "CVC"|t('app')
                    }) }}
                </div>
            </div>
        {% endset %}

        {{ forms.field({
            fieldId: 'cc-inputs'
        }, ccInputs) }}

        <a class="fieldtoggle" data-target="upgrademodal-checkout-more">{{ "Show additional fields for invoice"|t('app') }}</a>

        <div id="upgrademodal-checkout-more" class="hidden">
            {% set bizInputs %}
                <div class="multitext">
                    <div class="multitextrow">
                        {{ forms.text({
                            id: 'business-name',
                            placeholder: "Business name"|t('app')
                        }) }}
                    </div>
                    <div class="multitextrow">
                        {{ forms.text({
                            id: 'business-taxid',
                            placeholder: "Business tax ID"|t('app')
                        }) }}
                    </div>
                </div>
            {% endset %}

            {{ forms.field({
                fieldId: 'business-inputs'
            }, bizInputs) }}

            {% set addressInputs %}
                <div class="multitext">
                    <div class="multitextrow">
                        {{ forms.text({
                            id: 'business-address1',
                            placeholder: "Address line 1"|t('app')
                        }) }}
                    </div>
                    <div class="multitextrow">
                        {{ forms.text({
                            id: 'business-address2',
                            placeholder: "Address line 2"|t('app')
                        }) }}
                    </div>
                    <div class="multitextrow">
                        <div class="text selectize-text">
                            <select id="business-country" placeholder="{{ 'Country'|t('app') }}"><option value=""></option></select>
                        </div>
                        <div class="text selectize-text">
                            <select id="business-state" placeholder="{{ 'State/province'|t('app') }}"></select>
                        </div>
                    </div>
                    <div class="multitextrow">
                        {{ forms.text({
                            id: 'business-city',
                            placeholder: "City/town"|t('app')
                        }) }}
                        {{ forms.text({
                            id: 'business-zip',
                            placeholder: "Zip/postal"|t('app')
                        }) }}
                    </div>
                </div>
            {% endset %}

            {{ forms.field({
                fieldId: 'address-inputs'
            }, addressInputs) }}

            {{ forms.textareaField({
                id: 'purchase-notes',
                placeholder: "Notes"|t('app'),
                rows: 2
            }) }}
        </div>

        <div class="buttons">
            <div class="left">
                <input id="pay-button" type="submit" class="btn submit" value="Pay">
                <div id="pay-spinner" class="spinner hidden"></div>
            </div>

            <div class="right">
                {{ forms.text({
                    id: 'coupon-input',
                    class: 'code',
                    placeholder: "COUPON"|t('app'),
                    size: 12
                }) }}
                <div id="coupon-spinner" class="spinner hidden"></div>
            </div>
        </div>

        <p class="secure icon light">{{ "Your payment is safe and secure with {stripe}."|t('app', { stripe: '<a href="https://stripe.com/" target="_blank">Stripe</a>' })|raw }}
    </form>
</div>


<div id="upgrademodal-success" class="body hidden">
    <div class="message">
        <p>{{ "Craft has been upgraded successfully!" }}</p>
        <div class="btn">{{ "Reload"|t('app') }}</div>
    </div>
</div>