{% 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/>

            Browse by month:

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

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

                {% endif %}

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

            {% endif %}
        </div>
        <div class="col-sm-4 no-pad-mobile">
            <div class='well'>
                <h4><i class='fa fa-fw fa-info-circle'></i> What are these events?</h4>
                <p>
                    Most of the Council's legislative action happens in <a href='/committees/'>committees</a>. Each committee meets in public hearings 2-3 times per month where proposed legislation is debated. Members of other government branches, as well as the public, are able to attend and comment at these hearings.
                </p>

                <p>
                    Meetings of the entire Council, referred to as Stated Meetings, occur twice a month at City Hall.
                </p>

                <p><a href='/about/#about-city-council'>Read more about how City Council works ></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 %}
