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

<ul class="tabsInnerRight">
    <li><a href="#about">About</a></li>
    <li><a href="#connections">Connections</a></li>
    <li><a href="#plays">Plays &amp; more</a></li>
    <li><a href="#gallery">Gallery</a></li>
    {% if resources %}<li><a href="#resources">Resources</a></li>{% endif %}
    <li><a href="#notes">Notes</a></li>
</ul>    

<div id="about" class="tab_content">
    <h3 class="borderYellow paddingBottom">{{ name }}</h3>
    {% if venues %}
        <div><strong>Based in: </strong>{% for v in venues %} {{ v.city.name }}{% if not forloop.last %}, {% endif %} {% endfor %}</div>
    {% endif %}
    {% if founded %}
    <div><strong>Founded: </strong>{{ founded }}</div>
    {% endif %}

    {% if languages %}
    <div class="borderYellow"><strong>Languages we work in: </strong>
    {% for l in languages %}
        {{ l.name }}{% if not forloop.last %}, {% endif %}
    {% endfor %}
    
    <br /><br />
    </div>
    {% endif %}

    <br />
    
    <div>
        <p>{{ about }}</p>
    </div>
    
    {% if tel %} <p>{{ tel }}</p> {% endif %}
    
        {% if website %}
        <div><a href="{{ website.url }}" target="_blank">{{ website.url }}</a></div>
        {% endif %}

        <div class="borderYellow">
         <a href="" class="toggleLink">Contact</a>
            <div class="toggleDiv" id="contactDiv" style="display:none;">
                {% if request.user.is_authenticated %}
                <form id="contactForm" action="/contact/group" 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>
        $(function() {
            $('.toggleLink').click(function(e) {
                e.preventDefault();
                $(this).next().toggle();
            });

            $('#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 /><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>
        
        <br />
        {% endif %}

        {% if buzzitems %}
        <h5 class="orangeInnerRight">More about us</h5>

        {% for item in buzzitems %}
        <a href="{{ item.link }}" target="_blank">{{ item.title }}</a>
        <div>{{ item.blurb }}</div>
        {% endfor %}

        {% endif %}

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

<div id="connections" class="tab_content">
        <h5 class="orangeInnerRight">Members</h5>
        <br />

        {% for p in people %}
        <div class="productionEach">
        	<div class="productionEachImg">
        	    <img src="" alt="/static/images/150x150.jpg" />
        	</div>
	
	<div class="productionEachTextA">
	    <a href="{{ p.person.get_absolute_url }}">{{ p.person.first_name }} {{ p.person.last_name }}</a>
	    <div>{{ p.person.about|truncatewords:15 }}</div>
	    <div>{{ p.role }}</div>
	</div>
        <div class="clear"></div> 
  
    </div> <!-- end production each -->
    {% endfor %}

    <br />
    
    <!-- <a href="" class="toggleLink rightFloat">More>></a> -->


    <div class="clear"></div>
        {% if worked_with_people %}
        
        <h5 class="orangeInnerRight">Worked with</h5>
        <br />
        {% for p in worked_with_people %}

        <div class="productionEach">
        	<div class="productionEachImg">
        	    <img src="" alt="/static/images/150x150.jpg" />
        	</div>
	
	<div class="productionEachTextA">
	    <a href="{{ p.person.get_absolute_url }}">{{ p.person.first_name }} {{ p.person.last_name }}</a>
            <div>{{ p.role }}: {{ p.name }}</div>
	    <!-- <div></div> -->
	</div>
        <div class="clear"></div> 
  
    </div> <!-- end production each -->

    {% endfor %}
    {% endif %}
    <!--    <a href="" class="toggleLink rightFloat">More>></a> -->
    
    
    <div class="clear"></div>
    
    <br />
    
</div> <!-- end connections -->


<div id="plays" class="tab_content">
    <h3 class="orange">Plays &amp; more</h3>
    
    {% for p in productions %}
        <div class="productionEach">
        	<div class="productionEachImg">
        	    <img src="" alt="/static/images/150x150.jpg" />
        	</div>
    	
	<div class="productionEachTextA">
	    <div class="orangeInnerRight">{{ p.name }} {% if p.debut_date %} {{ debut_date|date:"Y" }} {% endif %}</div>
	    <!-- <div>Group: Group Name</div> -->
	    <div><em>Title Credits: (not implemented)</em></div>
	    <div>No. of shows: (not implemented)</div>
	</div>
    <div class="clear"></div> 
 
    </div> <!-- end production each -->
    {% endfor %}

    <!-- <a href="" class="toggleLink rightFloat">More>></a>
    
    <div class="clear"></div> -->

    <h3 class="orange">Workshops (not implemented)</h3>

            <div class="productionEach">
        	<div class="productionEachImg">
        	    <img src="" alt="/static/images/150x150.jpg" />
        	</div>
    	
	<div class="productionEachTextA">
	    <div class="orangeInnerRight">Name of workshops</div>
	    <div><em>One line desc</em></div>
	    <div>Current</div>
	</div>
    <div class="clear"></div> 
 
    </div> <!-- end production each -->
    
    <div class="productionEach">
        <div class="productionEachImg">
            <img src="" alt="/static/images/150x150.jpg" />
        </div>
    	
	<div class="productionEachTextA">
	    <div class="orangeInnerRight">Name of workshops</div>
	    <div><em>One line desc</em></div>	
	</div>
    <div class="clear"></div> 
 
    </div> <!-- end production each -->

    <br />
    
    <a href="" class="rightFloat">More>></a>
    
    <div class="clear"></div>

    
    <h3 class="orange">More</h3>
    
    <div class="productionEach">
        <div class="productionEachImg">
            <img src="" alt="/static/images/150x150.jpg" />
        </div>
    	
	<div class="productionEachTextA">
	    <div class="orangeInnerRight">Name of activity (talk, whatever)</div>
	    <div><em>One line desc</em></div>
            <div>Current</div>
	</div>
    <div class="clear"></div> 
 
    </div> <!-- end production each -->

    <div class="productionEach">
        <div class="productionEachImg">
            <img src="" alt="/static/images/150x150.jpg" />
        </div>
    	
	<div class="productionEachTextA">
	    <div class="orangeInnerRight">Name of activity (talk, whatever)</div>
	    <div><em>One line desc</em></div>
            <div>Current</div>
	</div>
    <div class="clear"></div> 
 
    </div> <!-- end production each -->

</div> <!-- end plays --> 

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


{% if resources %}
<div id="resources" class="tab_content">
    {% for r in resources %}
    <div class="resourcesBlock">
	<div class="resourcesEach">
	    <div><strong>{{ r.title }}</strong></div>
	    <div>{{ r.desc }}</div>
        {% if r.url %}
	    <div><a href="{{ r.url }}" target="_blank">{{ r.url }}</a></div>
        {% endif %}
        {% if r.fil %}
	    <a href="{{ r.fil.url }}" target="_blank">Download</a>
        {% endif %}
	</div>
	
    
	<div class="productionEachImg">
        {% if r.thumbnail %}
        {% thumbnail r.thumbnail "150x150" crop="center" as thumb %}
	    <img src="{{ thumb.url }}" alt="" />
        {% endthumbnail %}
        {% else %}
        <img src="" alt="/static/images/150x150.jpg" />
        {% endif %}
	</div>	
    <div class="clear"></div>
    </div> <!-- end resources block -->
    {% endfor %} 
</div>
{% endif %}

<div id="notes" class="tab_content">
    <h3 class="orange">Kindly refer to notes tab in Script Archive</h3>
</div> <!-- end notes -->

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

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