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

{% block extra_css %}
    {% if map_geojson %}
        <link rel="stylesheet" href="{% static 'css/leaflet.css' %}" />
    {% endif %}
{% endblock %}

{% block content %}

    <div class="row-fluid">
        <div class="col-sm-12">
            <br/>
            <h1>
                <span>{{person.name}}</span>

                <br class="non-desktop-only"/>

                <small>{{ title }}</small>
            </h1>

            <div class="modal-links">

                {% if USING_NOTIFICATIONS %}

                    {% if user_subscribed %}
                    <a href="#" class="removeSubscription" data-toggle="tooltip" data-placement="top" data-html="true" title="You are subscribed to {{person.name}}!<br> Visit your accounts page to unsubscribe.">
                        <i class="fa fa-envelope fa-fw" aria-hidden="true"></i> Subscribe
                    </a>
                    {% else %}
                        {% with link_id='personSubscribe' modal_id='Person' custom_text=person.name href='#' RSS_href='rss/' RSS_for='RSS feed for Sponsored Legislation by '|add:person.name %}
                            {% include 'partials/subscription_modal.html' %}
                        {% endwith %}
                    {% endif %}

                {% else %}
                    <a href="rss/" title="RSS feed for Sponsored Legislation by {{person.name}}"><i class="fa fa-rss-square" aria-hidden="true"></i> RSS</a>
                {% endif %}

                <!-- Embed -->
                {% with slug=person.slug widget='person_widget' frameheight='460px' %}
                    {% include 'partials/widget_modal.html' %}
                {% endwith %}

                <!-- View on legistar -->
                <a href='{{person.source_url}}' target="_blank"><i class='fa fa-fw fa-external-link'></i> View on the {{CITY_VOCAB.SOURCE}} website</a>

            </div>

        </div>
    </div>

    <div class='row'>
        <div class='col-sm-6' id='person_message'></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="mailto:{{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}}" target="_blank">Website</a>
                {% endif %}
            </p>

            {% if map_geojson %}
                <hr />
                <h4>
                    {% if person.current_council_seat %}
                        {{ person.current_council_seat }} map
                    {% endif %}
                </h4>
                <div id='map-detail'></div>
            {% endif %}

            <hr />
            {% if person.headshot_source %}
                <p class='small'>
                    <i class='fa fa-fw fa-camera'></i> Credit: {{person.headshot_source}}
                </p>
            {% endif %}
        </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="mailto:{{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 on the {{CITY_VOCAB.SOURCE}} website</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>
                    Sponsored legislation
                    <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 class="non-mobile-only">
                    <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>
                <p class="mobile-only">
                    <a class='btn btn-primary' href='/search/?q=&selected_facets=sponsorships_exact:{{person.name}}'>All sponsored legislation<i class='fa fa-fw fa-chevron-right'></i></a>
                </p>
            {% endif %}

            {% if request.GET.view == 'committees' %}
                <h3>Committees</h3>
                {% if person.chair_role_memberships or person.member_role_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 person.chair_role_memberships %}
                                <tr>
                                    <td>
                                        {{membership.organization.link_html|safe}}
                                    </td>
                                    <td>Chairperson</td>
                                </tr>
                            {% endfor %}
                            {% for membership in person.member_role_memberships %}
                                <tr>
                                    <td>
                                        {{membership.organization.link_html|safe}}
                                    </td>
                                    <td>Member</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% endif %}
            {% endif %}

        </div>
    </div>

    <script type="application/ld+json">
        {
          "@context": "http://schema.org",
          "@type": "Person",
          "email": "{{person.email}}",
          "image": "{{person.headshot_url}}",
          {% if person.current_council_seat %}
          "jobTitle": "{{ person.current_council_seat }} Representative",
          {% endif %}
          "affiliation":    {
                                "@type": "Organization",
                                "name": "{{ CITY_COUNCIL_NAME }}"
                            },
          "name": "{{person.name}}",
          "url": "{{person.website_url}}"
        }
    </script>

{% endblock %}

{% block extra_js %}
    {% if USING_NOTIFICATIONS %}
    <script>
    $(document).ready(function() {
        $("#personSubscribe").click(function() {
            var bullHorn    = $(this).parents().find(".createSubscription");
            var bullHornNew = $(this).parents().find(".removeSubscription");
            console.log('{{ request.user }}')
            if ('{{ request.user }}' != 'AnonymousUser') {
                posturl = "/person/" + "{{person.slug}}" + "/subscribe/";
                $.post(posturl, function(data) {
                }).then(function() {
                    $(bullHorn).hide();
                    $(bullHornNew).show();
                }, function (error) {
                    console.error("Error subscribing to  interest {{person.slug}}");
                });
            }
            else {
                $('#person_message').html(alertMsg);
            }

        });

    });

    </script>
    {% endif %}

    {% if map_geojson %}

        <script src="{% static 'js/leaflet.js' %}" /></script>
        <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=places&v=3.17"></script>
        <script type="text/javascript" src="{% static 'js/leaflet-google.js' %}" ></script>
        <script>

            var map = L.map('map-detail', {
                scrollWheelZoom: false,
                dragging: false,
                touchZoom: false,
                doubleClickZoom: false,
                center: {{MAP_CONFIG.center}},
                zoom: {{MAP_CONFIG.zoom}},
                zoomControl: false
            });

            var google_map_styles = [
                {
                    stylers: [
                        { saturation: -100 },
                        { lightness: 40 }
                    ]
                }
            ];

            var layer = new L.Google('ROADMAP', {
                animate: false,
                mapOptions: {styles: google_map_styles}
            });
            map.addLayer(layer);

            var geojson = L.geoJson({{ map_geojson|safe }}, {
                style: {
                        "color": "{{MAP_CONFIG.highlight_color}}",
                        "weight": 2,
                        "opacity": 1,
                        "fillOpacity": .4
                    }
            });

            $(function() {
                geojson.addTo(map);
                map.fitBounds(geojson.getBounds());
            });

        </script>

    {% endif %}

{% endblock %}
