{% extends "spel_base.html" %}
{% load static %}

{% block common_css %}
  <link rel="stylesheet" href="{% static 'spel/lib/bootstrap/css/bootstrap.min.css' %}">
  <link rel="stylesheet" href="{% static 'spel/lib/bootstrap-multiselect.css' %}">
  <link rel="stylesheet" href="{% static 'spel/lib/datepicker3.css' %}">
  <link rel="stylesheet" href="{% static 'spel/lib/theme.bootstrap.css' %}">
  <link rel="stylesheet" href="{% static 'spel/css/spel.css' %}">
{% endblock %}

{% block page_title %}Théâtre{% endblock %}

{% block spel_content %}
      <h3>Page Théâtre</h3>
      <div class="row">
        <div class="col-md-6 chapters">
          <h4 class="text-center">CHAPITRES</h4>
          <div class="row filter-row">
            <div class="col-md-4">Dates de répétition :</div>
            <div class="col-md-7 input-daterange input-group">
              <span class="input-group-addon">de</span>
		      <input type="text" class="input-sm form-control" name="start_date" />
		      <span class="input-group-addon">jusqu'à</span>
		      <input type="text" class="input-sm form-control" name="end_date" />
		    </div>
		  </div>
          <div class="row filter-row">
            <div class="col-md-4">
              <select id="mulsel1" class="multiselect" multiple="multiple" data-title="Types de chapitres">
              </select>
            </div>
            <div class="col-md-4">
              <select id="mulsel2" class="multiselect" multiple="multiple" data-title="Modalités scéniques" disabled="disabled">
              </select>
            </div>
            <div class="col-md-4">
              <select id="mulsel3" class="multiselect" multiple="multiple" data-title="Personnages" disabled="disabled">
              </select>
            </div>
          </div>
          <div class="row filter-row toggle-text"><span class="glyphicon glyphicon-chevron-right"></span> Voir les références de textes</div>
          <div class="row filter-row theatre-text" style="display: none;">
            <iframe src="{% url 'spel_ctb' %}" width="97%" height="150px"></iframe>
            <span>Début : </span><select id="start-text"></select>
            <span>Fin : </span><select id="end-text"></select>
          </div>
          <div class="row filter-row text-center">
            <button id="btn-filter-chapters" class="btn btn-success" disabled="disabled">FILTRER</button>
          </div>
          <div class="chapter-results"></div>
        </div>
        <div class="col-md-6 annotations">
          <h4 class="text-center">ANNOTATIONS</h4>
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <div class="col-md-8 col-md-offset-1">
                <input type="text" class="form-control" id="search-input">
              </div>
              <div class="col-md-3">
                <button id="btn-search-annotations" class="btn btn-success" disabled="disabled">
                  <span class="glyphicon glyphicon-search form-control-feedback"></span>
                </button>
              </div>
            </div>
          </form>
          <div class="row">
	          <div class="col-md-8 col-md-offset-1">
	            <select id="mulsel4" class="multiselect" multiple="multiple" data-title="Catégories d'annotations" disabled="disabled">
	            </select>
	          </div>
	          <div class="col-md-3">
	            <button id="btn-filter-annotations" class="btn btn-success">FILTRER</button>
	          </div>
	      </div>
          <div class="annotation-results"></div>
        </div>
      </div>
{% endblock %}
{% block page_js %}
  <script type="text/javascript" src="{% static 'spel/lib/jquery.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'spel/lib/jquery.tablesorter.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'spel/lib/jquery.tablesorter.widgets.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'spel/lib/bootstrap/js/bootstrap.min.js' %}"></script>
  <script type="text/javascript" src="{% static 'spel/lib/bootstrap-multiselect.js' %}"></script>
  <script type="text/javascript" src="{% static 'spel/lib/bootstrap-datepicker.js' %}"></script>
  <script type="text/javascript" src="{% static 'spel/lib/locales/bootstrap-datepicker.fr.js' %}"></script>
  <script type="text/javascript" src="{% static 'spel/js/spectacle.js' %}"></script>
  <script type="text/javascript">
  var urlMS = "{% url 'api_dispatch_list' resource_name='tags' api_name='1.0' %}?format=json&limit=500&name__startswith=modalites_sceniques:";
  var urlP = "{% url 'api_dispatch_list' resource_name='tags' api_name='1.0' %}?format=json&limit=500&name__startswith=personnages:";
  var urlTI = "{% url 'api_dispatch_list' resource_name='tags' api_name='1.0' %}?format=json&limit=500&name__startswith=type_inter:&order_by=name";
  var urlRT = "{% url 'api_dispatch_list' resource_name='tags' api_name='1.0' %}?format=json&limit=1000&name__startswith=ref_text:";
  var urlChapters = "{% url 'spel_chapters' %}";
  var urlAnnotations = "{% url 'spel_annotations' %}";
  var csrf_token = "{{csrf_token}}";
  $('.input-daterange').datepicker({
	    format: "yyyy-mm-dd",
	    language: "fr",
	    startDate: new Date({{ start_date|date:"Y" }}, {{ start_date|date:"n"|add:"-1" }}, {{ start_date|date:"j" }}),
	    endDate: new Date({{ end_date|date:"Y" }}, {{ end_date|date:"n"|add:"-1" }}, {{ end_date|date:"j" }})
  });
  </script>
{% endblock %}