{% extends 'noel/base.html' %}

{% block title %} ITF: {{ tab.module.title }}: {{ tab.title }}: {{ item.get_title }} {% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/noel/inner.css" type="text/css" />
<link rel="stylesheet" href="/static/css/noel/inner-details.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="/static/css/jquery.tooltip.css" />
<script type="text/javascript" src="/static/js/history/history.js"></script>
<script type="text/javascript" src="/static/js/history/amplify.store.js"></script>
<script type="text/javascript" src="/static/js/history/history.html4.js"></script>
<script type="text/javascript" src="/static/js/history/history.adapter.jquery.js"></script>
<script type="text/javascript" src="/static/js/query_parser.js"></script>
<script type="text/javascript" src="/static/js/jquery.tooltip.js"></script>
<script type="text/javascript" src="/static/js/render_object.js"></script>
<script type="text/javascript" src="/static/js/jquery.pandoravideo.js"></script>

{% endblock %}


{% block content %}

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="lightboxPanel">
    <div id="lightboxContent">

    </div>
    <div id="lightboxClose">
    <img src="/static/images/noel/close.jpg" width="12" height="16"  id="closeImg" alt="close" /></div>
</div>
<div id="lightbox"></div>

<div id="moduleAbout" class="hidden">
	<div class="lightboxStyling">
    	<h1>{{ tab.module.title }}</h1>
       <!-- <h2>Dummy sub-title</h2> -->

	        <p> {{ tab.module.about|linebreaksbr }} </p>
        <!--
        <div class="lightboxImg">
            <img src="/static/images/noel/events-tab.jpg" width="230" height="233" alt="close" />
            <p class="imgCaptionLightbox">Some Image Caption here</p>
        </div>
        <p>Some text here</p>
        -->
    </div>
</div>

<!--
<div id="moduleAdd" class="hidden">
    <form id="addForm" action="" method="POST" data-id="{{ default_tab.id }}">
    <table>
    {{ add_form.as_table }}
    <tr>
      <td>
      
      </td>
      <td>
      	<input type="submit" />
      </td>
    </tr>
    </table>
    </form>
</div>
-->

<div id="centerInner">
	<!--<div id="woodPng">
	</div>-->  
   	<div id="shadow">
   	</div>
    
  <div class="centerInnerContent">
    
    <div id="leftColumn">
        {% load itftags %}    	
        <h3 id="topText" class="tabHeader">{{ tab.title|format_title|safe }}</h3>
          
        <div id="searchInnerDiv">
            <!--<img src="/static/images/noel/search-inner.png" width="22" height="18" alt="search" class="searchInner">-->	
            <img src="/static/images/noel/about.png" width="22" height="22" id="aboutBtn" alt="About" title="About">
            {% comment %}
            {% if has_add %}
                        <img src="/static/images/noel/add.png" width="28" height="20" id="addBtn" alt="About" title="Add">
            
            {% endif %}
            {% endcomment %}
            {% ifequal title "Best Practices" %} <!-- FIXME!!! -->
                <a target="_blank" href="/static/upload/bestpractices_downloads/INDIA_THEATRE_FORUM_BOOK-rev-4-4-11.pdf">
                    <img src="/static/images/noel/Download-Icon.gif" width="29" height="20" id="downloadBtn" alt="Download" title="Download">
                </a>
            {% endifequal %}
            <!--
            <img src="/static/images/noel/search-inner.png" width="22" height="18" alt="search" class="searchInner">
            <img src="/static/images/noel/search-inner.png" width="22" height="18" alt="search" class="searchInner">
            -->
        </div>
        <!--
        <form action="" method="get">
            <input type="text" placeholder="search" name="field" class="searchInnerField"/>
        </form>
		-->
        <div id="tabsInner">
	  		<ul id="selection">

<!--                 <li class="tabCategory defaultTab" data-id="{{ default_tab.id }}" id="tab_{{default_tab.slug}}" data-slug="{{ default_tab.slug }}">{{ tab.title }}</li> -->
                {% for t in tabs %}
                   
                    <li class="tabCategory {% ifequal t.id tab.id %} innerSelected {% endifequal %}" data-id="{{ t.id }}" id="tab_{{ t.slug }}" data-slug="{{ t.slug }}"><a href="{{ t.get_absolute_url }}">{{ t.title }}</a></li>
                   
                {% endfor %}
	  		</ul>
            
	    	<div id="contentTabsInner">
                <div id="tabText_{{default_tab.id}}" class="tabText displayedTab">
	  	            {{ tab.text }}
                </div>
               <form class="selectMenu" id="listForm" method="GET" action=".">
                        
                        <span>Sort:</span><!--Can i avoid a p tag here to keep it inline -->
                        <select id="orderBySelect" name="sort">Select
                            {% for s in tab.get_dict.sorts %}
                                <option value="{{s.operator}}{{s.field_name}}">{{s.friendly_name}}</option>
                            {% endfor %}                            
<!--
                            <option value="atoz">A-Z</option>
                            <option value="ztoa">Z-A</option>
                            <option value="title">Title</option>
                            <option value="mostpopular">Most popular</option>
-->
                        </select>
                        <input name="tab" type="hidden" value="{{ tab.slug }}" />
                        <input id="page" name="page" type="hidden" value="{{ request.GET.page|default:'1' }}" />
                        <!-- <input id="object_id" name="object_id" type="hidden" value="{{ item.id }}" /> -->
                        <input type="text" placeholder="Filter by keyword" id="searchList" name="search" class="searchListField" value="{{ request.GET.search }}" />
                        <!--<img src="/static/images/noel/search-icon.png" width="18" height="14" alt="search-icon" id="searchListIcon">-->                    
                        
                        <span id="pageDisplay" style="display:none;">Page <span id="currPageNo">1</span> of <span id="totalPages">10</span></span>
                        </form>
                        
                    
            </div>
	    </div>

        	<div id="triangleUp">prev</div>
      		<div id="triangleDown">next</div>
            
            <div class="clear"></div>
                
     
        <div id="listLeft">
      		<ul>
                <li id="loadingList" style="display:none;">Loading...</li>
                
                {% for l in object_list.items %}
                    <li class="tabListItem"><a href="{{ l.url }}" {% ifequal l.id item.id %} class="listLeftSelected" {% endifequal %} data-id="{{ l.id }}""><span>{{ l.title }}</span></a></li>
                {% endfor %}
               
        		<!-- <li><a href=""><span>The Mystery of vanishing rights<span></a></li> -->
  	        </ul>
        
        </div>

    </div>
    
    <div id="rightColumn">
 
   		<div id="topRight">
            <img src="/static/images/noel/pin.png" width="46" height="58" alt="pin" id="pin">
 
    		<div id="imageLeft">
                <div id="imageInside" style="background:url('{{ item.insidepage_dict.main_image.thumb }}')">
                    
                </div>
 
        	</div>
      		<p id="textRight">
                {{ item.get_title }}
        	</p>
         
        	<div class="socialIcons">
                
                    <a href="" target="_blank" id="twitterBtn" title="Tweet this!" class="iconS"><img src="/static/images/noel/tweet.png" width="18" height="18" alt="twitter" class="iconImages"> </a>
                    <!--<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="http://twitter.com/#!/indtheatreforum">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>-->     	

<div class="g-plusone iconS" data-size="small" data-annotation="none"></div>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
         

<div id="fb_like" class="fb-like iconS" data-href="{{ item.get_absolute_url }}" data-send="false" data-width="90" data-show-faces="false" data-layout="button_count"></div>
                   <!-- <img src="/static/images/noel/facebook.png" width="18" height="18" alt="facebook" class="iconImages"> -->  
   <!-- <iframe src="http://www.facebook.com/plugins/like.php?href=www.theatreforum.in&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>-->
                

                    <a href="" id="permalinkBtn" title="Permalink" class="iconS"><img src="/static/images/noel/download.jpg" width="18" height="18" alt="permalink" title="Permalink" class="iconImages"></a>
          	</div>
            <div style="clear:both;"></div>
    	</div>
        
    <div id="bottomRight">
        {{ item_data.html|safe }}    

    </div>
  </div>
  <div id="clearBoth"></div>
 </div>

</div>

{% endblock %}