{% extends "layout.html" %}
{% block head %}{{ super() }}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
window.recaptcha_public_key = window.recaptcha_public_key || "{{ recaptcha_key }}";
</script>
<script type="text/javascript" src="{{ url_for('.static', filename='index.js') }}"></script>
{% endblock %}
{% block title %}chr{% endblock %}
{% block content %}
<h1 class="chr-header">chr url shortener</h1>
<noscript>
	<span class="chr-noscript"><b>Sorry, chr requires JavaScript.<b></span>
</noscript>
<form method="POST" id="shrink-url" action="{{ url_for('submit') }}">
<input name="long_url" type="text" id="chr-text-long" class="chr-part chr-text-long" value="http://" disabled="disabled"/>
<input name="custom_url" type="text" id="chr-text-short" class="chr-part chr-text-short" maxlength="32" placeholder="custom url" disabled="disabled"/>
<div class="chr-check-delete">
	<label>
		<input name="give_delete" type="checkbox" id="chr-check-delete" class="chr-part chr-check-delete" value="true" disabled="disabled"/>
		Deletable?
	</label>
</div>
<button name="chr_button_shrink" type="button" id="chr-button-shrink" class="chr-part chr-button-shrink" disabled="disabled">Shrink!</button>
<div id="form-modal" style="display: none;"><!--Hidden until it's turned into a modal. This makes it cleaner.-->
	<p>
		Sorry, but we require this captcha to prevent spam.<br />
		If you know a better way, send in a pull, <a href="https://github.com/plausibility/chr">@plausibility/chr</a>
	</p>
	<div id="recaptcha-goes-here"></div>
</div>
</form>
<div id="chr-results-group">
</div>
{% endblock %}