<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<link rel="shortcut icon" href="{{context}}/static/img/logo-0.png">
<link href="{{ context }}/static/css/fa/css/font-awesome.css" rel="stylesheet" type="text/css">
<!--
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" /> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
-->
<script type="text/javascript" src="{{ context }}/static/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/rpc.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/utils.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/dom.js"></script>

<title style="text-transform: capitalize">{{app_name.replace('-',' ')}}</title>
<style>
	.theme-raspberry{
		background: #00B4DB;  /* fallback for old browsers */
		background: -webkit-linear-gradient(to bottom, #0083B0, #00B4DB);  /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to bottom, #0083B0, #00B4DB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		color:#ffffff;
		font-family:verdana;
		font-weight:lighter;
		text-transform:capitalize;

	}
	.theme-dark-ocean {
		background: #373B44;  /* fallback for old browsers */
		background: -webkit-linear-gradient(to bottom, #4286f4, #373B44);  /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to bottom, #4286f4, #373B44); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		color:#f3f3f3;
	}
	.theme-gray {
		background: #bdc3c7;  /* fallback for old browsers */
		background: -webkit-linear-gradient(to bottom, #2c3e50, #bdc3c7);  /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to bottom, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		color:#f3f3f3f3;
	}
	.theme-clouds {
		background: #ECE9E6;  /* fallback for old browsers */
		background: -webkit-linear-gradient(to bottom, #FFFFFF, #ECE9E6);  /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to bottom, #FFFFFF, #ECE9E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

	}
	
	img {width:48px}
	body{ 
			font-family:sans-serif;
			font-size:14px;
			font-weight:lighter;
			width:80%;
			margin-left:10%;
	}
	.button {
		padding:4px;
		border-radius:8px;
		border:1px solid #d3d3d3;
		
	}
	.active {
		font-weight:bold;
		font-family:verdana;
		cursor:pointer ;
		border-bottom:2px solid bottom;
		padding:4px;
	}
	.active:hover { border-bottom:2px solid #4682B4}
	.current-plan {
		
		border-color: #20B2AA #20B2AA transparent transparent;
		border-style: solid;
		border-width: 15px 15px 15px 15px;
		height: 0px;
		width: 0px;
		
	}
	.bold { font-weight:bold}
	.caption {
		font-size:28px; font-weight:lighter ;
		font-family:sans-serif;
		text-transform:capitalize;
		}
	.medium-caption {
		font-size:18px;
		font-weight:lighter;
		font-family:sans-serif ;
		text-transform:capitalize;
	}
	.plan {		
		padding:4px;
		margin:4px;
		border-radius: 4px;
		border:1px solid #CAD5E0
	}
	.pricing {
		display:grid;
		grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) )
	}
	.plan .title { 
		display:grid;
		grid-template-columns: auto 32px; 
		grid-gap:2px;
		font-size:24px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0;  }
	.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:2px; margin:2px;}
	.plan .feature .label {text-transform: uppercase; grid-column:1; font-size:14px;}
	.plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
	.border-bottom{ border-bottom:1px solid #CAD5E0}
	.border-right{ border-right:1px solid #CAD5E0}
	.border-left{ border-left:1px solid #CAD5E0}
	.border-top{ border-top:1px solid #CAD5E0}
	.left { float:left}
	.small { font-family:verdana; font-size:11px; font-weight:lighter; color:#000000;}
	.hidden {display:none}
	.width-50{width:50%; padding:4px;}
	.width-25{width:25%; padding:4px}
	.height-48{height:48px;}
	.fa-times {color:maroon; font-size:18px;}
	.fa-check {color:green; font-size:18px;}
	table { border:1px solid #CAD5E0; 
		border-radius:8px;
		-webkit-border-radius:8px;	
		padding:4px;	
		
		margin:4px;
	}
	.action {
		cursor:pointer;
		padding:4px;
		padding-left:10px;
		padding-right:10px;
		border-radius:4px;
		-webkit-border-radius:4px;
		-moz-border-radius:4px;
		font-weight:bold;
		color:#4682b4;
		
	}
	.action:hover { background-color:#4682b4; color:white}
	tr {font-family:sans-serif; font-size:14px;}
	td {padding:4px; font-weight:lighter; padding:4px;}
	.gradient{
		background-image: -ms-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
		background-image: -moz-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
		background-image: -o-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(-120, #008080), color-stop(50, #FFFFFF), color-stop(120, #005757));
		background-image: -webkit-linear-gradient(top, #008080 -120%, #FFFFFF 50%, #005757 120%);
		background-image: linear-gradient(to bottom, #008080 -120%, #FFFFFF 50%, #005757 120%);
	}
	@media only screen and (min-device-width: 320px){
		table {width:99%}
		img {width:28px}
		.medium-caption {font-size:14px}
		body {font-size:12px;}
		.height-48{height:40px}
		.width-50{width:47%; padding:4px;}
		.width-25{width:24%; padding:4px}
		.pricing {display:block;}	
		.plan .title { font-size:18px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0;  }
		.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px}
		.plan .feature .label {font-size:12px; text-transform: uppercase; grid-column:1}
		.plan .feature .status {font-size:16px; text-align: right;  font-size:14px;}
		.header{display:none}
		.caption {font-size:20px}

	}	
	@media only screen and (min-device-width: 768px){
		body {font-size:12px}
		
		.header .logo{
			display:grid;
			margin:4px;
			grid-template-columns: 48px auto ;
			grid-gap:2px;
		}
		.header .logo img {width:32px}
		.header {display:block;}

		table {width:70%; margin-left:20%}
		.medium-caption {font-size:18px}
		.width-50{width:50%; padding:4px;}
		.width-25{width:25%; padding:4px}
		.height-48{height:48px;}
		.pricing {
			display:grid;
			grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) )
		}
		.plan .title { padding:4px; font-size:22px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0;  }
		.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px; padding:4px;}
		.plan .feature .label {text-transform: uppercase; grid-column:1}
		.plan .feature .status {font-size:20px; text-align: right; font-size:14px;}

	}	
	
</style>
<script>
	
</script>
<body >
	
<div class="header">
	<div class="logo">
		<div>
			<img src="{{context}}/static/img/logo-0.png" align="left" style="margin:4px"> 
		</div>
		<div>
			<div class="caption">The Phi Technology</div>
			<div class="small">{{alias}}</div>	
		</div>
	</div>
</div>
<div align="center" class="border-top" style="padding:8px">
	{% if alias  %}
		<div class="caption">{{alias.replace('-',' ') }}</div>
	{% else %}
		<div class="caption">{{app_name.replace('-',' ') }}</div>
	{% endif %}
	<div class="small">Available Plans</div>

</div>
<div >
	<div class="pricing">		
		{% for item in plans%}
			<div class="plan {{theme}}">
				<div class="title">
					<div>{{ item.nickname }}</div>
					{% if item.id in active_plans %}
						<div class="current-plan"></div>
					{% else %}
						<div></div>
					{% endif %}
					
				</div>
				<div class="">
					{% for key,value in item.metadata['features'].items() %}
						<div class="feature">
							<div class="label">{{ key }}</div>
							{% if value == True %}
								<div class="status"><i class="fa fa-check"></i></div>
							{% elif value == False %}
								<div class="status"><i class="fa fa-times"></i></div>
							{%else %}
								<div class="status">{{value}}</div>
							{% endif %}
						</div>
						
					{% endfor %}
				</div>
				{% if platform != 'mobile'  and item.amount > 0 and item.name not in active_plans %}
				<div align="right" class="border-top">
					<br>
					{% if active_plans|length > 0 %}
					<div id="upgrade_{{item.id}}" align="right" onclick="jx.dom.show('{{item.id}}'); jx.dom.hide('upgrade_{{item.id}}')">

						<span class="active">Upgrade</span>
					</div>
					{% endif %}
					<form id="{{item.id}}" style="display:none" action="{{context}}/subscribe/{{app_name|safe}}" method="POST">
						<script
						src="https://checkout.stripe.com/checkout.js" class="stripe-button action"
						data-key="{{apikey|safe}}"
						data-email="{{uid|safe}}"
						data-amount={{item.amount|safe}}
						data-name="{{item.nickname}}"
						data-description="{{alias }}"
						
						data-label="Signup $ {{item.amount/100 }} / {{item.recurring.interval[:2]}}"
						data-image="https://s3.amazonaws.com/stripe-uploads/acct_15kiA1EUWsmgY81Amerchant-icon-1493912370912-logo-0.png"

						data-locale="auto">

						</script>
						<input type="hidden" name="amount" value="{{item.amount|safe}}"/>
						<input type="hidden" name="plan" value="{{item.id|safe}}"/>
					</form>
					</div>		
				{% elif item.amount == 0 and platform != 'mobile' and item.id not in active_plans %}										
					<div align="right"  class="border-top" style="DISPLAY:none;background:#f3f3f3;  color:#4682B4; font-weight:bold; ">
						<br>
						<div style="float:right;margin-right:4px;">
								<div align="center">This Plan is Plan</div>
								<div class="small" align="center">Free/Signup</div>
		
						</div>
					</div>
					<div align="right" class="border-top">
							<br><button type="submit" class="stripe-button-el" style="visibility: visible;"><span style="display: block; min-height: 30px;">Signup Free/ mo</span></button>
					</div>
					
				{% elif item.amount == 0 and platform != 'mobile' %}
					<div align="right" class="border-top">
							<br><div style="" class="">
								<span style="font-weight:bold; font-size:14px; color:#4682B4 ;  display: block; min-height: 30px;">
								<i class="fa fa-check"></i>
								Current Plan</span></div>
					</div>
				{% endif%}
					
			</div>
		{% endfor %}

		</div>
		
</div>
<div class="small" align="center">support@the-phi.com</div>
	
</body>
