{% extends "master.html" %}

{% block main %}

{% if output %}
  <a href="#output" class="skip">Jump to formatted query</a>
{% endif %}

<form method="post" action="" id="form_options" enctype="multipart/form-data">
  <div id="input">
    {% if form.non_field_errors %}{{form.non_field_errors}}{% endif %}
    <div>
      <strong>Type your SQL here:</strong><br />
      {{form.data}}
      {% if form.data.errors %}{{form.data.errors}}{% endif %}
    </div>
    <div style="margin-top: .5em;">
      <strong>...or upload a file:</strong>
      {{form.datafile}}
    </div>
    <div id="examples" style="margin-top: .5em;"></div>
    <div id="actions" style="margin-top: .5em;">
      <input type="submit" value="Format SQL" id="btn_format" />
    </div>
    {% if output %}<a name="output"></a>
    <div id="response">{{output|safe}}</div>
    {% else %}
    <div id="response"></div>
    {% endif %}
    <div id="proc_time">
      {% if proc_time %}Processed in {{proc_time}} seconds.{% endif %}
    </div>
    <div style="margin-top: 1em;">
      <script type="text/javascript">
	<!--
	   google_ad_client = "pub-8870624642249726";
	   /* 468x60, Erstellt 07.03.09 */
	   google_ad_slot = "9840041509";
	   google_ad_width = 468;
	   google_ad_height = 60;
	//-->
      </script>
      <script type="text/javascript"
	      src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
      </script>
    </div>

  </div>
  <div id="options">
    <h1 class="skip">Options</h1>
    <fieldset><legend id="general"><strong>General Options</strong></legend>
      <div id="general_content" class="content">
      {{form.remove_comments}}
      <label for="id_remove_comments">{{form.remove_comments.label}}</label>
      <br />
      {{form.highlight}}
      <label for="id_highlight">{{form.highlight.label}}</label>
      {% if form.highlight.errors %}
        <ul class="errors">{{form.highlight.errors</ul>
      {% endif %}
      </div>
    </fieldset>
    <fieldset><legend id="kwcase">
	<strong>Keywords &amp; Identifiers</strong></legend>
        <div>
	  {{form.keyword_case.label}}: {{form.keyword_case}}
	</div>
	<div>
	  {{form.identifier_case.label}}: {{form.identifier_case}}
	</div>
    </fieldset>
    <fieldset><legend id="indent"><strong>Indentation &amp; Margins</strong>
	</legend>
	  <div id="indent_content" class="content">
	    <label for="id_n_indents">Indentation: </label>
	    {{form.n_indents}} {{form.n_indents.label}}
	    <div class="help">Empty field means leave indentation unchanged.</div>
<!--
	    <label for="id_right_margin">Right margin: </label>
	    {{form.right_margin}} {{form.right_margin.label}}
	    <div class="help">Empty field means don't mind right margin.</div>
-->
	  </div>
    </fieldset>
    <fieldset><legend id="output"><strong>Output Format</strong></legend>
      <label for="id_output_format">Language: </label>
      {{form.output_format}}
    </fieldset>

    <div class="dev">This software is in development.</div>

  </div>
  <div class="clearfix"></div>
</form>

<script language="javascript">
html = '<strong>...or select an example:</strong> ';
html = html + '<select onchange="load_example();" id="sel_example">';
html = html + '<option value="">-- Choose Example --</option>';
{% for ex in examples %}
  html = html + '<option value="{{ex}}">{{ex}}</option>';
{% endfor %}
html = html + '</select>';
$('#examples').html(html);
</script>
{% endblock %}