{% 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 }}: {{first_date | date:"F Y"}}</h2>
                    <hr />

                    {% for date, event_list in month_events %}
                        {% include "partials/event_day.html" %}
                    {% endfor %}
                {% else %}
                    <h2>No {{ CITY_VOCAB.EVENTS | lower }}no to show</h2>

                {% endif %}

            {% else %}
                {% if upcoming_events %}
                    <h2>Upcoming {{ CITY_VOCAB.EVENTS }}</h2>
                    <hr/>
                    {% for date, event_list in upcoming_events %}
                        {% include "partials/event_day.html" %}
                    {% endfor %}
                {% else %}
                    <h2>No Upcoming {{ CITY_VOCAB.EVENTS }}</h2>
                    <hr/>
                {% endif %}

            {% endif %}
        </div>
        <div class="col-sm-4 no-pad-mobile">
            <div class='well info-blurb'>
                <h4><i class='fa fa-fw fa-info-circle'></i> What are these {{ CITY_VOCAB.EVENTS | lower}}?</h4>
                
                {{ ABOUT_BLURBS.EVENTS | safe }}

                <p><a href='/about/#about-city-council'>More on how City Council works &raquo;</a></p>
            </div>
        </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>
{% endblock %}
