<!-- Wrapper Macros -->
{% macro subs_wrapper() %}
	<div id="subs-wrapper" class="flex flex-row flex-wrap hidden w-full h-fit"></div>
{% endmacro %}

{% macro plans_wrapper() %}
<div id="plans-wrapper" class="grid gap-2 grid-cols-3 justify-content-start flex-wrap hidden min-h-[20rem]"></div>
{% endmacro %}

{% macro email_verify_wrapper() %}
<div id="email-verify-wrapper" class="flex flex-row justify-center flex-wrap hidden mx-auto my-auto h-fit w-1/2">
	<div class="text-center">
		<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail mx-auto mb-6"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
		<h2 class="font-size-base mt-0">Verification Email Sent!</h2>
		<p>
			We have sent an email to <span id="verification-email" class="font-semibold"></span>.
			Please click on the link received to verify your login request.
		</p>
	</div>
</div>
{% endmacro %}

{% macro address_wrapper() %}
	<div id="address-card-wrapper" class="flex container hidden mx-auto my-auto justify-content-center">
		<form>
			<div class="form-group">
				<p>Billing Name</p>
				<input type="text" name="billing-name" class="form-control" />
			</div>
			<div class="form-group">
				<p>Address</p>
				<input type="text" name="address" placeholder="Address" class="form-control" />
			</div>
			<div class="form-group">
				<p>Country</p>
				<select id="country" class="custom-select" style="font-size: 14px;" name="country" class="form-control">
					<option disabled selected style="font-size: 14px;">Select Country</option>
					{%- for country in jingrow.db.get_all('Country') -%}
					<option class="text-sm">{{ country.name }}</option>
					{%- endfor -%}
				</select>
			</div>
			<div class="flex">
				<div class="form-group mr-2">
					<p>City</p>
					<input type="text" name="city" class="form-control" required />
				</div>
				<div class="form-group">
					<p>State/Province/Region</p>
					<input type="text" name="state" class="form-control" required />
				</div>
			</div>
			<div class="form-group">
				<p>Postal Code</p>
				<input type="text" name="postal-code" class="form-control" />
			</div>
			<div id="gstin" class="form-group hidden">
				<p>GSTIN (applicable only for Indian customers)</p>
				<input type="text" name="gstin" class="form-control" />
			</div>
			<div id="gstinhide" class="flex hidden justify-content-between my-2">
				<button type="button" class="btn btn-light" onclick="toggleGSTField(false)">
					I don't have a GSTIN
				</button>
				<span></span>
			</div>
			<div id="gstinshow" class="flex justify-content-between my-2">
				<button type="button" class="btn btn-light" onclick="toggleGSTField(true)">
					Add GSTIN
				</button>
				<span></span>
			</div>
			<div class="flex justify-content-between my-2">
				<span></span>
				<button type="button" class="btn btn-primary" onclick="updateBillingInfo()">
					Save
				</button>
			</div>
		</form>
	</div>
{% endmacro %}

{% macro checkout_wrapper() %}
	<div id="checkout-wrapper" class="flex flex-col w-2/3 hidden mx-20 text-sm">
		<div class="flex justify-content-between my-2">
			<span>Plan</span>
			<span class="new-plan"></span>
		</div>
		<div class="flex justify-content-between my-2">
			<span>Amount / mo.</span>
			<span class="new-plan-price"></span>
		</div>
		<div class="flex justify-content-between my-2">
			<span>Billing:</span>
			<select class="rounded px-2 pr-8" onchange="setTotal(this.value)">
				<option class="pr-4" value="monthly">Monthly</option>
				<option class="pr-4" value="annual">Annual</option>
			</select>
		</div>
		<hr class="my-4">
		<div class="flex justify-content-between my-2">
			<span>GST (if applicable)</span>
			<span class="gst text-red-600">-</span>
		</div>
		<div class="flex justify-content-between my-2">
			<span>Discount</span>
			<span class="discount text-green-500">-</span>
		</div>
		<hr class="my-4">
		<div class="flex justify-content-between my-2">
			<span>Total</span>
			<span class="total font-semibold"></span>
		</div>
		<form class="flex justify-content-between my-2">
			<span></span>
			<button type="button" class="btn btn-primary w-36" onclick="setupStripe()">Proceed To Pay</span>
		</form>
	</div>
{% endmacro %}

<!-- Cards -->
{% macro success_card() %}
<div id="success-wrapper" class="mx-auto my-auto hidden w-1/2">
	<div class="flex">
		<div class="mr-2 grid h-4 w-4 shrink-0 place-items-center rounded-full border border-green-500 bg-green-50">
			<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M1.26562 3.86686L3.93229 6.53353L9.26562 1.2002" stroke="#38A160" stroke-miterlimit="10"
					stroke-linecap="round" stroke-linejoin="round" />
			</svg>
		</div>
		<h2 class="font-size-base mb-2">Payment Request Received</h2>
	</div>
	<span>Thank you for your payment request. We will send you a confirmation email shortly. In the meantime if you have any queries please reach us at
		our <a href="https://jingrow.com/support" class="text-blue-500 hover:text-blue-500">support page</a>.</span>
</div>
{% endmacro %}

{% macro error_card() %}
<div id="error-wrapper" class="mx-auto my-auto hidden w-1/2">
	<div>
		<h2 class="font-size-base mb-2">Something Went Wrong</h2>
	</div>
	<span>For some reason the payment request was could not complete. Please contact <a href="https://jingrow.com/support" class="text-blue-500">support</a> in order to get a resolution at the earliest.</span>
</div>
{% endmacro %}


{% macro stripe_wrapper() %}
	<div id="stripe-wrapper" class="hidden">
		<div id="card" class="hidden" ref="card-element"></div>
		<button id="pay-btn" type="button" class="btn btn-primary w-full mt-6 py-3 rounded-lg" onclick="handlePayment()">
			<span id="pay-btn-spinner" class="spinner-border spinner-border-sm mr-3 hidden"></span>
			<span id="pay-btn-text">Pay Now</span>
		</button>
	</div>
{% endmacro %}

{% macro load_stripe() %}
<div id="loading-stripe" class="mx-auto my-auto hidden">
	<span class="spinner-border spinner-border-sm mr-3" role="status"></span><span>Processing payment request</span>
</div>
{% endmacro %}

{% macro load_subs() %}
<div id="loading" class="mx-auto my-auto">
	<span class="spinner-border spinner-border-sm mr-3" role="status"></span><span>Loading Subscriptions </span>
</div>
{% endmacro %}
