{% 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/js/zephyr.js"></script>

<span id="unhide" style="background-color: aqua;" onclick="unhide()">Unhide</span>

<div id="main_div">
<table id="table">
{% for zephyr in zephyrs %}
<tr id={{ zephyr.id }}>
<td class="pointer">{% if user_profile.pointer == zephyr.id %}<p id="selected">&gt;{% else %}<p>{% endif %}</p></td>
<td class="zephyr">
<p><span onclick="narrow('{{ zephyr.display_recipient }}', '{{ zephyr.id }}')" class="zephyr_class" style="background-color: {% if zephyr.recipient.type == 'class' %}yellow{% else %}magenta{% endif %};">{{ zephyr.display_recipient }}</span> /
<span onclick="narrow_instance('{{ zephyr.display_recipient }}', '{{ zephyr.instance }}', '{{ zephyr.id }}')" class="zephyr_instance" style="background-color: green;">{{ zephyr.instance }}</span> /
<span onclick="prepare_personal('{{ zephyr.sender.user.username }}')" style="background-color: magenta;">{{ zephyr.sender.user.username }}</span><br />
{{ zephyr.content }}
</p></td>
</tr>
{% endfor %}
</table>
</div>

<div class="tabbable container">
    <ul class="nav nav-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>
    </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" />
                    </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" />
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}