{% extends "base_with_margins.html" %}
{% load extras %}
{% block title %}{{ person.name }}{% endblock %}

{% block content %}

    <div class="row-fluid">
        <div class="col=sm=12">
            <br/>
            <h1>
                {{person.name}}
                <small>
                    {{ person.council_seat }}
                </small>
            </h1>
        </div>
    </div>
    <div class="row-fluid">
        <div class="col-sm-4 non-mobile-only">
            <img src='{{person.headshot_url}}' alt='{{person.name}}' title='{{person.name}}' class='img-responsive img-thumbnail img-padded' id="person-detail-headshot" />

            <p class="small">
                {% if person.email %}
                    <i class='fa fa-fw fa-envelope-o'></i>
                    <a href="{{person.email}}">{{person.email | strip_mailto}}</a>
                {% endif %}
            </p>
            <p class="small">
                {% if person.website_url %}
                    <i class='fa fa-fw fa-user'></i>
                    <a href="{{person.website_url}}">Website</a>
                {% endif %}
            </p>

            <p class='small'>
                <a href='{{person.source_url}}' target="_blank"><i class='fa fa-fw fa-external-link'></i> View the source for this page</a>
            </p>
            <hr/>
        </div>

        <div class="col-sm-4 mobile-only">
            <div class="row">
                <div class="col-xs-4">
                    <img src='{{person.headshot_url}}' alt='{{person.name}}' title='{{person.name}}' class='img-responsive img-thumbnail' />
                </div>
                <div class="col-xs-8">
                    <p class="small">
                        {% if person.email %}
                            <i class='fa fa-fw fa-envelope-o'></i>
                            <a href="{{person.email}}">{{person.email | strip_mailto}}</a>
                        {% endif %}
                    </p>
                    <p class="small">
                        {% if person.website_url %}
                            <i class='fa fa-fw fa-user'></i>
                            <a href="{{person.website_url}}">Website</a>
                        {% endif %}
                    </p>

                    <p class='small'>
                        <a href='{{person.source_url}}' target="_blank"><i class='fa fa-fw fa-external-link'></i> View the source for this page</a>
                    </p>
                </div>
            </div>

            <hr/>
        </div>

        <div class='col-sm-8 no-pad-mobile'>

            <ul class="nav nav-pills">
                <li role="presentation" {% if request.GET.view == 'bills' or request.GET.view == None %}class='active' {% endif %}>
                    <a href="/person/{{person.slug}}?view=bills">
                        <span class="small-pill">
                            <i class='fa fa-fw fa-files-o'></i>
                            <span class="desktop-only">Sponsored </span>
                            Legislation
                        </span>
                    </a>
                </li>
                <li role="presentation" {% if request.GET.view == 'committees' %}class='active' {% endif %}>    <a href="/person/{{person.slug}}?view=committees">
                        <span class="small-pill">
                            <i class='fa fa-fw fa-group'></i>
                            Committees
                        </span>
                    </a>
                </li>
            </ul>

            {% if request.GET.view == 'bills' or request.GET.view == None %}
                <h3>
                    Recently sponsored
                    <small><a href='/search/?q=&selected_facets=sponsorships_exact:{{person.name}}'>View all <i class='fa fa-fw fa-chevron-right'></i></a></small>
                </h3>
                <p>Legislation that {{person.name}} is the primary sponsor of.</p><br/>

                {% for legislation in sponsored_legislation %}

                    {% include "partials/legislation_item.html" %}

                {% endfor %}

                <hr />
                <p><a class='btn btn-primary' href='/search/?q=&selected_facets=sponsorships_exact:{{person.name}}'>View all legislation sponsored by {{person.name}}<i class='fa fa-fw fa-chevron-right'></i></a></p>
            {% endif %}

            {% if request.GET.view == 'committees' %}
                <h3>Committees</h3>
                {% if memberships %}
                <div class="table-responsive">
                    <table class='table table-responsive'>
                        <thead>
                            <tr>
                                <th>Member of</th>
                                <th>Position</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for membership in chairs %}
                                <tr>
                                    <td>
                                        {{membership.organization.link_html|safe}}
                                    </td>
                                    <td>Chairperson</td>
                                </tr>
                            {% endfor %}
                            {% for membership in memberships %}
                                <tr>
                                    <td>
                                        {{membership.organization.link_html|safe}}
                                    </td>
                                    <td>Member</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% endif %}
            {% endif %}

        </div>
    </div>

{% endblock %}

{% block extra_js %}
    <script>

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

    </script>
{% endblock %}
