{% 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>

<div class="row-fluid">
<div id="main_div" class="span12">
<table id="table">
{% for zephyr in zephyrs %}
<tr id={{ zephyr.id }}>
<td class="pointer">{% if user_profile.pointer == zephyr.id %}<p id="selected">&#x25b6;{% else %}<p>{% endif %}</p></td>
<td class="zephyr">
<p><span onclick="narrow('{{ zephyr.display_recipient }}', '{{ zephyr.id }}')" class="label {% if zephyr.recipient.type == 'class' %}zephyr_class{% else %}zephyr_personal_recipient{% endif %}">{{ zephyr.display_recipient }}</span>

{% if zephyr.recipient.type == 'class' %}
<span onclick="narrow_instance('{{ zephyr.display_recipient }}', '{{ zephyr.instance }}', '{{ zephyr.id }}')" class="label zephyr_instance">{{ zephyr.instance }}</span>
{% else %}
&larr;
{% endif %}

<span onclick="prepare_personal('{{ zephyr.sender.user.username }}')" class="label zephyr_sender">{{ zephyr.sender.user.username }}</span><br />
{{ zephyr.content }}
</p></td>
</tr>
{% endfor %}
</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>
    </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 %}