{% extends "sakai/base.html" %}{% load molly_sakai %}{% load molly_utils %}{% load i18n %}

{% block extrahead %}
<style type="text/css">
    .signed-up td {
        background: #e5f0e1;
        background: 
        -webkit-gradient(linear, left top, left bottom, from(#e5f0e1), to(#ddf0d6));
        background:
        -moz-linear-gradient(center top, #e5f0e1, #ddf0d6);
    }
    
    .full td {
        background: #f0e1d6;
        background: -webkit-gradient(linear, left top, left bottom, from(#f0e7e1), to(#f0e1d6));
        background: -moz-linear-gradient(center top, #f0e7e1, #f0e1d6);
    }
    
    .waiting-list td {
        background: #eff0d6;
        background: -webkit-gradient(linear, left top, left bottom, from(#eff0e1), to(#eff0d6));
        background: -moz-linear-gradient(center top, #eff0e1, #eff0d6);
    }
    
    .on-waiting-list td {
        background: #eff0d6;
        background: -webkit-gradient(linear, left top, left bottom, from(#eff0e1), to(#eff0d6));
        background: -moz-linear-gradient(center top, #eff0e1, #eff0d6);
    }

    .header {
        border-bottom: 1px solid #888;
    }
    
    table {
        border-spacing:0;
        width: 100%;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        text-shadow: 0px 1px 1px #fff;
    }
    
    table tr.new-week td {
        background: #DEE6FF;
        background: -webkit-gradient(linear, left top, left bottom, from(#A7BAC7), to(#DEE6FF));
        background:-moz-linear-gradient(center top, #A7BAC7, #DEE6FF);
        padding: 5px 5px 5px 7px; 
        border: 0;
        font-size: 1.1em;
    }
    
    table tr td {
        border-bottom: 1px solid #888;
        border-top: 1px solid #fff;
        padding: 7px 3px;
        background: #eee;
        background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#eee));
        background: -moz-linear-gradient(center top, #f3f3f3, #eee);
    }
    
    table tr td:last-child a {
        color: #fff;
        text-decoration:none;
        display: block;
        height: 2em;
        line-height: 2em;
        vertical-align: middle; 
        text-shadow: 0 -1px 1px #000;
    }
    
    table tr:last-child td:first-child {
        border-bottom-left-radius: 5px;
    }
    
    table tr:last-child td:last-child {
        border-bottom-right-radius: 5px;
    }
    
    div.button {
        background:#002147 url('{{ STATIC_URL }}images/icons/list-arrow.png') no-repeat;
        background-position: right center;
        margin: 0 2px 0 auto;
        min-width: 70px;
        max-width: 100px;
        padding: 3px;
        box-shadow: 3px 3px 4px #999;-webkit-box-shadow: 3px 3px 4px #999;-moz-box-shadow: 3px 3px 4px #999;
        border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; 
        border-color: #ccc;
        border: 1px solid rgba(255,255,255,0.3);
        border-width: 1px 0 0 1px; 
    }
</style>
{% endblock %}

{% block content %}
<div class="section">
    <div class="header">
        <h2>{{ event.title }}</h2>
    </div>
    {# Metadata about the sign-up slots #}
    <div class="section-content">
        
        {# Time and Date #} 
        {% ifequal event.start|date:"dMY" event.end|date:"dMY" %}
            {# Display Term Week + Name, Date + Time start -> end #}
            {{ event.startTime|from_sakai_timestamp|date:"d M Y" }} 
            {{ event.startTime|from_sakai_timestamp|date:"g:iA" }} - {{ event.endTime|from_sakai_timestamp|date:"g:iA" }}
        {% else %}
            {# Display startTime + startDate - endTime + endDate #}
            {{ event.startTime|from_sakai_timestamp|date:"g:iA, d M Y" }} - {{ event.endTime|from_sakai_timestamp|date:"g:iA, d M Y" }}
        {% endifequal %}
        <br />
        
        {# Location #}      
        {{ event.location }} 

        <dl>
            <dt>Description</dt>
            {# CLENSE ME! #}
            <dd>{{ event.description|sanitize_html }}</dd>
            
            <dt>{% trans "Organiser" %}</dt>
            <dd>{{ event.organizerName }}</dd>
            <dd></dd>
            
            <dt>{% trans "Status" %}</dt>
            {% if event.startToSignUp and not event.passedDeadline %}
                <dd>{% blocktrans with event.signupDeadline|from_sakai_timestamp|date:"DATETIME_FORMAT"|lower as signup_deadline %}Open to sign up until {{ signup_deadline }}{% endblocktrans %}</dd>
            {% else %}
                {% if event.passedDeadline and not event.meetingExpired %}
                    <dd>{% trans "Sign up deadline has passed" %}</dd>
                {% else %}
                    {% if event.meetingExpired %}
                        <dd>{% trans "This meeting has already happened!" %}</dd>
                    {% else %}
                        <dd>{% blocktrans with event.signupBegins|from_sakai_timestamp|date:"DATETIME_FORMAT" as open_time %}Sign up will open on {{ open_time }}{% endblocktrans %}</dd>
                    {% endif %}
                {% endif %}
            {% endif %}
        </dl>
    </div>
    {# End Metadata about the sign-up slots #}

    <table>
        <tbody>
        {# Loop through the individual slots #}    
        {% for ts in event.signupTimeSlotItems %}
            <tr class="{{ ts|signup_status:event }}">
                <td>{{ ts|signup_status:event|signup_status_human }}</td>
                <td>
                    {# Time Range -- needs multi date possibility #}
                    {{ ts.startTime|from_sakai_timestamp|date:"g:iA"|lower }} - {{ ts.endTime|from_sakai_timestamp|date:"g:iA"|lower }}<br />
    
                    {# max Attendees #}
                    <small>{% blocktrans with ts|places_left as places_left and ts.maxNoOfAttendees as capacity %}Places available: {{ places_left }}/{{ capacity }}{% endblocktrans %}</small><br />
    
                    {# if the sign-up event is set up to display attendee names #}
                    {% if ts.displayAttendees %}
                        {% for attendee in ts.attendees %}
                            {{ attendee.displayName }}{% if not forloop.last %},{% endif %}
                        {% endfor %}
                    {% else %}
    
                        {# otherwise #}
                        {% if ts.signedUp and not ts.attendees|length_is:"1" %}
                            {% blocktrans count ts.attendees|length|add:"-1" as attendee_number %}You and {{ attendee_number }} other{% plural %}You and {{ attendee_number }} others{% endblocktrans %}
                        {% else %}
                            {% if ts.attendees|length_is:"0" %}
                                {% trans "No one yet" %}
                            {% else %}
                                {% blocktrans count ts.attendees|length as attendee_number %}{{ attendee_number }} attendee{% plural %}{{ attendee_number }} attendees{% endblocktrans %}
                            {% endif %}
                        {% endif %}
                    {% endif %}
    
                    {# Is user signed up or on waiting list? #}
                    {% if ts.signedUp %}
                        {% trans "You're signed up" %}
                    {% else %}
                        {% if ts.onWaitList %}{% trans "You're on the waiting list" %}{% endif %}
                    {% endif %}
    
                </td>
                <td>
                    <form method="post" action=".">
                        {% csrf_token %}
                        <input type="hidden" name="timeslot_id" value="{{ ts.id }}"/>
                        {% comment %}
                            If meeting has
                               a) Not Expired
                               b) Not passed its deadline
                               c) Is available to sign up
                               d) Time slot is not locked 
                        {% endcomment %}
    
                        {# The following mass of ifs results in a relevant button being displayed per time slot #}
                        {% if not event.meetingExpired and not event.passedDeadline and event.startToSignUp and not ts.locked %}
                            {# User is signed up to this slot, display cancel button #}
                            {% if ts.signedUp %}
                                <button type="submit" name="action" value="cancelSignup">{% trans "Cancel" %}</button>
                            {% else %}
                                {# User is on waiting list #}
                                {% if ts.onWaitList %}
                                    <button type="submit" name="action" value="removeWaitList">{% trans "Leave waiting list" %}</button>
                                {% else %}
                                    {# Slot is available #}
                                    {% if ts.available %}
                                        {# User is signed up to a different slot #}
                                        {% if signedUp %}
                                            <button type="submit" name="action" value="addToWaitList">{% trans "Move here" %}</button>
                                        {% else %}
                                            {# Let user sign up #}
                                            <button type="submit" name="action" value="signup">{% trans "Sign up" %}</button>
                                        {% endif %}
                                    {% else %}      
                                        {# Let user join waiting list #}
                                        <button type="submit" name="action" value="addToWaitList">{% trans "Join waiting list" %}</button>
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                        {% endif %}
                    </form>
    
                </td>
            </tr>
        {% endfor %}
       </tbody>
    </table>

</div>
{% endblock %}
