{% extends "base_with_margins.html" %}
{% load extras %}
{% load static %}
{% block title %}{{ legislation.friendly_name }}{% endblock %}
{% block content %}

  {% if legislation %}
    <div class="row-fluid">
      <div class="col-sm-12">
        <h1 class="bill-page-title">
          <br class="non-mobile-only" />
          {{ legislation.friendly_name }}
          <small>{{ legislation.inferred_status | inferred_status_label | safe }}</small>
        </h1>

        <div class="modal-links">
          <!-- Subscribe -->
          {% if USING_NOTIFICATIONS %}
            {% if user_subscribed %}
              <a href="#" id="billSubscribe" class="removeSubscription" data-toggle="tooltip" data-placement="top" data-html="true" title="You are subscribed to {{legislation.friendly_name}}! <br>Visit your accounts page to unsubscribe.">
                <i class="fa fa-envelope"></i>
                Subscribe
              </a>
            {% else %}

              {% with link_id='billSubscribe' modal_id='Bill' custom_text=legislation.friendly_name href='#' RSS_href='rss/' RSS_for='RSS feed for RSS feed for Legislation'|add:legislation.friendly_name %}
                {% include 'partials/subscription_modal.html' %}
              {% endwith %}

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

          <!-- Embed -->
          {% with slug=legislation.slug widget='bill_widget' frameheight='260px' %}
            {% include 'partials/widget_modal.html' %}
          {% endwith %}

          <!-- Link to legistar -->
          <a href='{{legislation.web_source.url}}' title='View on the {{CITY_VOCAB.SOURCE}} website' target="_blank" rel="nofollow">
            <i class='fa fa-fw fa-external-link'></i> View on the {{CITY_VOCAB.SOURCE}} website
          </a>

        </div>

        <div class='row'>
          <div class='col-sm-6' id='bill_message'></div>
        </div>
        {% if legislation.topics %}
          <p>
            <i class="fa fa-tag"></i>
            {% for tag in legislation.topics %}
              <span class="badge badge-muted badge-big pseudo-topic-tag">
                <a href='/search/?q=&selected_facets=topics_exact:{{ tag }}'>{{ tag }}</a>
              </span>
            {% endfor %}
            <br/>
          </p>
        {% endif %}
      </div>
    </div>

    <div class="col-sm-8 no-pad-mobile">
      <br/>

      {% block description %}
        {% if legislation.abstract %}
          <p class="text-muted">
            <i>{{ legislation.description }} </i>
          </p>

          <p>
            {{ legislation.abstract }}
          </p>
        {% else %}
          <p>
            {{ legislation.description }}
          </p>
        {% endif %}
      {% endblock %}

      <div class="divider"></div>

      {% if legislation.sponsorships.all %}
        <h3 class="no-pad-bottom"><i class='fa fa-fw fa-users'></i> Sponsors</h3>

        <div class="table-responsive">
          <table class='table table-responsive' id='council-members'>
            <thead>
              <tr>
                <th></th>
                <th>
                  {% if legislation.sponsorships.all|length > 1 %}
                    Sponsors ({{legislation.sponsorships.all|length}})
                  {% else %}
                    Sponsor
                  {% endif %}
                </th>
                <th>
                  {{CITY_VOCAB.MUNICIPAL_DISTRICT}}
                </th>
              </tr>
            </thead>
            <tbody>
              {% for s in legislation.sponsorships.all %}
                {% if s.primary %}
                  <tr>
                    <td>
                      <div class="thumbnail-square">
                        {% if s.person %}
                          <img src='{% static s.person.headshot.url %}' alt='{{s.person.name}}' title='{{s.person.name}}' class='img-responsive img-thumbnail' />
                        {% else %}
                          <img src='{% static "images/headshot_placeholder.png" %}' alt='{{s.name}}' title='{{s.name}}' class='img-responsive img-thumbnail' />
                        {% endif %}
                      </div>
                    </td>
                    <td>
                      {% if s.person %}
                        {{ s.person.link_html|safe }}
                      {% else %}
                        {{ s.name }}
                      {% endif %}
                      <span class="badge badge-default">Primary Sponsor</span>
                    </td>
                    <td>
                      {{s.person.current_council_seat}}
                    </td>
                  </tr>
                {% endif %}
              {% endfor %}
              {% for s in legislation.sponsorships.all %}
                {% if not s.primary %}
                  <tr>
                    <td>
                      <div class="thumbnail-square">
                        {% if s.person %}
                          <img src='{% static s.person.headshot.url %}' alt='{{s.person.name}}' title='{{s.person.name}}' class='img-responsive img-thumbnail' />
                        {% else %}
                          <img src='{% static "images/headshot_placeholder.png" %}' alt='{{s.name}}' title='{{s.name}}' class='img-responsive img-thumbnail' />
                        {% endif %}
                      </div>
                    </td>
                    <td>
                      {% if s.person %}
                        {{ s.person.link_html|safe }}
                      {% else %}
                        {{ s.name }}
                      {% endif %}
                    </td>
                    <td>
                      {{s.person.current_council_seat}}
                    </td>
                  </tr>
                {% endif %}
              {% endfor %}
            </tbody>
          </table>
        </div>
        <div class="divider"></div>
      {% endif %}

      {% if actions %}
        <h3 class="no-pad-bottom"><i class='fa fa-fw fa-list-ul'></i> History</h3>
        <div class="table-responsive">
          <table class='table table-responsive' id='committee-actions'>
            <thead>
              <tr>
                <th>Date</th>
                <th>Action</th>
                <th>Legislative body</th>
              </tr>
            </thead>
            <tbody>
              {% for action in actions %}
                <tr>
                  <td class='nowrap text-muted small'>
                    <span datetime='{{action.date_dt | format_date_sort }}'>{{action.date_dt|date:'n/d/y'}}</span>
                  </td>
                  <td class="small">
                    <span class='text-{{action.label}}'>{{action.description | remove_action_subj}}</span>
                    {% if action.referred_org %}
                      to
                      {{action.referred_org.link_html|safe}}
                    {% endif %}
                  </td>
                  <td class="small">
                    {{action.organization.link_html|safe}}
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <div class="divider"></div>
      {% endif %}

      {% if legislation.unique_related_upcoming_events %}
        <h3><i class='fa fa-fw fa-calendar-o'></i> Upcoming {{ CITY_VOCAB.EVENTS }}</h3>

        {% for event in legislation.unique_related_upcoming_events %}
          <p>
            {{event.start_time | date:'M d, Y' }} - {{event.link_html | safe}}
          </p>
        {% endfor %}

        <div class="divider"></div>
      {% endif %}

      {% if legislation.addresses %}
        <h3>
          <i class='fa fa-map-marker'></i> Locations mentioned
        </h3>
        <ul class="list-unstyled">
          {% for address in legislation.addresses %}
            <li><a target='_blank' href="https://maps.google.com/maps?q={{ address|urlencode }}+{{ CITY_NAME }}">
              {{ address }} {{ CITY_NAME }}</a></li>
          {% endfor %}
        </ul>
        <img class='img-thumbnail img-rounded' src="https://maps.googleapis.com/maps/api/staticmap?size=400x200&zoom=14&maptype=roadmap{% for address in legislation.addresses %}&markers={{ address }}+{{ CITY_NAME }}{% endfor %}">
        <div class="divider"></div>
      {% endif %}

      {% if legislation.attachments %}
        <h3>
          <i class='fa fa-fw fa-paperclip'></i>
          Attachments ({{ legislation.attachments | length }})
        </h3>
        <ul>
          {% for doc in legislation.attachments %}
            <li>
              <a href="{{doc.url}}" target="blank">{{ doc.note }}</a>
            </li>
          {% endfor %}
        </ul>
        <div class="divider"></div>
      {% endif %}

      {% include 'partials/legislation_text.html' %}

    </div>

    <div class="row-fluid">
      <div class="col-xs-12">
        {% if DISQUS_SHORTNAME %}
          <h3>Comments</h3>

          <div id="disqus_thread"></div>
          <script>
            /**
                         *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
                         *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
                         */
            /*
                        var disqus_config = function () {
                            this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
                            this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
                        };
                        */
            (function() {  // DON'T EDIT BELOW THIS LINE
              var d = document, s = d.createElement('script');

              s.src = '//{{ DISQUS_SHORTNAME }}.disqus.com/embed.js';

              s.setAttribute('data-timestamp', +new Date());
              (d.head || d.body).appendChild(s);
            })();
          </script>
          <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>

        {% endif %}
      </div>
    </div>

  {% else %}
    <h3>Legislation not found</h3>
  {% endif %}

  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "CreativeWork",
      "sourceOrganization": "{{ CITY_COUNCIL_NAME }}",
      "name": "{{ legislation.friendly_name }}",
      "alternateName": ["{{ legislation.identifier }}", "{{ legislation.identifier.split|join:'' }}"],
      {% if actions %}"datePublished": "{{actions.0.date|date:'Y-m-d'}}", {% endif %}
      "description": "{{ legislation.description }}",
      "text": "{% firstof legislation.full_text legislation.ocr_full_text %}"
    }
  </script>

