{% 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 }}
                    <span class="pull-right">
                        {{ legislation.inferred_status | inferred_status_label | safe }}
                    </span>
                </h1>
            </div>
        </div>

        <div class="row-fluid clearfix">

            {% if legislation.primary_sponsor %}
            <div class="col-xs-5">
                <p class="h4">Primary Sponsor</p>
                <p>
                    <i class="fa fa-user"></i>
                    {{ legislation.primary_sponsor.person.link_html | safe }}
                </p>
            </div>
            {% endif %}
            <div class="col-xs-7">
                <p class="h4">Currently Controlled By</p>
                <p>
                    {% for org in legislation.controlling_body %}
                        <i class="fa fa-users"></i> {{ org.link_html|safe }}
                    {% endfor %}
                </p>
            </div>

        </div>

        <div class="row-fluid desktop-only">
            {% include "partials/legislation_detail_desktop.html" %}
        </div>
        <div class="row-fluid non-desktop-only">
            {% include "partials/legislation_detail_non_desktop.html" %}
        </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>

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

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

    </script>
{% endblock %}