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

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

{% block content %}

  {% cache 600 person_wrapper person.id %}

    <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" rel="nofollow"><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='{% static 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='{% static 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'>
  {% endcache  %}

  <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 %}
  {% cache 600 ld_json_wrapper person.id %}

    </div>
    </div>

    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "Person",
        "email": "{{person.email}}",
        "image": "{% static 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": "{{SITE_META.site_url}}/person/{{person.slug}}"
      }
    </script>

  {% endcache %}

{% endblock %}

{% block extra_js %}
  {% if USING_NOTIFICATIONS %}
    <script>
      console.log("{{person.id}}")
      $(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/lib/leaflet.js' %}" /></script>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=places&v=3.17&key={{GOOGLE_API_KEY}}}"></script>
    <script type="text/javascript" src="{% static 'js/lib/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 %}
