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

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

    <div class="row-fluid">
        <div class="col-sm-8 no-pad-mobile">
            <div class="table-responsive">
                <table class='table' id='council-members'>
                    <thead>
                        <tr>
                            <th></th>
                            <th>Council Member</th>
                            <th>District</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for post in posts %}
                            <tr>
                                <td>
                                    {% if post.current_member %}
                                        <img src='{{post.current_member.person.headshot_url}}' alt='{{post.current_member.person.name}}' title='{{post.current_member.person.name}}' class='img-responsive img-thumbnail' />
                                    {% endif %}
                                </td>
                                <td>
                                    {% if post.current_member %}
                                        {{ post.current_member.person.link_html | safe }}
                                        {% if post.current_member.person.is_speaker %}
                                            <br /><span class='label label-default'>Council Speaker</span>
                                            <span class='label label-success'><i class='fa fa-fw fa-check-square-o'></i> Verified</span>
                                        {% endif %}
                                    {% else %}
                                        Vacant
                                    {% endif %}
                                </td>
                                <td>{{post.label}}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

        </div>
        <div class='col-sm-4'>
            <div class='well'>
                <h4><i class='fa fa-fw fa-info-circle'></i> What does City Council do?</h4>
                <p>{{CITY_COUNCIL_NAME}} monitors the operation and performance of city agencies, makes land use decisions and has sole responsibility for approving the city's budget. It also legislates on a wide range of other subjects. The Council is an equal partner with the Mayor in the governing of {{ CITY_NAME }}. <a href='/about/#about-city-council'>Read more about how City Council works ></a></p>
            </div>
        </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>
        $("#council-members").DataTable({
            "info": false,
            "searching": false,
            "bLengthChange": false,
            "paging": false,
            "aaSorting": [ [2,'asc'] ],
            "aoColumns": [
                { "bSortable": false },
                null,
                { "sType": "num-html" }
            ]
        });
    </script>
{% endblock %}
