{% 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 %}Opéra{% endblock %}

{% block spel_content %}
      <h3>Page Opéra</h3>
      <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-2">Dates de répétition :</div>
          <div class="col-md-4 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-3">
          <select id="mulsel2" class="multiselect" multiple="multiple" data-title="Modalités scéniques" disabled="disabled"></select>
        </div>
        <div class="col-md-3">
          <select id="mulsel3" class="multiselect" multiple="multiple" data-title="Personnages" disabled="disabled"></select>
        </div>
        <div class="col-md-3">
          <select id="mulsel4" class="multiselect" multiple="multiple" data-title="Type travail" disabled="disabled"></select>
        </div>
        <div class="col-md-3">
          <form id="searchform" role="form">
            <input type="text" class="form-control" id="search-input" name="search-input" placeholder="Commentaire" />
            <button style="display: none;"><span class="glyphicon glyphicon-search form-control-feedback"></span></button>
          </form>
        </div>
      </div>
      <div class="row filter-row">
        <div class="col-md-3">
          <select id="mulsel5" class="multiselect" multiple="multiple" data-title="Actes" disabled="disabled"></select>
        </div>
        <div class="col-md-3">
          <select id="mulsel6" class="multiselect" multiple="multiple" data-title="Scènes" disabled="disabled"></select>
        </div>
        <div class="col-md-6">
          <form class="form-inline" role="form">
            Mesures : <small>Début : </small><select class="form-control select-opera" id="start-mesure"></select>
            <small>Fin : </small><select class="form-control select-opera" id="end-mesure" disabled="disabled"></select>
          </form>
        </div>
      </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">Résultats d'annotations</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/opera.js' %}"></script>
  <script type="text/javascript">
  var urlOMS = "{% url 'api_dispatch_list' resource_name='tags' api_name='1.0' %}?format=json&limit=500&name__startswith=opera_modalites_sceniques:&order_by=name";
  var urlOP = "{% url 'api_dispatch_list' resource_name='tags' api_name='1.0' %}?format=json&limit=500&name__startswith=opera_personnages:&order_by=name";
  var urlOTT = "{% url 'api_dispatch_list' resource_name='tags' api_name='1.0' %}?format=json&limit=1000&name__startswith=opera_type_travail:&order_by=name";
  var urlOA = "{% url 'api_dispatch_list' resource_name='tags' api_name='1.0' %}?format=json&limit=500&name__startswith=opera_acte:&order_by=name";
  var urlOS = "{% url 'api_dispatch_list' resource_name='tags' api_name='1.0' %}?format=json&limit=500&name__startswith=opera_scene:&order_by=name";
  var urlOM = "{% url 'api_dispatch_list' resource_name='tags' api_name='1.0' %}?format=json&limit=500&name__startswith=opera_mesure&order_by=name";
  //var urlChapters = "{% url 'spel_chapters' %}";
  var urlAnnotations = "{% url 'spel_opera_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 %}