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

{% load jstemplate %}

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

{% block content %}

{% icanhazjs "zephyr" %}
<script type="text/javascript" src="/static/third/jquery/jquery.form.js"></script>
<script type="text/javascript" src="/static/third/ich/ICanHaz.min.js"></script>
<script type="text/javascript" src="/static/js/zephyr.js"></script>
<script type="text/javascript">
var initial_zephyr_json = {{ zephyr_json }};
var initial_pointer = {{ user_profile.pointer }};
var username = "{{ user_profile.user.username }}";
var class_list = {{ classes }};
var instance_list = {{ instances }};
var people_list = {{ people }};
</script>

<div class="row-fluid">
<div id="main_div" class="span12">
<table id="table">
</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>

<div class="row-fluid" id="connection-error">
    <div class="span12">
        <div class="alert alert-error">
            <strong>Can't receive messages</strong> &mdash; try reloading the page.
        </div>
    </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="alert" id="class-dne">
            <p>The class <span class="classname" id="class-dne-name"></span> does not exist.</p>
            <a id="create-it" class="btn btn-primary" href="#">Create and send</a>
            <a class="btn" onClick="$('#class-dne').stop(true).fadeOut(500);">Cancel message</a>
        </div>
        <div class="alert" id="class-nosub">
            <p>You're not subscribed to the class <span class="classname" id="class-nosub-name"></span>.</p>
            <a id="sub-it" class="btn btn-primary" href="#">Subscribe and send</a>
            <a class="btn" onClick="$('#class-nosub').stop(true).fadeOut(500);">Cancel message</a>
        </div>
        <div class="tab-pane active" id="class-message">
            <form action="/zephyr/" method="post" class="zephyr">
                <input type="hidden" name="type" value="class" />
                {% 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="/zephyr/" method="post" class="zephyr">
                <input type="hidden" name="type" value="personal" />
                {% 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_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 %}