{% extends "index.html" %}
{% block content %}
    <script>
        showContainers();
        {% if auto_refresh %}
        //one-time-refresh
        window.history.pushState("object", document.title, "/containers");
        window.setTimeout(function(){  showContainers(); }, 5000);
        {% endif %}
        


        {% with succesful = get_flashed_messages(category_filter=["success"]) %}
        {% if succesful %}
        //for successful login
        {%- for msg in succesful %}
        toastr['success']("{{msg}}");
        {% endfor -%}
        {% endif %}
        {% endwith %}
    </script>
    <div id="containers-set-id">
    <div class="col-lg-12 main-div">
        <div class="col-lg-12">
            <div class="form-group">
                <button class="btn btn-default btn-start_container" onclick="startContainer()">
                    <span class="glyphicon glyphicon-play"> </span> Start
                </button>
                <button class="btn btn-default btn-stop_container" onclick="stopContainer()">
                    <span class="glyphicon glyphicon-stop"> </span> Stop
                </button>
                <button class="btn btn-default btn-restart_container" onclick="restartContainer()">
                    <span class="glyphicon glyphicon-repeat"> </span> Restart
                </button>
                <button class="btn btn-default btn-delete_container" onclick="deleteContainer()">
                    <span class="glyphicon glyphicon-remove-sign"> </span> Delete
                </button>
                <!--- right -->
                <a class="btn btn-success pull-right" href="/images">
<span class="glyphicon glyphicon-plus-sign"> </span>
 New Instance </a>
                <button class="btn btn-info pull-right" href="#" onclick="showContainers();" style="margin-right:5px;">
                   <span class="glyphicon glyphicon-refresh"> </span> Refresh List
                </button>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <table class="table table-bordered" id="tbl-containers">
            <thead>
            <th><input type="checkbox" id="chk-containers" onchange="checkAll()"></th>
            <th>Name</th>
            <th>Status</th>
            <th>IP Address</th>
            <th>OS image</th>
            <th>Created On</th>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    </div>
{% endblock %}
