{% 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="#scripts">Scripts</a></li>
    <li><a href="#connections">Connections</a></li>
{% if productions %} <li><a href="#productions">Productions</a></li> {% endif %}
    <li><a href="#gallery">Gallery</a></li>
{% if resources %} <li><a href="#resources">Resources</a></li> {% endif %}
</ul>    

<div id="about" class="tab_content">
    <h3>{{ first_name }} {{ last_name }}</h3>
    <p>
        {% for o in occupations %}
            {{ o.name }}{% if not forloop.last %},{% endif %}
        {% endfor %}
    </p>
    
    <div>
        {{ about }}
    </div>
    
    <br />
    
    <div>Based in: (City)</div>
    <div>Languages I work in: 
        {% for lang in languages %}
        {{ lang.name }}{% if not forloop.last %},{% endif %}
        {% endfor %}
    </div>
    <div>DOB: {{ dob|date:"d M, Y" }}</div>
    <div>Gender: {{ gender }}</div>
    
    <a href="" class="toggleLink">Contact</a>
    <div class="toggleDiv" id="contactDiv" style="display:none;">
        {% if request.user.is_authenticated %}
        <form id="contactForm" action="/contact/person" 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>

    <div class="borderYellow"><br /></div>
    <br />

    {% if trainings %}    
    <div class="borderYellow">
        <h5 class="orangeInnerRight">Training</h5>
        {% for training in trainings %}
        <div>
            {{ training.area }},
            {% if training.person %}
                <a href="{{ training.person.get_absolute_url }}">{{ training.person}}</a>,
            {% else %}
                {{ training.with_whom }}
            {% endif %}
            {% if training.where %}
                <a href="{{ training.where.get_absolute_url }}">{{ training.where }}</a>,
            {% endif %}
            {% if training.locations %}
                {% for location in training.locations %}
                    {{ location.city.name }}{% if not forloop.last %},{% endif %}
                {% endfor %}
            {% endif %}
        </div>
        {% endfor %}
        <br />
    </div>

    <br />
    {% endif %}

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

    {% include 'includes/buzzitems.html' %}

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

<div id="scripts" class="tab_content">
    <div>Help text - to send them to script archive</div>
    <br />    
    {% for script in related_scripts %}
    <a href="{{ script.get_absolute_url }}">{{ script.title }}</a>
    <div>{{ script.synopsis }} <!-- <span class="toggleDiv">Extra information goes here</span> --></div>
    <br />
    {% endfor %}

</div> <!-- end scripts -->


<div id="connections" class="tab_content">
<!--    <p><a href="" class="toggleLink">A V Gopalakrishnan</a> Theatre Enthusiast, Mumbai</p>-->

    {% if groups %}
    <h5 class="orangeInnerRight">Member of</h5>
    <br />

    {% for group in groups %}
    <div class="productionEach">
        <div class="productionEachImg">
            <img src="" alt="/static/images/150x150.jpg" />
        </div>
	
	    <div class="productionEachTextA">
	        <a href="{{ group.group.get_absolute_url }}">{{ group.group.name }}</a>
	        <div>{{ group.group.locations.0.city.name }}</div>
	        <div>{{ group.role }}</div>
	    </div>
        <div class="clear"></div> 
  
    </div> <!-- end production each -->
    {% endfor %}

    {% endif %}
    <!--
    <a href="" class="toggleLink rightFloat">More>></a>

    <div class="clear"></div>
    -->


    {% if connections %}
        <h5 class="orangeInnerRight">Worked with</h5>
        <br />

    {% for connection in connections %}
    {% ifequal connection.person1 obj %}
        <div class="productionEach">
        	<div class="productionEachImg">
        	    <img src="{{ connection.person2.get_image }}" alt="/static/images/150x150.jpg" />
        	</div>
	
	<div class="productionEachTextA">
	    <a href="{{ connection.person2.get_absolute_url }}">{{ connection.person2.first_name }} {{ connection.person2.last_name }}</a>
	    <div>{{ connection.person2.about|truncatewords:40 }}</div>
	    <div>{{ connection.person2.locations.0.city.name }}</div>
	</div>
        <div class="clear"></div> 
  
    </div> <!-- end production each -->
    {% else %}
        <div class="productionEach">
        	<div class="productionEachImg">
        	    <img src="{{ connection.person1.get_image }}" alt="/static/images/150x150.jpg" />
        	</div>
	
	<div class="productionEachTextA">
	    <a href="{{ connection.person1.get_absolute_url }}">{{ connection.person1.first_name }} {{ connection.person1.last_name }}</a>
	    <div>{{ connection.person1.about|truncatewords:40 }}</div>
	    <div>{{ connection.person1.locations.0.city.name }}</div>

	</div>
        <div class="clear"></div> 
  
    </div> <!-- end production each -->
    {% endifequal %}
    {% endfor %}
    {% endif %}

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

{% if productions %}
<div id="productions" class="tab_content">
    <h3 class="orange">Productions</h3> 
    {% for p in productions %}
    <div class="productionEach">
	<div class="productionEachImg">
	    <img src="" alt="/static/images/150x150.jpg" />
	</div>
	
	<div class="productionEachTextA">
	    <a href="{{ p.production.get_absolute_url }}">{{ p.production.name }}</a>
	    <div>Group: {{ p.production.group.name }}</div>
	    <div><em>{{ p.years }}</em></div>
	</div>
    <div class="clear"></div> 
    </div> <!-- end production each -->
    {% endfor %}
</div> <!-- end productions -->
{% endif %}


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

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

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