{% extends "base_with_margins.html" %}
{% load extras %}
{% load staticfiles %}
{% block title %}{{CITY_COUNCIL_NAME}} Committees{% endblock %}
{% block content %}

    <div class="row-fluid">
        <div class="col-sm-12">
            <br/>
            <h1>City Council Committees</h1>
            <hr />
        </div>
    </div>

    <div class="row-fluid">
        <div class="col-sm-8 table-col">

            <div class="table-responsive">
                <table class='table' id='committees'>
                    <thead>
                        <tr>
                            <th>Committee</th>
                            <th>Chairperson(s)</th>
                            <th>Members</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for committee in committees %}
                            <tr>
                                <td align="left">
                                    <a href="/committee/{{committee.slug}}">{{ committee.name | committee_topic_only }}</a>
                                </td>
                                <td align="left">
                                    {% for chair in committee.chairs.all %}
                                        {{ chair.person.link_html | safe }}<br />
                                    {% endfor %}
                                </td>
                                <td>{{ committee.memberships.all | length }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <h2>Subcommittees</h2>
            <div class="table-responsive">
                <table class='table' id='subcommittees'>
                    <thead>
                        <tr>
                            <th>Subcommittee</th>
                            <th>Chairperson(s)</th>
                            <th>Members</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for committee in subcommittees %}
                            <tr>
                                <td align="left">
                                    <a href="/committee/{{committee.slug}}">{{ committee.name | committee_topic_only}}</a>
                                </td>
                                <td align="left">
                                    {% for chair in committee.chairs.all %}
                                        {{ chair.person.link_html | safe }}<br />
                                    {% endfor %}
                                </td>
                                <td>{{ committee.memberships.all | length }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>


            {% if taskforces %}
            <h2>Task Forces</h2>
            <div class="table-responsive">
                <table class='table' id='taskforces'>
                    <thead>
                        <tr>
                            <th>Task Force</th>
                            <th>Chairperson(s)</th>
                            <th>Members</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for committee in taskforces %}
                            <tr>
                                <td>
                                    <a href="/committee/{{committee.slug}}">{{ committee.name }}</a>
                                </td>
                                <td>
                                    {% for chair in committee.chairs.all %}
                                        {{ chair.person.link_html | safe }}<br />
                                    {% endfor %}
                                </td>
                                <td>{{ committee.memberships.all | length }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endif %}

        </div>


        <div class="col-sm-4">
            <div class='well'>
                <h4><i class='fa fa-fw fa-info-circle'></i> What do committees do?</h4>
                <p>Most of the Council's legislative work is done in committee. It is there that proposed legislation is initially debated and the members of other government branches and the public are given a chance to comment.</p>

                <p>Each Council Member serves on at least three of the Council's standing committees, sub- and select committees and panels. The standing committees must meet at least once a month unless the Charter mandates otherwise. Committee assignments are made by the Committee on Rules, Privileges and Elections and voted on by the entire Council.</p>

                {% if taskforces %}
                <p>{{CITY_COUNCIL_NAME}} is currently composed of {{committees | length }} Committees, {{subcommittees | length }} Subcommittees and {{taskforces | length }} Task Forces.</p>
                {% else %}
                <p>{{CITY_COUNCIL_NAME}} is currently composed of {{committees | length }} Committees and {{subcommittees | length }} Subcommittees.</p>
                {% endif %}

                <p><a href='/about/#about-city-council'>Read more about how City Council works ></a></p>
            </div>
        </div>
    </div>

{% endblock %}
{% block extra_js %}
    <script src="{% static 'js/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'js/jquery.dataTables.sorting.js' %}"></script>
    <script src="{% static 'js/dataTables.bootstrap.js' %}"></script>

    <script>
        $("#committees").DataTable({
            "info": false,
            "searching": false,
            "bLengthChange": false,
            "paging": false,
            "aaSorting": [ [0,'asc'] ],
            "aoColumns": [
                null,
                null,
                null
            ]
        });

        $("#subcommittees").DataTable({
            "info": false,
            "searching": false,
            "bLengthChange": false,
            "paging": false,
            "aaSorting": [ [0,'asc'] ],
            "aoColumns": [
                null,
                null,
                null
            ]
        });

        $("#taskforces").DataTable({
            "info": false,
            "searching": false,
            "bLengthChange": false,
            "paging": false,
            "aaSorting": [ [0,'asc'] ],
            "aoColumns": [
                null,
                null,
                null
            ]
        });
    </script>
{% endblock %}
