{% extends "base_with_margins.html" %}
{% load extras %}
{% load staticfiles %}
{% 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/>
                    {{ legislation.friendly_name }}
                    <small>
                        {{ legislation.inferred_status | inferred_status_label | safe }}
                    </small>
                </h1>
                {% if legislation.topics %}
                    <p>
                        <i class="fa fa-fw 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>&nbsp;
                        {% endfor %}
                        <br/>
                    </p>
                {% endif %}
            </div>
        </div>

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

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

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

            <p class="small">
                <a href='{{legislation.source_url}}' title='View on the {{CITY_VOCAB.SOURCE}} website' target="_blank">
                    <i class='fa fa-fw fa-external-link'></i> View on the {{CITY_VOCAB.SOURCE}} website
                </a>
            </p>

            {% if legislation.sponsorships.all %}

                <div class="table-responsive">
                    <table class='table table-responsive' id='council-members'>
                        <thead>
                            <tr>
                                <th></th>
                                <th>Sponsor</th>
                                <th>
                                    {{CITY_VOCAB.MUNICIPAL_DISTRICT}}
                                </th>
                                <th>Role</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for s in legislation.sponsorships.all %}
                                <tr>
                                    <td>
                                        <div class="thumbnail-square">
                                            <img src='{{s.person.headshot_url}}' alt='{{s.person.name}}' title='{{s.person.name}}' class='img-responsive img-thumbnail' />
                                        </div>
                                    </td>
                                    <td>
                                        {{ s.person.link_html | safe }}
                                    </td>
                                    <td>
                                        {{s.person.current_council_seat}}
                                    </td>
                                    <td>
                                        {% if s.is_primary %}
                                            Primary sponsor
                                        {% else %}
                                            Sponsor
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}

            {% if actions %}
                <hr />
                <h4><i class='fa fa-fw fa-list-ul'></i> History</h4>
                <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 | format_date_sort }}'>{{action.date|date:'M d, Y'}}</span></td>
                                    <td><span class='text-{{action.label}}'>{{action.description | remove_action_subj}}</span></td>
                                    <td>{{action.organization.link_html|safe}}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

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

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

            {% endif %}

            {% if legislation.addresses %}
                <hr />
                <h4><i class='fa fa-map-marker'></i> Locations mentioned</h4>
                    <ul class="list-unstyled">
                      {% for address in legislation.addresses %}
                        <li><a target='_blank' href="http://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 %}">
            {% endif %}

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

            {% if legislation.full_text != "" %}
                <hr />
                <h4>
                    <i class='fa fa-fw fa-file-text-o'></i>
                    Legislation text
                </h4>
                <div class='panel panel-default'>
                    <div class='panel-body'>
                        {{ legislation.full_text|safe }}
                    </div>
                </div>
            {% elif legislation.full_text_doc_url %}
                <hr />
                <h4>
                    <i class='fa fa-fw fa-file-text-o'></i>
                    Legislation text
                </h4>
                <p>
                    <a target='_blank' href='{{legislation.full_text_doc_url}}'><i class='fa fa-download'></i> Download PDF</a>
                </p>
                <iframe src="/pdfviewer/?file={{legislation.full_text_doc_url|urlencode}}"
                    id="result-image"
                    class="pdf-viewer"
                    frameborder="0"
                    seamless="true"
                    width="100%"
                    height="600px">
                </iframe>

            {% endif %}
        </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 %}


{% 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>

        $("#committee-actions").DataTable({
            "info": false,
            "searching": false,
            "bLengthChange": false,
            "paging": false,
            "aaSorting": [ [0,'desc'] ],
            "aoColumns": [
                { "sType": "datetime" },
                null,
                null
            ]
        });

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

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

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

    </script>
{% endblock %}