{% extends "base_with_margins.html" %}
{% block title %}Events{% endblock %}
{% block content %}

    <div class="row-fluid">
        <div class='col-sm-12' id="event-menu">

            <br/><br class="non-mobile-only"/>

            Browse by month:<br class="mobile-only"/>

            <select id="month-dropdown" class="dropdown-target">
                {% for name, num in month_options %}
                    {% if this_month = num %}
                        <option value="{{num}}" selected>{{name}}</option>
                    {% else %}
                        <option value="{{num}}">{{name}}</option>
                    {% endif %}
                {% endfor %}
            </select>

            <select id="year-dropdown" class="dropdown-target">
                {% for year in year_range %}
                    {% if this_year = year %}
                        <option value="{{year}}" selected>{{year}}</option>
                    {% else %}
                        <option value="{{year}}">{{year}}</option>
                    {% endif %}
                {% endfor %}
            </select>

            <a href="/events/?year={{this_year}}&month={{this_month}}" id="view-events-btn" class="btn btn-default btn-sm">View events</a>

        </div>

    </div>

    <div class="row-fluid">
        <div class="col-sm-8 no-pad-mobile">
            {% if not show_upcoming %}
                {% if month_events %}
                    <h2>{{ CITY_VOCAB.EVENTS }}: {{ this_start_date | date:"F Y"}}</h2> <!-- XXX: this 'this_start_date' stuff appears not to work at e.g. https://nyc.councilmatic.org/events/ -->
                    <hr />
                    {% for date, event_list in month_events %}
                        {% include "partials/event_day.html" %}
                    {% endfor %}
                {% else %}
                    <h2>No {{ CITY_VOCAB.EVENTS | lower }} to show</h2>
                {% endif %}
            {% else %}
                {% if upcoming_events %}
                    <h2><span>Upcoming {{ CITY_VOCAB.EVENTS }}</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>
                        {% if USING_NOTIFICATIONS %}
                            <small>
                            {% if user_subscribed %}
                            <a href="#" id="eventsSubscribe" class="removeSubscription" data-toggle="tooltip" data-placement="top" title="Unsubscribe from events">
                                <i class="fa fa-bullhorn fa-fw" aria-hidden="true"></i>
                            </a>
                            {% else %}
                            <a href="#" id="eventsSubscribe" class="createSubscription" data-toggle="tooltip" data-placement="top" title="Subscribe to events">
                                <i class="fa fa-bullhorn fa-fw" aria-hidden="true"></i>
                            </a>
                            {% endif %}
                            </small>
                        {% endif %}
        		    </h2>
                    <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 Upcoming {{ CITY_VOCAB.EVENTS }}
                        <small>
                           <a href="rss/" title="RSS feed for Upcoming and Recent Events"><i class="fa fa-rss-square" aria-hidden="true"></i></a>
                        </small>
                        {% if USING_NOTIFICATIONS %}
                            <small>
                            {% if user_subscribed %}
                            <a href="#" id="eventsSubscribe" class="removeSubscription" data-toggle="tooltip" data-placement="top" title="Unsubscribe from events">
                                <i class="fa fa-bullhorn fa-fw" aria-hidden="true"></i>
                            </a>
                            {% else %}
                            <a href="#" id="eventsSubscribe" class="createSubscription" data-toggle="tooltip" data-placement="top" title="Subscribe to events">
                                <i class="fa fa-bullhorn fa-fw" aria-hidden="true"></i>
                            </a>
                            {% endif %}
                            </small>
                        {% endif %}
                    </h2>
                    <div class='row'>
                        <div class='col-sm-8' id='events_message'></div>
                    </div>
                    <hr/>
                {% endif %}

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

{% endblock %}

{% block extra_js %}
    <script>
        $( ".dropdown-target" ).change(function() {
            var month = $("#month-dropdown").val()
            var year = $("#year-dropdown").val()
            var new_url = '/events/?year='+year+'&month='+month
            $("#view-events-btn").attr("href", new_url)
            });
    </script>

    {% if USING_NOTIFICATIONS %}
    <script>
    $(document).ready(function() {
	    $("#eventsSubscribe").click(function() {
            var bullHorn = this;
		    if ($(this).hasClass('createSubscription')) {
                if ('{{ request.user.is_authenticated }}'== 'True') {
    			    posturl = "/events/subscribe/";
    			    $.post(posturl, function(data) {
    			    }).then( function() {
                        $(bullHorn).removeClass('createSubscription');
                        $(bullHorn).addClass('removeSubscription');
                        $(bullHorn).attr('title', 'remove alert');
                    }, function (error) {
                        console.error("Error subscribing to all events");
                    });
                }
                else {
                    $('#events_message').html(alertMsg);
                }
		    } else if ($(this).hasClass('removeSubscription')) {
			    posturl = "/events/unsubscribe/";
			    $.post(posturl, function(data) {
			    }).then( function() {
                    $(bullHorn).removeClass('removeSubscription');
                    $(bullHorn).addClass('createSubscription');
                    $(bullHorn).attr('title', 'create alert');
                }, function (error) {
                    console.error("Error unsubscribing from all events");
                });
		    }
		    else {
			    alert("ID #eventsSubscribe has neither createSubscription or removeSubscription class");
		    }
	    }
	    )});
    </script>
    {% endif %}

{% endblock %}
