<!-- wrapper  -->
<div class="container-fluid dashboard-content ">
    <!-- pageheader  -->
    {% set title = "Sessions Overview" %}
    {% set navigation = [('Sessions', ''), ('Overview', '')] %}
    {% include 'include_header.html' %}

    <!-- main content  -->
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mb-5">
            <!-- tabs -->
            <div class="tab-regular">
                <ul class="nav nav-tabs nav-fill" id="myTab7" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="session-tab-current" data-toggle="tab" href="#sessions-current" role="tab" aria-controls="current" aria-selected="true">Current</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="session-tab-past" data-toggle="tab" href="#sessions-past" role="tab" aria-controls="past" aria-selected="false">Past</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="session-tab-summary" data-toggle="tab" href="#sessions-summary" role="tab" aria-controls="summary" aria-selected="false">Summary</a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent7">
                    <!-- tab "Current" -->
                    <div class="tab-pane fade show active" id="sessions-current" role="tabpanel" aria-labelledby="session-tab-current">
                        <!-- title row -->
                        <div class="row">
                            <p>Current running sessions</p>
                        </div>
                        <div class="row">
                            {% if sessions|length %}
                                {% for session in sessions %}
                                    {% if session.status=='running' %}
                                        <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">
                                                                <span class="badge badge-success">Running</span>
                                                            </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>
                                    {% endif %}
                                {% endfor %}
                            {% else %}
                                <p>No sessions found for current user.</p>
                            {% endif %}
                        </div>
                    </div>
                    <!-- end tab "Current" -->
                    <!-- tab "Past" -->
                    <div class="tab-pane fade" id="sessions-past" role="tabpanel" aria-labelledby="session-tab-past">
                        <!-- title row -->
                        <div class="row">
                            <p>Completed sessions</p>
                        </div>
                        <div class="row">
                            {% if sessions|length %}
                                {% for session in sessions %}
                                    {% if session.status=='finished' or session.status=='failed' %}
                                        <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=='finished' %}
                                                                <span class="badge badge-success">Finished</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>
                                    {% endif %}
                                {% endfor %}
                            {% else %}
                                <p>No sessions found for current user.</p>
                            {% endif %}
                        </div>
                    </div>
                    <!-- end tab "Past" -->
                    <!-- tab "Summary" -->
                    <div class="tab-pane fade" id="sessions-summary" role="tabpanel" aria-labelledby="session-tab-summary">
                        <!-- title row -->
                        <div class="row">
                            <p>Completed sessions</p>
                        </div>
                        <div class="row">
                            <div class="offset-xl-10 col-xl-2 col-lg-2 col-md-6 col-sm-12 col-12">
                                <form>
                                    <div class="form-group">
                                        <input class="form-control" type="text" name="daterange" value="01/01/2020 - 31/12/2020" />
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="row">
                            {% if sessions|length %}
                                {% for session in sessions %}
                                    {% if session.status=='finished' or session.status=='failed' %}
                                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                            <div class="card">
                                                <div class="card-body">
                                                    <table class="table table-striped">
                                                        <tbody>
                                                        <tr>
                                                            <td>User</td>
                                                            <td>{{ session.operator_id }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Started</td>
                                                            <td>{{ session.start }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Finished</td>
                                                            <td>{{ session.end }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Num. of movies</td>
                                                            <td>{{ session.stats.numMovies }}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Status</td>
                                                            <td>{{ session.status }}</td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            {% else %}
                                <p>No sessions found for current user.</p>
                            {% endif %}
                        </div>
                    </div>
                    <!-- end tab "Summary" -->
                </div>
            </div>
            <!-- end tabs -->
        </div>
    </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
            });
        }
    });

    $(function() {
    $('input[name="daterange"]').daterangepicker({
        "locale": {
            "format": "DD/MM/YYYY",
            "firstDay": 1},
        opens: 'left'
    }, function(start, end, label) {
        console.log("A new date selection was made: " + start.format('DD-MM-YYYY') + ' to ' + end.format('DD-MM-YYYY'));
    });
    });

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


function loadSessionDetails(sessionId) {
    load_main_content('session_live', {session_id: sessionId});
}

</script>
