{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
{% endblock %}
    
{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2" style='padding-top:50px'>
        {% include "sidebar.html" %}
        </div>
        <div class="col-md-10" style="padding-top:50px">

        <table id="label_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Location</th>
                <th>Client</th>
                <th>Container</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Location</th>
                <th>Client</th>
                <th>Container</th>
            </tr>
        </tfoot>
        <tbody>
            {% for image in images %}
            <tr>
                <td>{{ image.location() }}</td>
                <td>{{ image.client }}</td>
                <td>{{ image.uri }}</td>
            </tr>
            {% endfor %}
        </tbody>
        </table>
        {% if images %}{% else %}
           <p class="alert alert-info">Hey friend! You don't have any containers yet. Why don't you 
              <a href="/pull">pull</a> some?</p>
        {% endif %}

        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    <script type="text/javascript">
    $(document).ready(function() {
     
        // Navigate to author or method page on select
        $("#view_container").click(function(){
            console.log("View Container selected.")
            var selected = $("#container").val();
            document.location = '/container/' + selected
        });

    });
    </script>
{% endblock %}