{% endblock %}

{% block extra_js %}
  <script src="{% static 'js/lib/jquery.dataTables.min.js' %}"></script>
  <script src="{% static 'js/lib/jquery.dataTables.sorting.js' %}"></script>
  <script src="{% static 'js/lib/dataTables.bootstrap.js' %}"></script>

  {% if USING_NOTIFICATIONS %}
    <script>
      $(document).ready(function() {
        $("#billSubscribe").click(function() {
          var bullHorn    = $(this).parents().find(".createSubscription");
          var bullHornNew = $(this).parents().find(".removeSubscription");

          if ('{{ request.user }}' != 'AnonymousUser') {
            posturl = "/legislation/" + "{{legislation.slug}}" + "/subscribe/";
            $.post(posturl, function(data) {
            }).then(function() {
              $(bullHorn).hide();
              $(bullHornNew).show();
            }, function (error) {
              console.error('Error subscribing to {{legislation.slug}}');
            });
          }
          else {
            // alertMsg is a global variable in base.html
            $('#bill_message').html(alertMsg);
          }

        });
      });

    </script>
  {% endif %}

  <script>

    $("#committee-actions").DataTable({
      "info": false,
      "searching": false,
      "bLengthChange": false,
      "paging": false,
      "bSort" : false
    });

    $("#council-members").DataTable({
      "info": false,
      "searching": false,
      "bLengthChange": false,
      "paging": false,
      "aoColumns": [
        { "bSortable": false },
        null,
        { "sType": "num-html" },
      ]
    });

    $('.thumbnail-square img').each(function() {
      if ($(this).width() > $(this).height()) {
        $(this).addClass('landscape');
      }
    });

    if (window.screen.width > 768){
      $("#pdf-embed").attr("src", "/pdfviewer/?file={{legislation.full_text_doc_url|urlencode}}");
    }
    else{
      $('#pdf-embed').hide()
      $('#pdf-download-link').html("<i class='fa fa-fw fa-external-link'></i> View PDF")
    }

    // for reference purposes
    console.log( "OCD ID: {{legislation.id}}" )

  </script>
{% endblock %}
