{% extends 'base.html' %}
{% load static from staticfiles %}
{% block add_css %}
    <link rel="stylesheet" href="{% static "chosen-bootstrap/chosen.bootstrap.min.css" %}">
{% endblock %}
{% block content %}
    <form method="GET" id="calfilter" action="/calendar">
        <div class="container-fluid chosen-container side-by-side">
            <div class="row">
                <div class="col-lg-6" style="width:200px;">
                    <select data-placeholder="Calendar type" id="caltype" class="chosen-select">
                        <option value="engagements">Engagements</option>
                        <option value="tests">Tests</option>
                    </select>
                </div>
                <div class="col-lg-6" style="width:400px;">
                    <select data-placeholder="All users" multiple id="lead" name="lead" class="chosen-select">
                        <option value="0">All users</option>
                        <option value="-1">Unassigned</option>
                        {% for u in users %}
                            <option value="{{ u.id }}">{{ u.username }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-lg-6">
                    <button class="btn btn-primary" type="submit">Apply</button>
                </div>
            </div>
        </div>
    </form>
    <br/><br/>
    <div id="calendar"></div>
    <br/><br/>
{% endblock %}
{% block postscript %}
    <script type="application/javascript" src="{% static "chosen/chosen.jquery.min.js" %}"></script>
    <script>
          $(function () {
            $('#caltype').change(function() { $('#calfilter').attr('action', '/calendar/' + $(this).val()); });
            $(".chosen-select").chosen({disable_search_threshold: 10});
            $('#caltype').val('{{ caltype }}'); $('#caltype').trigger('change');
            $('#lead').val([{% for lead in leads %} '{{ lead }}', {% endfor %}]);
            $('.chosen-select').trigger('chosen:updated');
            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                editable: false,
                eventLimit: true, // allow "more" link when too many events
                events: [
                    {% if caltype == 'tests' %}
                        {% for t in tests %}
                            {
                                title: '{{t.engagement.product.name}}: {{ t.engagement.name|default:"Unknown" }} - {{ t.test_type }} ({{ t.lead|default:"Unassigned" }})',
                                start: '{{t.target_start|date:"c"}}',
                                end: '{{t.target_end|date:"c"}}',
                                url: '{% url 'view_test' t.id %}',
                                color: {%  if t.engagement.active %}'#337ab7'{% else %}'#b9b9b9'{% endif %},
                                overlap: true
                            },
                        {%  endfor %}                    
                    {% else %}
                        {% for e in engagements %}
                            {
                                title: '{{e.product.name}}: {{ e.name|default:"Unknown" }} ({{ e.lead|default:"Unassigned" }})',
                                start: '{{e.target_start|date:"c"}}',
                                end: '{{e.target_end|date:"c"}}',
                                url: '{% url 'view_engagement' e.id %}',
                                color: {%  if e.active %}'#337ab7'{% else %}'#b9b9b9'{% endif %},
                                overlap: true
                            },
                        {%  endfor %}
                    {% endif %}
                ]
            });


        });
    </script>
{% endblock %}