{% extends "base/page.html" %}
{% block page_title %}API Tester{% endblock %}
{% block style_links %}
	<link href="/static/scripts/thirdparty/jquery-autocomplete/jquery.autocomplete.css" type="text/css" media="all" rel="stylesheet" />
{% endblock %}
{% block script_links %}
	<script type="text/javascript" src="/static/scripts/thirdparty/jquery-autocomplete/jquery.autocomplete.js"></script>
{% endblock %}
{% block extra_styles %}
	{{ block.super }}
	label {
		width: 150px;
	}
	form .input {
	  margin-left: 160px;
	}
{% endblock %}

{% block pageload_scripts %}
	$('#send').click(function(){
		/*params = {};
		$('#responseJSON').html('');
		$.each($('#params input:text'), function(){
			params[$(this).attr('id')] = $(this).val();
		});
		$.each($('#params input:checkbox'), function(){
			params[$(this).attr('id')] = $(this).attr('checked');
		});
		$.each($('#params select'), function(){
			params[$(this).attr('id')] = $(this).val();
		});*/
		var params = $("#the_form").serialize()
		$.ajax({
			type: "GET",
			url: $('#url').html(),
			contentType : "text/json",
			data: params,
			success: function(data,status,xhr){
				$('#responseJSON')
				.html('URL requested: ' + $('#url').html() + '?' +
						params + '\n\n' +
						'Http Status Code: ' + xhr.status +
					  '\n\n' + JSON.stringify(data, null, 4));
			},
			error: function(xhr, status, error){
				$('#responseJSON')
				.html('URL requested: ' + $('#url').html() + '?' +
						params + '\n\n' +
						'Http Status Code: ' + xhr.status + ' ' + error + '\n\n' +
						'An error was encountered.  Please check your URL and parameter ' +
						'values and try again.\n\nURL: ' + $('#url').html() +
						'\n\nParameters: ' + JSON.stringify(params)
				);
			},
			dataType: "json"
		});
	});
	
	$("#print_id").autocomplete(
		"/print/auto-complete/",
		{
			multiple: false,
			width: 300,
			minChars: 1,
			matchContains: true,
			matchSubset: false,
			mustMatch: false,
			selectFirst: false
		}
	);
	
	$("#search_text").autocomplete(
		"/profile/get-contacts/",
		{
			multiple: true,
			width: 300,
			minChars: 1,
			matchContains: true,
			matchSubset: false,
			mustMatch: false,
			selectFirst: false
		}
	);
	
{% endblock %}
{% block left_pane %}
	<h2>Index</h2>
	<h3>Projects</h3>
	<ul>
		<li><a href="/api/0/tester/project/">/api/0/project/</a></li>
		<li><a href="/api/0/tester/my-projects/">/api/0/my-projects/</a></li>
	</ul>
	<h3>Prints</h3>
	<ul>
		<li><a href="/api/0/tester/print/">/api/0/print/</a></li>
		<li><a href="/api/0/tester/my-prints/">/api/0/my-prints/</a></li>
	</ul>
	<h5>Groups</h5>
	<ul>
		<li><a href="/api/0/tester/group/">/api/0/group/</a></li>
		<li><a href="/api/0/tester/my-groups/">/api/0/my-groups/</a></li>
	</ul>
	<h5>Media</h5>
	<ul>
		<li><a href="/api/0/tester/photo/">/api/0/photo/</a></li>
		<li><a href="/api/0/tester/my-photos/">/api/0/my-photos/</a></li>
		<li><a href="/api/0/tester/my-audio/">/api/0/my-audio/</a></li>
	</ul>
	<h5>Users</h5>
	<ul>
		<li><a href="/api/0/tester/get-users-from-string/">/api/0/get-users-from-string/</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
	</ul>
{% endblock %}

{% block main_content %}
	<div class="row">
		<div class="span8" style="min-height:500px;">
			<form id="the_form">
				<h2>Request</h2>
				<fieldset id="params">
					<div class="clearfix">
						<label for="alias">Request URL:</label>
						<div class="input" style="font-size:15px;padding-top:8px;color:#0064CD;">
							<strong>//localground.org<span id="url">{{post_url}}</span></strong>
						</div>
					</div><!-- /clearfix -->
					{% if user.is_superuser %}
						<div class="clearfix">
							<label for="alias">Alias:</label>
							<div class="input">
								<select id="alias" name="alias">
									<option value="anonymous">anonymous</option>
									{% for u in users %}
										<option value="{{u.username}}" {% if user.username == u.username %}SELECTED{% endif %}>{{u.username}}</option>
									{% endfor%}
								</select>
							</div>
						</div><!-- /clearfix -->
					{% endif %}
					{% if groups %}
						<div class="clearfix">
							<label for="alias">Group:</label>
							<div class="input">
								<select id="groupID" name="groupID">
									{% for g in groups %}
										<option value="{{g.id}}">{{g.name}} ({{g.id}})</option>
									{% endfor%}
								</select>
							</div>
						</div><!-- /clearfix -->
					{% endif %}
					{% for field in test_fields %}
					<div class="clearfix">
						<label for="{{field.name}}">
							{% if field.required %}**{% endif %}{{field.name}}:
						</label>
						<div class="input">
							{% if field.type == 'text' %}
								<input class="medium" id="{{field.name}}" name="{{field.name}}" size="30" type="text" />
								<span class="help-block">{{field.desc}}</span>
							{% endif %}
							{% if field.type == 'bool' %}
								<input id="{{field.name}}" name="{{field.name}}" size="30" type="checkbox" {% if field.default %}CHECKED{% endif %} />
								<span class="help-inline">{{field.desc}}</span>
							{% endif %}
						</div>
					</div><!-- /clearfix -->
				{% endfor %}
				<div class="clearfix">
					<label></label>
					<input type="button" id="send" class="btn primary"
					   value="Send" style="vertical-align:bottom;margin-left:10px;" />
				</div><!-- /clearfix -->
				</fieldset>
			</form>
		</div>
		
		<div class="span8">
			<h2>Response</h2>
			<pre id="responseJSON" style="min-height:300px;overflow:auto;height:auto; width:100%;"></pre>
		</div>
	</div><!-- end row -->
{% endblock %}


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Local Ground - Twitter Layout Sample</title>
	<meta name="description" content="">
	<meta name="author" content="">