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

{% macro price(edition, info) %}
	{% if info.salePrice %}
		{% set price %}<span class="listedprice">{{ info.formattedPrice }}</span> {{ info.formattedSalePrice }}{% endset %}
	{% else %}
		{% set price = info.formattedPrice %}
	{% endif %}
	{{ "{price} plus {renewalPrice}/year for updates"|t({
		price: price,
		renewalPrice: info.formattedRenewalPrice
	}) }}
{% 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 }}</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 }}</div>
			{% endif %}

			{# Show the "Reactivate" 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 }}">{{ "Reactivate"|t }}</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">Solo</h1>
					<p>{{ "For when you’re building a website for yourself or a friend."|t('app') }}</p>
				</th>
				<th scope="col">
					<h1 class="logo">Pro</h1>
					<p>{{ "For when you’re building something professionally for a client or team."|t }}</p>
				</th>
			</tr>
			<tr class="license-statuses">
				<td></td>
				<td>{{ statusBadge(CraftPersonal, licensedEdition) }}</td>
				<td>{{ statusBadge(CraftPro, licensedEdition) }}</td>
			</tr>
			<tr class="price">
				<td></td>
				<td>{{ "Free"|t('app') }}</td>
				<td>{{ price(CraftPro, editions[CraftPro]) }}</td>
			</tr>
			<tr class="buybtns">
				<td></td>
				<td>{{ buybtn(CraftPersonal, editions[CraftPersonal], 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 }}</th>
			</tr>
			<tr>
				<th class="feature" scope="row">{{ "Additional user accounts"|t }}</th>
				<td>{{ "One Admin account"|t('app') }}</td>
				<td>{{ "Unlimited"|t }}</td>
			</tr>
			<tr>
				<th class="feature" scope="row">{{ "User groups"|t }}</th>
				<td></td>
				<td><span data-icon="check"></span></td>
			</tr>
			<tr>
				<th class="feature" scope="row">{{ "User permissions"|t }}</th>
				<td></td>
				<td><span data-icon="check"></span></td>
			</tr>
			<tr>
				<th class="feature" scope="row">{{ "Public user registration"|t }}</th>
				<td></td>
				<td><span data-icon="check"></span></td>
			</tr>

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

			<tr>
				<th class="group" colspan="3" data-icon="assets">{{ "Assets"|t }}</th>
			</tr>
			<tr>
				<th class="feature" scope="row">{{ "Amazon S3 support"|t }}</th>
				<td></td>
				<td><span data-icon="check"></span></td>
			</tr>
			<tr>
				<th class="feature" scope="row">{{ "Rackspace Cloud Files support"|t }}</th>
				<td></td>
				<td><span data-icon="check"></span></td>
			</tr>
			<tr>
				<th class="feature" scope="row">{{ "Google Cloud Storage support"|t }}</th>
				<td></td>
				<td><span data-icon="check"></span></td>
			</tr>

			<tr>
				<th class="group" colspan="3" data-icon="language">{{ "Localization and Translation"|t }}</th>
			</tr>
			<tr>
				<th class="feature" scope="row">{{ "Section and entry locale targeting"|t }}</th>
				<td></td>
				<td><span data-icon="check"></span></td>
			</tr>
			<tr>
				<th class="feature" scope="row">{{ "Content translations"|t }}</th>
				<td></td>
				<td><span data-icon="check"></span></td>
			</tr>
			<tr>
				<th class="feature" scope="row">{{ "Locale-specific user permissions"|t }}</th>
				<td></td>
				<td><span data-icon="check"></span></td>
			</tr>
			<tr class="buybtns">
				<td></td>
				<td></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">
		{{ getCsrfInput() }}

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

		{{ forms.textField({
			placeholder: "Email"|t,
			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,
						autocomplete: false
					}) }}
				</div>
				<div class="multitextrow">
					{{ forms.text({
						id: 'cc-exp',
						type: 'tel',
						placeholder: "MM"|t~' / '~"YY"|t
					}) }}
					{{ forms.text({
						id: 'cc-cvc',
						type: 'tel',
						placeholder: "CVC"|t
					}) }}
				</div>
			</div>
		{% endset %}

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

		<a class="fieldtoggle" data-target="upgrademodal-checkout-more">{{ "Show additional fields for invoice"|t }}</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
						}) }}
					</div>
					<div class="multitextrow">
						{{ forms.text({
							id: 'business-taxid',
							placeholder: "Business tax ID"|t
						}) }}
					</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
						}) }}
					</div>
					<div class="multitextrow">
						{{ forms.text({
							id: 'business-address2',
							placeholder: "Address line 2"|t
						}) }}
					</div>
					<div class="multitextrow">
						<div class="text selectize-text">
							<select id="business-country" placeholder="{{ 'Country'|t }}"><option value=""></option></select>
						</div>
						<div class="text selectize-text">
							<select id="business-state" placeholder="{{ 'State/province'|t }}"></select>
						</div>
					</div>
					<div class="multitextrow">
						{{ forms.text({
							id: 'business-city',
							placeholder: "City/town"|t
						}) }}
						{{ forms.text({
							id: 'business-zip',
							placeholder: "Zip/postal"|t
						}) }}
					</div>
				</div>
			{% endset %}

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

			{{ forms.textareaField({
				id: 'purchase-notes',
				placeholder: "Notes"|t,
				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,
					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({ 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 }}</div>
	</div>
</div>