{% extends "zephyr/base.html" %}

{% block nav %}
<li><a href="/accounts/logout/?next=/">Log out</a></li>
{% endblock %}

{% block content %}

<script type="text/javascript" src="/static/jquery/jquery.form.js"></script>
<script type="text/javascript" src="/static/js/zephyr.js"></script>
<script type="text/javascript">
var initial_zephyr_json = {{ zephyr_json }};
</script>

<div class="row-fluid">
<div id="main_div" class="span12">
<table id="table">
<tr><td class="pointer"><p id="selected">&#x25b6;</p></td><td>dummy row, FIXME</td></tr>
{# Zephyrs go here #}
</table>
</div>
</div>

<div class="row-fluid" id="narrow_bar">
    <div class="span12">
        <button id="unhide" class="btn" disabled=disabled onclick="unhide()">Show all</button>
        <span id="narrow_indicator"></span>
    </div>
</div>

<hr />

<div class="tabbable container">
    <ul class="nav nav-tabs" id="zephyr-type-tabs">
        <li class="active"><a href="#class-message" data-toggle="tab">Class message</a></li>
        <li><a href="#personal-message" data-toggle="tab">Personal message</a></li>
        <li class="alert pull-right" id="send-status"></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="class-message">
            <form action="/zephyr/" method="post" class="zephyr">
                {% csrf_token %}
                <div class="row-fluid">
                    <div class="span6">
                        <label>Class</label>
                        <input type="text" name="class" id="class" value="" />
                    </div>
                    <div class="span6">
                        <label>Instance</label>
                        <input type="text" name="instance" id="instance" value="" />
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12">
                        <label>Content</label> <textarea rows="4" cols="60" name="new_zephyr" id="new_zephyr" value="" /></textarea>
                        <input type="submit" value="Zephyr" class="btn" />
                    </div>
                </div>
            </form>
        </div>
        <div class="tab-pane" id="personal-message">
            <form action="/personal-zephyr/" method="post" class="zephyr">
                {% csrf_token %}
                <div class="row-fluid">
                    <div class="span6">
                        <label>User</label>
                        <input type="text" name="recipient" id="recipient" value="" />
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12">
                        <label>Content</label>
                        <textarea rows="4" cols="60" name="new_personal_zephyr" id="new_personal_zephyr" value="" /></textarea>
                        <input type="submit" name="personal_zephyr" value="Send personal" class="btn" />
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}