<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">
    {% if shows %}<li><a href="#calendar">Calendar</a></li>{% endif %}
    <li><a href="#about">About</a></li>
    <li><a href="#cast">Cast and Crew</a></li>
    <li><a href="#gallery">Gallery</a></li>
    <li><a href="#buzz">Buzz</a></li>
    <li><a href="#notes">Notes</a></li>
</ul>    

{% if shows %}
<div id="calendar" class="tab_content">
    <h3>{{ name }}</h3>
    
    <table width="520" border="1" cellspacing="0" cellpadding="0" class="tableCalendar">
        {% for show in shows %}
        <tr>
            <td>
                {{ show.start_date|date:"d M, Y" }}
            </td> 
            <td>
                {{ show.start_time|time:"P" }}                
            </td>
            <td>
               {{ show.city.name }} 
            </td>
            <td>
                {% if show.booking_link %}
                    <a href="{{ show.booking_link }}" target="_blank">Book now</a>
                {% else %}
                    <a href="{{ show.get_absolute_url }}" target="_blank">More details</a>
                {% endif %}
            </td>

        </tr>

        {% endfor %}
    </table>

<!-- <a href="" class="toggleLink rightFloat">More&gt;&gt;</a> -->

</div> <!-- end div calendar -->
{% endif %}

<div id="about" class="tab_content">
    
    <h3 class="borderYellow paddingBottom">{{ name }}</h3>
    
    {% if group %} <div class="paddingTop"><strong>Group: </strong>{{ group.name }}</div> {% endif %}
    {% if languages %}
    <div><strong>Languages: </strong>
        {% for language in languages %}
            {{ language.name }}
        {% endfor %}
    </div>
    {% endif %}
    <div>From {{ debut_date|date:"Y" }} {% if last_date %} - {{ last_date|date:"Y" }} {% endif %}</div>
    {% comment %}
    <div><strong>No of Shows: </strong> </div>
    <div class="borderYellow">    <a href="" class="toggleLink rightFloat">Book Now>></a>   
    <br /><br />
    </div>
    
    {% endcomment %}
    <br />
 
    {% if playwright %}
    <div><strong>Writer: </strong> 
            <a href="{{ playwright.get_absolute_url }}" target="_blank">
                {{ playwright }}
            </a>
    </div>
    {% endif %}
    {% if director %}
    <div><strong>Director: </strong>
            <a href="{{ director.get_absolute_url }}" target="_blank">
                {{ director }}
            </a>
    </div>
    {% endif %}
    <!-- <div><strong>Credits: name (research), name (music)</strong></div> -->
    <div class="borderYellow">    <a href="" class="toggleLink rightFloat">See full credits>></a><br /><br /></div>   

    <br />
    
    <div>
        <p>
           {{ synopsis|linebreaksbr }} 
	    </p>
    </div>
    
        <div class="borderYellow">
            <!-- <a href="">Contact</a> -->
            {% if group.website %}
            <div>Group website: <a href="{{ group.website }}" target="_blank">{{ group.website }}</a> </div>
            {% endif %}
        <br />
	</div>
        
        <br />
       {% if awards %} 
        <div class="borderYellow">
            <h5 class="orangeInnerRight">Awards</h5>
          {% for award in awards %}
            <div>
                {{ award.title }}
                {% if award.year %},
                    {{ award.year }}
                {% endif %}
                {% if award.link %},
                    <a href="{{ award.link }}" target="_blank">link</a>
                {% endif %}

            </div>
            {% endfor %}


        <br />
	</div>
    {% endif %}
        
        <br />
</div> <!-- end about -->

<div id="cast" class="tab_content">
</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' %}
    <br />

    {% load  comments %}

    <h3 class="orange">Comments</h3>

    {% get_comment_count for obj as comment_count %}
    {% if not comment_count %}
        <div class="borderYellow">
            <div>No comments added yet</div>
        </div>
    {% else %}
    
    {% render_comment_list for obj %}

    {% endif %}

    {% if user.is_authenticated %}
    <div class="addComments">
        <h4>Your comments</h4>

        <div id="comment_form">
        {% get_comment_form for obj as form %}
        <form action="{% comment_form_target %}" method="post">
            {% csrf_token %}
            <input type="hidden" name="next" value="{{ obj.get_absolute_url }}#buzz" />
            {{ form.as_p }}
            <p class="submit">
                <input type="submit" name="post" class="submit-post" value="Post" />
            </p>

        </form>
        <script>
        $('#id_honeypot').closest('p').hide();
        </script>
            
        </div>
    </div>
    {% else %}
    <div class="addComments">
        Please sign-in to add comments.
    </div>
    {% endif %}
    
</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 -->

<script type="text/javascript" src="/static/js/innertabs.js"></script>

<br />
<a href="{{ edit_url }}">Edit</a>
