{% extends "base.html" %}

{% block content %}

<script>
        $(document).ready(function(){
            // Pre-populated initial data at page load
            var content_data = {{ content_data }};

            var refresh = function() {
                $.get("{{ url_prefix }}/rbd_pool_data/" + content_data.pool_name  + "/", function(data) {
                    content_data.images = data;
                    setTimeout(refresh, 10000);
                });
            };

            console.log(content_data);

            rivets.bind($("div#content"), content_data);
            setTimeout(refresh, 10000);

            $('#images').DataTable({
                'paging'      : true,
                'pageLength'  : 15,
                'lengthChange': false,
                'searching'   : true,
                'ordering'    : true,
                'info'        : false,
                'autoWidth'   : false
            });
        });
</script>


<section class="content-header">
    <h1>
        Block Pool { pool_name }
    </h1>
</section>

<section class="content">
    <div class="box">
        <div class="box-header">
            <h3 class="box-title">Images</h3>
        </div>
        <div class="box-body">
            <table id="images" class="table table-bordered">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Size</th>
                    <th>Objects</th>
                    <th>Object size</th>
                    <th>Features</th>
                    <th>Parent</th>
                </tr>
                </thead>
                <tbody>
                <tr rv-each-image="images">
                    <td>{image.name}</td>
                    <td>{image.size | dimless_binary}</td>
                    <td>{image.num_objs | dimless}</td>
                    <td>{image.obj_size | dimless_binary}</td>
                    <td>{image.features_name}</td>
                    <td>{image.parent}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>


</section>
<!-- /.content -->

{% endblock %}