{% load thumbnail %}
<link rel="stylesheet" href="/static/css/modules/tabsinnerright.css" type="text/css" />

<script>
$(function() {
    $('.toggleLink').click(function(e) {
        e.preventDefault();
        $(this).next().slideToggle();
    });
});
</script>

<ul class="tabsInnerRight">
    <li><a href="#about">About</a></li>
    {% if child_events %}
        <li><a href="#calendar">Calendar</a></li>
    {% endif %}
    {% if has_people_tab %}
        <li><a href="#people">People</a></li>
    {% endif %}
    {% if galleries %}
        <li><a href="#gallery">Gallery</a></li>
    {% endif %}
    <li><a href="#buzz">Buzz</a></li>
    <li><a href="#notes">Notes</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>    

<div id="about" class="tab_content">
    <h3>{{ title }}</h3>
    
    <div><strong>Tag-line: </strong> {{ oneliner }}</div>
    <div><strong>Description: </strong> {{ description }} </div>
    <div><strong>Event Type: </strong> {{ event_type }}</div>
    <div><strong>Address:</strong> {{ address }}</div>
    <div><strong>City:</strong> {{ city }}</div>
    <div><strong>Start date:</strong> {{ start_date|date:"jS M, Y" }}</div>
    {% if start_time %}
    <div><strong>Start time:</strong> {{ start_time|time:"P" }}</div>
    {% endif %}
    {% if end_date %}
    <div><strong>End date:</strong> {{ end_date|date:"jS M, Y" }}</div>
    {% endif %}
    {% if end_time %}
    <div><strong>End time:</strong> {{ end_time|time:"P" }}</div>
    {% endif %}

    {% if booking_link %}
    <div><strong>Booking Link: </strong><a href="{{ booking_link }}" target="_blank">{{ booking_link }}</a></div>
    {% endif %}

</div> <!-- end div about  -->

<div id="calendar" class="tab_content">
    {% for event in child_events %}
        <div>
            <a href="{{ event.get_absolute_url }}">{{ event.title }}</a>
            <div><strong>Start date:</strong> {{ event.start_date|date:"jS M, Y" }}</div>
            {% if event.start_time %}
            <div><strong>Start time:</strong> {{ event.start_time|time:"P" }}</div>
            {% endif %}
            {% if event.end_date %}
            <div><strong>End date:</strong> {{ event.end_date|date:"jS M, Y" }}</div>
            {% endif %}
            {% if event.end_time %}
            <div><strong>End time:</strong> {{ event.end_time|time:"P" }}</div>
            {% endif %}
            
        </div>
    {% endfor %}
    
</div> <!-- end calendar -->

<div id="people" class="tab_content">

    {% if people.organisers %}
    <h5>Organisers</h5>

    {% for person in people.organisers %}
        <div class="productionEach">
        	<div class="productionEachImg">
        	    <img src="{{ person.get_image }}" alt="/static/images/150x150.jpg" />
        	</div>
	
	        <div class="productionEachTextA">
	            <a href="{{ person.get_absolute_url }}">{{ person.first_name }} {{ person.last_name }}</a>
	            <div>{{ person.about|truncatewords:40 }}</div>
	            <div>{{ person.locations.0.city.name }}</div>
	        </div>
            <div class="clear"></div> 
  
        </div> <!-- end production each -->
    {% endfor %}
    {% endif %}

    {% if people.performers %}
    <h5>Performers</h5>

    {% for person in people.performers %}
        <div class="productionEach">
        	<div class="productionEachImg">
        	    <img src="{{ person.get_image }}" alt="/static/images/150x150.jpg" />
        	</div>
	
	        <div class="productionEachTextA">
	            <a href="{{ person.get_absolute_url }}">{{ person.first_name }} {{ person.last_name }}</a>
	            <div>{{ person.about|truncatewords:40 }}</div>
	            <div>{{ person.locations.0.city.name }}</div>
	        </div>
            <div class="clear"></div> 
  
        </div> <!-- end production each -->
    {% endfor %}
    {% endif %}


    {% if people.attendees %}
    <h5>Attendees</h5>

        {% for person in people.attendees %}
        <div class="productionEach">
        	<div class="productionEachImg">
        	    <img src="{{ person.get_image }}" alt="/static/images/150x150.jpg" />
        	</div>
	
	        <div class="productionEachTextA">
	            <a href="{{ person.get_absolute_url }}">{{ person.first_name }} {{ person.last_name }}</a>
	            <div>{{ person.about|truncatewords:40 }}</div>
	            <div>{{ person.locations.0.city.name }}</div>
	        </div>
            <div class="clear"></div> 
  
        </div> <!-- end production each -->
        {% endfor %}
    {% endif %}

    {% if groups.performing %}
    <h5>Groups Performing</h5>
    
    {% for group in groups.performing %}

    <div class="productionEach">
        <div class="productionEachImg">
            <img src="{{ group.get_image }}" alt="{{ group.name }}" />
        </div>
	
	    <div class="productionEachTextA">
	        <a href="{{ group.get_absolute_url }}">{{ group.name }}</a>
	        <div>{{ group.locations.0.city.name }}</div>
	    </div>
        <div class="clear"></div> 
  
    </div> <!-- end production each -->

    {% endfor %}    
    {% endif %}


</div>

<div id="gallery" class="tab_content">
    {% include 'includes/media_gallery.html' %}
</div> <!-- end gallery -->

<div id="buzz" class="tab_content">
    {% include 'includes/buzzitems.html' %}
</div> <!-- end buzz -->

<div id="notes" class="tab_content">
    <h3 class="orange">Kindly refer to notes in script archive. But instead of Posted by Name, Date, Time, make it - date, time</h3>
</div> <!-- end notes -->

<div id="contact" class="tab_content">
    {% if tel_no %}
    <div>
        <strong>Telephone:</strong> {{ tel_no }}    
    </div>
    {% endif %}

    {% if request.user.is_authenticated %}
    <form id="contactForm" action="/contact/event" method="POST">
        <!-- <input type="hidden" id="contactFrom" value="{{ request.user.id }}" /> -->
        <input type="hidden" id="contactTo" value="{{ obj.id }}" />
        <textarea id="contactMessage" placeholder="Type your message here..."></textarea>
        <input type="submit" value="Submit" />
    </form>
    {% else %}
    You need to be signed in to contact people.
    {% endif %} 
</div>

<script type="text/javascript" src="/static/js/innertabs.js"></script>
<script>
$(function() {

    $('#contactForm').submit(function(e) {
        e.preventDefault();
        var url = $(this).attr("action");
        $.get(url, {
//            'from': $('#contactFrom').val(),
            'to': $('#contactTo').val(),
            'message': $('#contactMessage').val()
            }, function(response) {
            $('#contactDiv').text(response);
        });
    });

});
</script>

<br />
{% if user_has_perms %}<a href="{{ edit_url }}">Edit</a>{% endif %}
