{% extends 'noel/base.html' %}
{% block title %} ITF: {{ 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/insidepage.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>{{ title }}</h1>
<!-- <h2>Dummy sub-title</h2> -->
<p> {{ 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">{{ 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 innerSelected">Info</li>
<li class="tabCategory innerSelected">Stories</li>
<li class="tabCategory innerSelected">FAQs</li>
<li class="tabCategory innerSelected">Guidelines</li>
-->
<li class="tabCategory defaultTab" data-id="{{ default_tab.id }}" id="tab_{{default_tab.slug}}" data-slug="{{ default_tab.slug }}">{{ default_tab.title }}</li>
{% for t in tabs %}
<li class="tabCategory" data-id="{{ t.id }}" id="tab_{{ t.slug }}" data-slug="{{ t.slug }}">{{ t.title }}</li>
{% endfor %}
</ul>
<div id="contentTabsInner">
<div id="tabText_{{default_tab.id}}" class="tabText displayedTab">
{{ default_tab.text }}
</div>
{% for t in tabs %}
<div id="tabText_{{t.id}}" class="tabText">
{{ t.text }}
</div>
{% endfor %}
<!--is this select okay, my forms are a bit weak, do we need action and method here?--><form class="selectMenu" id="listForm" method="post" action="">
<span>Sort:</span><!--Can i avoid a p tag here to keep it inline -->
<select id="orderBySelect">Select
{% for s in default_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 id="page_no" name="page_no" type="hidden" value="1" />
<input id="object_id" name="object_id" type="hidden" value="" />
<input type="text" placeholder="Filter by keyword" id="searchList" name="field" class="searchListField"/>
<!--<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">Loading...</li>
<!--
{% for l in default_list.items %}
<li class="tabListItem"><a href="{{ l.url }}" 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 id="pagination" style="display:none;"> <!-- Please, please let me display pagination info -->
<span id="currPageNo">1</span>
<span id="totalPages"></span>
</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">
</div>
</div>
<p id="textRight">
</p>
<div class="socialIcons">
<a href="" target="_blank" id="twitterBtn" title="Tweet this!"><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 id="fb_like" class="fb-like" data-href="http://theatreforum.in/m/bestpractices/?tab=cases&object_id=16" 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&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>-->
<a href="" id="permalinkBtn" title="Permalink"><img src="/static/images/noel/download.jpg" width="18" height="18" alt="permalink" title="Permalink" class="iconImages"></a>
</div>
</div>
<div id="bottomRight">
Loading...
</div>
</div>
<div id="clearBoth"></div>
</div>
</div>
{% endblock %}