{% extends "base.html" %}
{% load forms_tags %}
{% load django_tables2 %}

{% block title %}Message Tester - {{ block.super }}{% endblock %}

{% block extra_javascript %}
<script type="text/javascript">
	(function($) {
		$(function() {
			$("#id_text").keypress(function(ev) {
				if (ev.keyCode == 13 && !ev.shiftKey) {
					$(this).closest("form").submit();
					$("#id_submit").focus();
					ev.preventDefault();
				}
			}).focus();
		});
	})(jQuery);
</script>
{% endblock %}

{% block extra_stylesheets %}
    <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}httptester/stylesheets/httptester.css" />
{% endblock %}


{% block content %}
    <div class="page-header">
        <h1>Message Tester</h1>
    </div>

    <div>  {# this div keeps the next two side-by-side #}
        <div class="span4">
            <div>{# <-- without this div, the header overlays the top border of the form area #}
                <form action="" method="post" enctype="multipart/form-data">
                    {% render_form message_form %}
                    {% csrf_token %}

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary" id="send-btn" name="send-btn">Send</button>
                        <label for="send-btn">Send single or multiple messages</label>
                        <button type="submit" class="btn btn-primary" id="clear-btn" name="clear-btn">Clear</button>
                        <label for="clear-btn">Clear saved messages to/from this phone number</label>
                        <button type="submit" class="btn btn-primary" id="clear-all-btn" name="clear-all-btn">Clear all</button>
                        <label for="clear-all-btn">Clear all saved messages</label>
                    </div>
                </form>
            </div>
        </div>
        <div class="span8">
            {% if messages_table.rows %}
                {% render_table messages_table %}
            {% else %}
                <table>
                {% if router_available %}
                    <tr class="no-data look-left">
                        <td colspan="2">
                            <p>
                                You haven't sent or received any test messages yet.<br />
                                Use the form on the left to get started.
                            </p>
                        </td>
                    </tr>{% else %}
                    <tr class="no-data error">
                        <td colspan="2">
                            <p>
                                The RapidSMS router could not be reached.<br />
                                Please check that it is running.
                            </p>
                        </td>
                    </tr>{% endif %}
                </table>
            {% endif %}
        </div>

    </div>
{% endblock %}