{% extends "base_with_margins.html" %}
{% load extras %}
{% load staticfiles %}
{% block title %}{{committee.name}}{% endblock %}
{% block content %}

    <div class="row-fluid">
        <div class="col-sm-12">
            <br/>
            <h1>{{committee.name}}</h1>
            {% if committee_description %}
                <p>{{committee_description}}</p>
            {% endif %}
            {% if committee.source_url %}
                <p class="small">
                    <a href='{{committee.source_url}}' title='View the source for this page' target="_blank">
                        <i class='fa fa-fw fa-external-link'></i> 
                        View the source for this page
                    </a>
                </p>
            {% endif %}

            <hr />
            <ul class="nav nav-pills">
              <li role="presentation" {% if request.GET.view != 'members' %}class='active' {% endif %}><a href="/committee/{{committee.slug}}?view=actions"><i class='fa fa-fw fa-list-ul'></i><span class="desktop-only"> Committee</span> Activity</a></li>
              <li role="presentation" {% if request.GET.view == 'members' %}class='active' {% endif %}><a href="/committee/{{committee.slug}}?view=members"><i class='fa fa-fw fa-group'></i><span class="desktop-only"> Committee</span> Members ({{ committee.memberships.all|length }})</a></li>
            </ul>

            {% if request.GET.view != 'members' %}
                <h3><i class='fa fa-fw fa-list-ul'></i> Committee Activity</h3>
                {% if committee.recent_activity %}
                <div class="table-responsive">
                    <table class='table' id='committee-actions'>
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Legislation</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for action in committee.recent_activity %}
                                <tr>
                                    <td class='nowrap text-muted small'>{{action.date|date:'n/d/Y'}}</td>
                                    <td><a href="/legislation/{{action.bill.slug}}">{{action.bill.friendly_name}}</a></td>
                                    <td><span class='text-{{action.label}}'>{{action.description | remove_action_subj}}</span></td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                    <p>No recent activity</p>
                {% endif %}
            {% endif %}


            {% if request.GET.view == 'members' %}
                <h3><i class='fa fa-fw fa-group'></i> Committee Members</h3>
                <table class='table' id='council-members'>
                    <thead>
                        <tr>
                            <th></th>
                            <th>Committee Member</th>
                            <th>District</th>
                            <th>Role</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for membership in chairs %}
                            <tr>
                                <td>
                                    <img src='{{membership.person.headshot_url}}' alt='{{membership.person.name}}' title='{{membership.person.name}}' class='img-responsive img-thumbnail' />
                                </td>
                                <td>
                                    {{ membership.person.link_html | safe }}
                                </td>
                                <td>
                                    {{membership.person.council_seat}}
                                </td>
                                <td>
                                    Chairperson
                                </td>
                            </tr>
                        {% endfor %}
                        {% for membership in memberships %}
                            <tr>
                                <td>
                                    <img src='{{membership.person.headshot_url}}' alt='{{membership.person.name}}' title='{{membership.person.name}}' class='img-responsive img-thumbnail' />
                                </td>
                                <td>
                                    {{ membership.person.link_html | safe }}
                                </td>
                                <td>
                                    {{membership.person.council_seat}}
                                </td>
                                <td>
                                    Member
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endif %}
        </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": [ [3,'asc'] ],
            "aoColumns": [
                { "bSortable": false },
                null,
                { "sType": "num-html" },
                null
            ]
        });

        // for reference purposes
        console.log( "OCD ID: {{committee.ocd_id}}" )

    </script>
{% endblock %}