{% extends 'program_base.html' %}
{% load dateutils %}

{% block program_content %}

<div class="row">
    <div id="schedule-days" class="btn-group hidden-xs">
    </div>
    <div id="schedule-days-mobile" class="btn-group-vertical visible-xs">
    </div>
</div>

<hr />

<div class="row">
    <div class="col-sm-3 col-sm-push-9 schedule-filter">
        <h4>Filter</h4>
        <form id="filter" class="form-inline">
            <div class="form-group">
                <div>
                    <h5>Type:</h5>
                    <ul>
                    {% for type in camp.event_types %}
                    <li>
                        <input type="checkbox"
                               name="event-type-{{ type.slug }}"
                               id="event-type-{{ type.slug }}"
                               value="{{ type.slug }}"
                               class="form-control event-type-checkbox schedule-checkbox" />

                        <div class="btn-group">
                            <label for="event-type-{{ type.slug }}" class="btn btn-default" style="min-width: 200px; text-align: left;">
                                <span>
                                    <i class="fa fa-minus"></i>
                                    <i class="fa fa-plus"></i>
                                    &nbsp;&nbsp;
                                    {{ type.name }}
                                </span>
                            </label>
                        </div>

                    </li>
                    {% endfor %}
                    </ul>
                </div>

                <div>
                    <h5>Location:</h5>
                    <ul>
                    {% for location in camp.event_locations %}
                    <li>
                        <input type="checkbox"
                               name="location-{{ location.slug }}"
                               id="location-{{ location.slug }}"
                               name="locations"
                               value="{{ location.slug }}"
                               class="form-control location-checkbox schedule-checkbox" />

                        <div class="btn-group">
                            <label for="location-{{ location.slug }}" class="btn btn-default" style="min-width: 200px; text-align: left;">
                                <span class="pull-left">
                                    <i class="fa fa-minus"></i>
                                    <i class="fa fa-plus"></i>
                                    &nbsp;&nbsp;
                                    {{ location.name }}
                                </span>
                                <i class="pull-right fa fa-{{ location.icon }}"></i>
                            </label>
                        </div>

                    </li>
                    {% endfor %}
                    </ul>
                </div>

                <a id="ics-button" class="btn btn-default form-control filter-control">
                    <i class="fa fa-calendar"></i> ICS
                </a>
            </div>
        </form>
    </div>
    <div class="col-sm-9 col-sm-pull-3">
      {% block schedule_content %}
      {% endblock schedule_content %}
    </div>
</div>

<hr />


{% url 'schedule_index' camp_slug=camp.slug as baseurl %}

<script>
    $('.filter-control').on('change', function() {
        var type = $('#event_type').val();
        var loc = $('#location').val();
        var url = "{{baseurl}}";

        if(type != '' || loc != '') {
          url = url + '?';
          if(type != '') {
              url = url + 'type=' + type;
              if(loc != '') { url = url + '&'; }
          }
          if(loc != '') {
              url = url + 'location=' + loc;
          }
        }

        window.location.href = url;
    });
</script>

{% endblock program_content %}