{% extends "base_with_margins.html" %}
{% load static %}
{% block title %}Events{% endblock %}
{% block extra_css %}
  <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-datepicker3.css' %}" />
{% endblock %}
{% block content %}

  <div class="row-fluid">
    <div class="col-sm-8 no-pad-mobile">
      <br/><br class="non-mobile-only"/>
      <div id="events-form" class="row">
        <div class="col-xs-10">
          <form action='/events' method='GET'>
            <div class="input-group" id='date-search'>
              <span class="input-group-addon" id="sizing-addon3"><i class="fa fa-calendar" aria-hidden="true"></i></span>
              <input type="text" class="form-control date-filter" placeholder="Select a month and year..." value="{{ date }}" readonly id="form_datetime" name="form_datetime">
              <span class="input-group-btn">
                <button class="btn btn-default btn-date" id="btn-search" type="submit"><i class="fa fa-search" aria-hidden="true"></i> <span class='hidden-sm hidden-xs'>Search</span></button>
              </span>
            </div>
          </form>
        </div>
        <div class="col-xs-2">
          <a href="{% url 'events' %}" class="btn btn-primary d-inline-block"><i class="fa fa-repeat" aria-hidden="true"></i><span class="hidden-xs"> Reset</span></a>
        </div>
      </div>

      {% if select_events %}
        <h2><span>{{ CITY_VOCAB.EVENTS }} in {{select_date}}</span>
          <br class="non-desktop-only"/>
          <small><a href="rss/" title="RSS feed for Upcoming and Recent Events"><i class="fa fa-rss-square" aria-hidden="true"></i></a></small>
        </h2>

        <div class='row'>
          <div class='col-sm-8' id='events_message'></div>
        </div>
        <hr/>

        {% for date, event_list in select_events %}
          {% include "partials/event_day.html" %}
        {% endfor %}

      {% elif upcoming_events %}
        <h2><span>Upcoming {{ CITY_VOCAB.EVENTS }}</span>
          <br class="non-desktop-only"/>
        </h2>

        <div class="modal-links">
          {% if USING_NOTIFICATIONS %}
            {% if user_subscribed %}
              <a href="#" class="removeSubscription" data-toggle="tooltip" data-placement="top" title="Unsubscribe from events">
                <i class="fa fa-envelope fa-fw" aria-hidden="true"></i> Subscribe
              </a>
            {% else %}
              {% with link_id='eventsSubscribe' modal_id='meetings' custom_text='meetings' href='#' RSS_href='rss/' RSS_for='RSS feed for Upcoming and Recent Events' %}
                {% include 'partials/subscription_modal.html' %}
              {% endwith %}
            {% endif %}
          {% else %}
            <a href="rss/" title="RSS feed for Upcoming and Recent Events"><i class="fa fa-rss-square" aria-hidden="true"></i> RSS</a>
          {% endif %}
        </div>

        <div class='row'>
          <div class='col-sm-8' id='events_message'></div>
        </div>
        <hr/>
        {% for date, event_list in upcoming_events %}
          {% include "partials/event_day.html" %}
        {% endfor %}
      {% else %}
        <h2>
          No {{ CITY_VOCAB.EVENTS }}
        </h2>

        <p>Search for a month and year{% if USING_NOTIFICATIONS %}, or subscribe and receive alerts about upcoming {{ CITY_VOCAB.EVENTS }}{% endif %}.</p>
        <div class="modal-links">
          {% if USING_NOTIFICATIONS %}
            {% if user_subscribed %}
              <a href="#" class="removeSubscription" data-toggle="tooltip" data-placement="top" title="Unsubscribe from events">
                <i class="fa fa-envelope fa-fw" aria-hidden="true"></i> Subscribe
              </a>
            {% else %}

              {% with link_id='eventsSubscribe' modal_id='meetings' custom_text='meetings' href='#' RSS_href='rss/' RSS_for='RSS feed for Upcoming and Recent Events' %}
                {% include 'partials/subscription_modal.html' %}
              {% endwith %}

            {% endif %}
          {% else %}
            <a href="rss/" title="RSS feed for Upcoming and Recent Events"><i class="fa fa-rss-square" aria-hidden="true"></i> RSS</a>
          {% endif %}
        </div>

        <div class='row'>
          <div class='col-sm-8' id='events_message'></div>
        </div>
      {% endif %}
    </div>

    <div class="col-sm-4 no-pad-mobile">
      <br/><br class="non-mobile-only"/>
      {% include 'partials/events_info_blurb.html' %}
    </div>
  </div>

{% endblock %}

{% block extra_js %}

  <script type="text/javascript" src="{% static 'js/lib/bootstrap-datepicker.min.js' %}"></script>
  <script type="{% static 'js/lib/moment.js' %}"></script>
  <script>
    $(document).ready(function() {
      var customStartDate = '01/01/' + '{{ year_range_min }}'
      var customEndDate = '12/31/' + '{{ year_range_max }}'
      console.log(customStartDate)
      $("#form_datetime").datepicker({
        autoclose: true,
        viewMode: "months",
        minViewMode: "months",
        startDate: customStartDate,
        endDate: customEndDate,
      });
    });
  </script>

  {% if USING_NOTIFICATIONS %}
    <script>
      $(document).ready(function() {
        $("#eventsSubscribe").click(function() {
          var bullHorn    = $(this).parents().find(".createSubscription");
          var bullHornNew = $(this).parents().find(".removeSubscription");

          if ('{{ request.user }}' != 'AnonymousUser') {
            posturl = "/events/subscribe/";
            $.post(posturl, function(data) {
            }).then( function() {
              $(bullHorn).hide();
              $(bullHornNew).show();
            }, function (error) {
              console.error("Error subscribing to all events");
            });
          }
          else {
            $('#events_message').html(alertMsg);
          }

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

{% endblock %}
