<!DOCTYPE html>
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

{% set user = result.user %}
{% set error = result.error %}

{% macro description() -%}
	This is an example usage of the
	<a href="http://peterhudec.github.io/authomatic">Authomatic</a> Python library.
{% endmacro -%}

{% macro providers(providers) %}
	<ul class="small-block-grid-1 large-block-grid-3">
	{% for k, v in providers %}
		{% set name = v._name or k|capitalize %}
		<li>
			<a class="authomatic provider-button {{ k }}" href="/login/{{ k }}">
				<span>{{ name }}</span> <img src="/static/img/icons/{{ k }}.ico" />
			</a>
		</li>
	{% endfor %}
	</ul>
{% endmacro %}

{% macro form(url) %}
	<form class="authomatic" action="/login/{{ url }}">
		<div class="row collapse">
			<div class="large-7 small-8 columns">
				<input type="text" name="id" placeholder="Your claimed ID">
			</div>
			<div class="large-5 small-4 columns">
				<input type="submit" class="button postfix radius" value="Authenticate" />
			</div>
		</div>
	</form>
{% endmacro %}

<head>
	<script type="text/javascript">{{ popup_js }}</script>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>{{ title }}</title>
	
	<link rel="shortcut icon" href="{{ base_url }}/static/img/favicon.ico" />
	
	<link rel="apple-touch-icon" href="/static/img/apple-touch-icon-iphone.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="/static/img/apple-touch-icon-ipad.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="/static/img/apple-touch-icon-iphone4.png" />
	
	
	<meta property="og:title" content="{{ title }}" />
	<meta property="og:type" content="website" />
	<meta property="og:url" content="{{ base_url }}" />
	<meta property="og:image" content="{{ base_url }}/static/img/authomatic-seo.gif" />
	<meta property="og:description" content="{{ description()|striptags }}" />
	
	<meta name="description" content="{{ description()|striptags }}">
	
	<link rel="stylesheet" href="/static/css/normalize.css" />
  	<link rel="stylesheet" href="/static/css/app.css" />
	<script type="text/javascript" src="/static/js/vendor/custom.modernizr.js"></script>
	<script type="text/javascript" src="/static/js/vendor/jquery.js"></script>
	<script type="text/javascript" src="/static/js/authomatic.js"></script>
</head>
<body>
	<div id="root">
		<div id="header">
			<div class="row">
				<div class="large-12 columns">
					<img class="logo hide-for-small" src="/static/img/authomatic-horizontal-lighter.svg" />
					<img class="logo show-for-small" src="/static/img/authomatic-lighter.svg" />
				</div>
			</div>
		</div>
		
		<div id="sub-header">
			<div class="row">
				<p id="motto">
					{{ description() }}
					You can see the source code of this app
					<a href="https://github.com/peterhudec/authomatic/tree/master/examples/gae/showcase">here</a>.<br />
					None of your private data will be saved to any kind of persistent storage like database or session.
				</p>
			</div>
		</div>
		
		<div id="user" class="{{ 'hidden' if not user }}">
			<div class="row">
				<div class="small-8 columns info">
					<h1>Hi <span id="user-name">{{ user.name if user }}</span></h1>
					<h5>You are logged in with:</h5>
					<h3><span id="user-provider">{{ user.provider.name|capitalize if user }}</span></h3>
					<h5>Your email is:</h5>
					<h3><span id="user-email">{{ user.email if user }}</span></h3>
					<h5>Your ID is:</h5>
					<h3><span id="user-id">{{ user.id if user }}</span></h3>
				</div>
				<div id="user-picture-column" class="small-4 columns">
					<img id="user-picture" src="{{ user.picture if user }}" />
				</div>
			</div>
			<div class="row">
				<div class="large-12 columns">
					<div id="user-apis"></div>
					<div id="user-data-wrapper">
						<div id="user-data-loader" class="hidden">Loading ...</div>
						<pre id="user-data" class="prettyprint">{{ user.content if user }}</pre>
					</div>
				</div>
			</div>
		</div>
		
		<div id="error" class="{{ 'hidden' if not error }}">
			<div class="row">
				<div class="large-12 columns">
					Error: <span id="error-message">{{ error.message if error }}</span>
				</div>
			</div>
		</div>
		
		<div id="authentication" class="row">
			<div class="large-12 columns">
				<h1>Authentication</h1>
			</div>
		</div>
		
		<div class="row">
			<div class="large-4 columns">
				<h3>OpenID</h3>
				{{ form('openid') }}
			</div>
			<div class="large-4 columns">
				<h3>GAE OpenID</h3>
				{{ form('gae-openid') }}
			</div>
			<div class="large-4 columns">
				<h3>Mozilla Persona</h3>
				<form class="persona">
					<div class="row collapse">
						<div class="large-7 small-8 columns">
							<input type="text" name="id" placeholder="Coming soon">
						</div>
						<div class="large-5 small-4 columns">
							<input type="submit" class="button postfix radius disabled" value="Authenticate" />
						</div>
					</div>
				</form>
			</div>
		</div>
		
		<div id="authorization" class="row">
			<div class="large-12 columns">
				<h1>Authorization</h1>
			</div>
		</div>
		
		<div id="buttons" class="row">
			<div class="small-6 columns">
				<h3>OAuth 1.0a</h3>
				{{ providers(oauth1) }}
			</div>
			<div class="small-6 columns">
				<h3>OAuth 2.0</h3>
				{{ providers(oauth2) }}
			</div>
		</div>
	  	
		<script src="/static/js/foundation/foundation.js"></script>
		<script src="/static/js/app.js"></script>
	  
		<script type="text/javascript">
			$(document).foundation();
			
			/**
			 * Fallback svg to png.
			 * Taken from Todd Motto's article:
			 * http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/
			 */
			if(!Modernizr.svg) {
			    $('img[src*="svg"]').attr('src', function() {
			        return $(this).attr('src').replace('.svg', '.png');
			    });
			}
			
			var _gaq = _gaq || [];
			  _gaq.push(['_setAccount', 'UA-40554445-1']);
			  _gaq.push(['_trackPageview']);
			
			  (function() {
			    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			  })();
		</script>
		<div id="root_footer"></div>
	</div>
	<div id="footer">
		&copy; Copyright 2013, <a href="http://peterhudec.com">Peter Hudec</a>
	</div>
</body>
</html>
