<!-- wrapper  -->
<div class="container-fluid dashboard-content ">
    <!-- pageheader  -->
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="page-header">
                <h2 class="pageheader-title">Microscope sessions overview</h2>
                <!-- <p class="pageheader-text">Nulla euismod urna eros, sit amet scelerisque torton lectus vel mauris facilisis faucibus at enim quis massa lobortis rutrum.</p> -->
                <div class="page-breadcrumb">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Sessions</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Overview</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- end pageheader  -->
    <!-- main content  -->
    <div class="row">
        {% if sessions|length %}
            {% for session in sessions %}
            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                <div class="card">

                    <div class="card-body">

                        <!-- session card head  -->
                        <div class="session-card-head">
                            <div class="row">
                                <div class="col col-auto">
                                <h3 class="card-title">{{ session.resource.name }}</h3>
                                </div>
                                <div class="col col-auto">
                                {% if session.status=='running' %}
                                    <span class="badge badge-success">Running</span>
                                {% elif session.status=='error' %}
                                    <span class="badge badge-danger">Failed</span>
                                {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- session card body  -->
                        <div class="session-card-body">
                            <h6 class="card-subtitle text-muted mb-3">Session: {{ session.name }}</h6>
                            <h6 class="card-subtitle text-muted mb-3">User: {{ session.operator.name }}</h6>
                            <h6 class="card-subtitle text-muted mb-3">Started: {{ session.start|pretty_datetime }}</h6>
                            <h6 class="card-subtitle text-muted mb-3">Session id: {{ session.id }}</h6>

                            <div class="row">
                                <div class="col-xl-9 col-lg-9 col-md-9 col-sm-9 col-9">
                                    <div id="morris_donut{{session.id}}"></div>
                                </div>
                                <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-3">
                                    <!-- The list below is still a TODO. Not in db yet-->
                                    <p>Acquiring speed: 120 / h</p>
                                    <p>Processed: 170 / 300</p>
                                    <a href="#" class="card-link">Errors: 0</a>
                                    <a href="#" class="card-link">Warnings: 0</a>
                                </div>
                            </div>
                        </div>
                        <div class="float-right">
                            <button type="button" class="btn btn-outline-dark btn-sm" onclick="javascript: loadSessionDetails('{{session.id}}');">
                                View Details
                            </button>
                        </div>

                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <p>No sessions found for current user.</p>
        {% endif %}
    </div>
    <!-- end main content  -->
</div>
<!-- end wrapper  -->
<!-- javascript -->
<script>
    (function(window, document, $, undefined) {
    "use strict";
    $(function() {
        if ($('#morris_donut1').length) {
            Morris.Donut({
                element: 'morris_donut1',
                data: [
                    { value: 70, label: 'foo' },
                    { value: 15, label: 'bar' },
                    { value: 10, label: 'baz' },
                    { value: 5, label: 'A really really long label' }
                ],

                labelColor: '#2e2f39',
                   gridTextSize: '14px',
                colors: [
                     "#5969ff",
                                "#ff407b",
                                "#25d5f2",
                                "#ffc750"
                ],

                formatter: function(x) { return x + "%" },
                  resize: true
            });
        }

        if ($('#morris_donut2').length) {
            Morris.Donut({
                element: 'morris_donut2',
                data: [
                    { value: 70, label: 'foo' },
                    { value: 15, label: 'bar' },
                    { value: 10, label: 'baz' },
                    { value: 5, label: 'A really really long label' }
                ],

                labelColor: '#2e2f39',
                   gridTextSize: '14px',
                colors: [
                     "#5969ff",
                                "#ff407b",
                                "#25d5f2",
                                "#ffc750"
                ],

                formatter: function(x) { return x + "%" },
                  resize: true
            });
        }
    });

})(window, document, window.jQuery);


function loadSessionDetails(sessionId) {
    load_main_content('session-live', {session_id: sessionId});
}

</script>
