{% extends "base.html" %}
{% load staticfiles %}

{% block extrahead %}
    <!-- Morris Charts CSS -->
    <link href="{% static "bower_components/morrisjs/morris.css" %}" rel="stylesheet">

    <!-- DataTables CSS -->
    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
          rel="stylesheet">

    <!-- DataTables Responsive CSS -->
    <link href="{% static "bower_components/datatables-responsive/css/dataTables.responsive.css" %}"
          rel="stylesheet">
{% endblock extrahead %}


{% block content %}
    {% for resource, utilization, bookings in pods %}
        <div class="row">
            <div class="col-lg-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        {{ resource.name }}
                    </div>
                    <div class="panel-body">
                        <div class="flot-chart">
                            <div class="flot-chart-content" id="{{ resource.slave.name }}"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        {{ resource.name }} Bookings
                    </div>
                    <div class="panel-body">
                        <div class="dataTables_wrapper">
                            <table class="table table-striped table-bordered table-hover"
                                   id="{{ resource.slave.name }}_bookings" cellspacing="0"
                                   width="100%">
                                <thead>
                                <tr>
                                    <th>User</th>
                                    <th>Purpose</th>
                                    <th>Start</th>
                                    <th>End</th>
                                    <th>Status</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for booking in bookings %}
                                    <tr>
                                        <th>
                                            {{ booking.user.username }}
                                        </th>
                                        <th>
                                            {{ booking.purpose }}
                                        </th>
                                        <th>
                                            {{ booking.start }}
                                        </th>
                                        <th>
                                            {{ booking.end }}
                                        </th>
                                        <th>
                                            Jira Status
                                        </th>
                                    </tr>
                                {% endfor %}`
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}

{% endblock content %}


{% block extrajs %}
    <!-- DataTables JavaScript -->
    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
          rel="stylesheet">


    <script src={% static "bower_components/datatables/media/js/jquery.dataTables.min.js" %}></script>
    <script src={% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" %}></script>



    <!-- Flot Charts JavaScript -->
    <script src="{% static "bower_components/flot/excanvas.min.js" %}"></script>
    <script src="{% static "bower_components/flot/jquery.flot.js" %}"></script>
    <script src="{% static "bower_components/flot/jquery.flot.pie.js" %}"></script>
    <script src="{% static "bower_components/flot/jquery.flot.resize.js" %}"></script>
    <script src="{% static "bower_components/flot/jquery.flot.time.js" %}"></script>
    <script src="{% static "bower_components/flot.tooltip/js/jquery.flot.tooltip.min.js" %}"></script>

    <script type="text/javascript">
        $(document).ready(function () {


            {% for resource, utilization, bookings in pods %}
                $('#{{ resource.slave.name }}_bookings').DataTable({});

                $(function () {
                    var data = [{
                        label: "Offline",
                        data: {{ utilization.offline }},
                        color: '#d9534f'
                    }, {
                        label: "Online",
                        data: {{ utilization.online }},
                        color: '#5cb85c'
                    }, {
                        label: "Idle",
                        data: {{ utilization.idle }},
                        color: '#5bc0de'
                    }];

                    var plotObj = $.plot($("#{{ resource.slave.name }}"), data, {
                        series: {
                            pie: {
                                show: true
                            }
                        },
                        grid: {
                            hoverable: false
                        },
                        tooltip: true,
                        tooltipOpts: {
                            content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
                            shifts: {
                                x: 20,
                                y: 0
                            },
                            defaultTheme: false
                        }
                    });

                });
            {% endfor %}

        });
    </script>

{% endblock extrajs %}