{% extends 'base_with_margins.html' %}
{% load extras %}
{% load highlight %}
{% block title %}
    {% if request.GET.q %}
        Search results for '{{ request.GET.q }}'
    {% else %}
        Search Legislation
    {% endif %}
{% endblock %}
{% block content %}
    <br/>
    <div class='jumbotron' id='search-jumbotron'>
        <p class="h4">
            Search {{CITY_NAME}} Legislation
        </p>
        <form method="get" action=".">
            <div class="input-group site-intro-search">
                <input name="q" type="text" class="input-lg form-control" placeholder="{{SEARCH_PLACEHOLDER_TEXT}}" {% if request.GET.q %}value="{{request.GET.q}}"{% endif %}>
                <div class='input-group-btn'>
                    <button type="submit" class="btn btn-lg btn-primary">
                        <i class='fa fa-fw fa-search'></i>
                    </button>
                </div>
            </div>
        </form>
    </div>

    <div class="row">
        <div class="col-sm-4">

            {% if selected_facets %}
                <p>
                    <a href="/search/" class="btn btn-sm btn-default">
                    <i class='fa fa-times'></i>
                    Clear filters
                    </a>
                </p>
            {% endif %}

            <!-- Legislation Status -->
            <div class="panel panel-default panel-filter">
                <div class="panel-heading" data-toggle="collapse" data-target="#filter-status">
                    <h3 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Filter by Status
                            <i class="fa fa-fw {% if 'inferred_status' in selected_facets %}fa-minus {% else %} fa-plus {% endif %} pull-right"></i>
                        </a>
                    </h3>
                </div>
                <div class="panel-body {% if 'inferred_status' in selected_facets %}panel-show{% endif %} collapse" id="filter-status">
                    <ul class="search-facet-list">
                        {% for name, count in facets.fields.inferred_status %}
                            {% if count %}
                                <li class="small">
                                    <a href="#" class="filter-value" id="inferred_status_exact:{{name}}" title="{{ name|title }}">
                                        {% if name in selected_facets.inferred_status %}
                                            <strong>{{ name | title | short_title }}</strong>
                                        {% else %}
                                            {{ name | title | short_title }}
                                        {% endif %}
                                    </a>
                                    <span class="badge badge-muted pull-right">{{ count }}</span>
                                </li>
                            {% endif %}
                        {% endfor %}
                    </ul>

                </div>
            </div>

            <!-- Legislation Type -->
            <div class="panel panel-default panel-filter">
                <div class="panel-heading" data-toggle="collapse" data-target="#filter-type">
                    <h3 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Filter by Legislation Type
                            <i class="fa fa-fw {% if 'bill_type' in selected_facets %}fa-minus {% else %} fa-plus {% endif %} pull-right"></i>
                        </a>
                    </h3>
                </div>
                <div class="panel-body {% if 'bill_type' in selected_facets %}panel-show{% endif %} collapse" id="filter-type">

                    <ul class="search-facet-list">
                        {% for name, count in facets.fields.bill_type %}
                            {% if count %}
                                <li class="small">
                                    <a href="#" class="filter-value" id="bill_type_exact:{{name}}" title="{{ name|title }}">
                                        {% if name in selected_facets.bill_type %}
                                            <strong>{{ name | title | short_title }}</strong>
                                        {% else %}
                                            {{ name | title | short_title }}
                                        {% endif %}
                                    </a>
                                    <span class="badge badge-muted pull-right">{{ count }}</span>
                                </li>
                            {% endif %}
                        {% endfor %}
                    </ul>

                </div>
            </div>

            <!-- Topic -->
            {% if facets.fields.topics %}
            <div class="panel panel-default panel-filter">
                <div class="panel-heading" data-toggle="collapse" data-target="#filter-topic">
                    <h3 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Filter by Topic
                            <i class="fa fa-fw {% if 'topics' in selected_facets %}fa-minus {% else %} fa-plus {% endif %} pull-right"></i>
                        </a>
                    </h3>
                </div>
                <div class="panel-body {% if 'topics' in selected_facets %}panel-show{% endif %} collapse" id="filter-topic">

                    <ul class="search-facet-list">
                        {% for name, count in facets.fields.topics %}
                            {% if count and name == 'Routine' or name == 'Non-Routine'%}
                                <li class="small">
                                    <a href="#" class="filter-value" id="topics_exact:{{name}}" title="{{ name|title }}">
                                        {% if name in selected_facets.topics %}
                                            <strong>{{ name | title | short_title }}</strong>
                                        {% else %}
                                            {{ name | title | short_title }}
                                        {% endif %}
                                    </a>

                                    <span class="badge badge-muted pull-right">{{ count }}</span>
                                </li>
                            {% endif %}
                        {% endfor %}
                        <hr/>
                        {% for name, count in facets.fields.topics %}
                            {% if count and name != 'Routine' and name != 'Non-Routine'%}
                                <li class="small">
                                    <a href="#" class="filter-value" id="topics_exact:{{name}}" title="{{ name|title }}">
                                        {% if name in selected_facets.topics %}
                                            <strong>{{ name | title | short_title }}</strong>
                                        {% else %}
                                            {{ name | title | short_title }}
                                        {% endif %}
                                    </a>

                                    <span class="badge badge-muted pull-right">{{ count }}</span>
                                </li>
                            {% endif %}
                        {% endfor %}
                    </ul>

                </div>
            </div>
            {% endif %}

            <!-- Controlling Body -->
            <div class="panel panel-default panel-filter">
                <div class="panel-heading" data-toggle="collapse" data-target="#filter-controlling-body">
                    <h3 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Filter by Controlling Body
                            <i class="fa fa-fw {% if 'controlling_body' in selected_facets %}fa-minus {% else %} fa-plus {% endif %} pull-right"></i>
                        </a>
                    </h3>
                </div>
                <div class="panel-body {% if 'controlling_body' in selected_facets %}panel-show{% endif %} collapse" id="filter-controlling-body">

                    <ul class="search-facet-list">
                        {% for name, count in facets.fields.controlling_body %}
                            {% if count %}
                                <li class="small">
                                    <a href="#" class="filter-value" id="controlling_body_exact:{{name}}" title="{{ name|title }}">
                                        {% if name in selected_facets.controlling_body %}
                                            <strong>{{ name | committee_topic_only | title | short_title }}</strong>
                                        {% else %}
                                            {{ name | committee_topic_only| title | short_title }}
                                        {% endif %}
                                    </a>

                                    <span class="badge badge-muted pull-right">{{ count }}</span>
                                </li>
                            {% endif %}
                        {% endfor %}
                    </ul>

                </div>
            </div>

            <!-- Sponsor -->
            <div class="panel panel-default panel-filter">
                <div class="panel-heading" data-toggle="collapse" data-target="#filter-sponsor">
                    <h3 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Filter by Sponsor
                            <i class="fa fa-fw {% if 'sponsorships' in selected_facets %}fa-minus {% else %} fa-plus {% endif %} pull-right"></i>
                        </a>
                    </h3>
                </div>
                <div class="panel-body {% if 'sponsorships' in selected_facets %}panel-show{% endif %} collapse" id="filter-sponsor">

                    <ul class="search-facet-list">
                        <!-- show current vs separate if there are multiple leg sessions -->
                        {% if facets.fields.legislative_session|length > 1 %}

                            {% for name, count in facets.fields.sponsorships %}
                                {% if count and name in current_council_members %}
                                    <li class="small">
                                        <a href="#" class="filter-value" id="sponsorships_exact:{{name}}" title="{{ name|title }}">
                                            {% if name in selected_facets.sponsorships %}
                                                <strong>{{ name | title | short_title }}</strong>
                                            {% else %}
                                                {{ name | title | short_title }}
                                            {% endif %}
                                        </a>
                                        <span class="text-muted pull-right">{{ current_council_members|get_item:name }}</span>
                                    </li>
                                {% endif %}
                            {% endfor %}

                            <hr/>
                            {% for name, count in facets.fields.sponsorships %}
                                {% if count and name not in current_council_members %}
                                    <li class="small">
                                        <a href="#" class="filter-value" id="sponsorships_exact:{{name}}" title="{{ name|title }}">
                                            {% if name in selected_facets.sponsorships %}
                                                <strong>{{ name | title | short_title }}</strong>
                                            {% else %}
                                                {{ name | title | short_title }}
                                            {% endif %}
                                        </a>
                                    </li>
                                {% endif %}
                            {% endfor %}


                        {% else %}
                            {% for name, count in facets.fields.sponsorships %}
                                {% if count %}
                                    <li class="small">
                                        <a href="#" class="filter-value" id="sponsorships_exact:{{name}}" title="{{ name|title }}">
                                            {% if name in selected_facets.sponsorships %}
                                                <strong>{{ name | title | short_title }}</strong>
                                            {% else %}
                                                {{ name | title | short_title }}
                                            {% endif %}
                                        </a>
                                    </li>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                    </ul>

                </div>
            </div>

            <!-- Legislative Session -->
            {% if facets.fields.legislative_session %}
                <!-- only show leg sesh filter pane if there is more than one leg sesh to select from -->
                {% if facets.fields.legislative_session|length > 1 %}
                <div class="panel panel-default panel-filter">
                    <div class="panel-heading" data-toggle="collapse" data-target="#filter-legislative-session">
                        <h3 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Filter by Legislative Session
                                <i class="fa fa-fw {% if 'legislative_session' in selected_facets %}fa-minus {% else %} fa-plus {% endif %} pull-right"></i>
                            </a>
                        </h3>
                    </div>
                    <div class="panel-body {% if 'legislative_session' in selected_facets %}panel-show{% endif %} collapse" id="filter-legislative-session">
                        <ul class="search-facet-list">
                            {% for name, count in facets.fields.legislative_session %}
                                {% if count %}
                                    <li class="small">
                                        <a href="#" class="filter-value" id="legislative_session_exact:{{name}}" title="{{ name|title }}">
                                            {% if name in selected_facets.legislative_session %}
                                                <strong>{{ name | title | short_title }}</strong>
                                            {% else %}
                                                {{ name | title | short_title }}
                                            {% endif %}
                                        </a>
                                        <span class="badge badge-muted pull-right">{{ count }}</span>
                                    </li>
                                {% endif %}
                            {% endfor %}
                        </ul>

                    </div>
                </div>
                {% endif %}
            {% endif %}
            <div class="divider"></div>
        </div>



        <div class="col-sm-8">
            {% if query %}
                <h3>{{ paginator.count }} legislation result{{ paginator.count|pluralize }} for '{{ request.GET.q }}'</h3>
            {% endif %}

        {% for result in page.object_list %}

            <!-- Legislation result -->

            <p>
                <a class="small" href="/legislation/{{ result.object.slug }}/">{{ result.object.friendly_name }}</a>
                {{ result.object.inferred_status | inferred_status_label | safe }}
            </p>


            <div class="row">
                <div class="col-xs-11">

                    {% if query %}
                        <p class="search-result">
                            {{ result.highlighted.text.0|safe  }}
                        </p>
                    {% else %}
                        <p>
                            {{result.object.listing_description | short_blurb}}
                        </p>
                    {% endif %}

                </div>
                <div class='col-xs-1 no-pad-mobile'>
                    <div>
                        <a class='btn-bill-detail' href='/legislation/{{ result.object.slug }}/'>
                            <i class="fa fa-fw fa-chevron-right"></i>
                        </a>
                    </div>
                </div>
            </div>

            <p class="small text-muted condensed">
                <i class="fa fa-fw fa-calendar-o"></i> {{result.object.last_action_date|date:'n/d/Y'}} - {{result.object.current_action.description | remove_action_subj }}
            </p>

            {% if result.object.primary_sponsor %}
                <p class="small text-muted condensed">
                    <i class="fa fa-fw fa-user"></i>
                    {{result.object.primary_sponsor.person.name}}
                </p>
            {% endif %}

            <p class="condensed">

                {% if result.object.topics %}
                    <i class="fa fa-fw fa-tag"></i>
                    {% for tag in result.object.topics %}
                        <span class="badge badge-muted pseudo-topic-tag">
                            <a href='/search/?q=&selected_facets=topics_exact:{{ tag }}'>{{ tag }}</a>
                        </span>&nbsp;
                    {% endfor %}
                    <br/>
                {% else %}
                    <i class="fa fa-fw fa-tag"></i>
                    {% for tag in result.object.pseudo_topics %}
                        <span class="badge badge-muted pseudo-topic-tag">
                            <a href='/search/?q=&selected_facets=topics_exact:{{ tag | committee_topic_only }}'>{{ tag | committee_topic_only }}</a
                        </span>&nbsp;
                    {% endfor %}
                    <br/>
                {% endif %}

                <br/>
            </p>


        {% empty %}
            <p>
                This site has data from the current legislative session.
                If you're searching for something older, you can browse the
                <a href="{{ LEGISTAR_URL }}" target="_blank">
                    {{ CITY_COUNCIL_NAME }} Legistar site
                </a>.
            </p>
            <p>We'd be happy to help you find what you're looking for -
                <a href="mailto:info@councilmatic.org">contact us</a>!
            </p>

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


    {% if page.has_previous or page.has_next %}
        <div class="row">
            <div class="col-md-8 col-md-offset-4">
                <nav>
                    <ul class="pagination">
                        {% if page.has_previous %}
                            <li>
                                <a href="?{{ q_filters }}&amp;page={{ page.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">&laquo; Previous</span></a>
                            </li>
                        {% else %}
                            <li class="disabled">
                                <a href="#" aria-label="Previous"><span aria-hidden="true">&laquo; Previous</span></a>
                            </li>
                        {% endif %}

                        {% if page.has_next %}
                            <li>
                                <a href="?{{ q_filters }}&amp;page={{ page.next_page_number }}" aria-label="Next"><span aria-hidden="true">Next &raquo;</span></a>
                            </li>
                        {% else %}
                            <li class="disabled">
                                <a href="#" aria-label="Next"><span aria-hidden="true">Next &raquo;</span></a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block extra_js %}
    <script>
        $(function() {
            // filters are collapsed be default b/c they are long
            // filters w/ class panel-show (i.e. filters that have been selected) are expanded
            $('.panel-show').addClass('in');

            $(".panel-heading").click(function () {
                if ($(this).parent().children().eq(1).hasClass("in")){
                    $(this).find('i').removeClass("fa-minus").addClass("fa-plus");
                } else{
                    $(this).find('i').removeClass("fa-plus").addClass("fa-minus");
                }
            });

            $(".filter-value").click(function() {

                var addtl_filter = this.id
                window.location = '/search/?{{ q_filters }}&selected_facets=' + addtl_filter;

            });


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