<!DOCTYPE html>
<html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="icon" type="image/x-icon" href="../static/icons/Icon-1024_saturated.png"/>

        <!-- Bootstrap Material CSS -->
        <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">

        <!-- Material Icon -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

        <!-- Custom Stylesheets -->
        <link rel="stylesheet" type="text/css" href="../static/css/crystal_dashboard_stylesheet.css">

        <!-- Awesome font -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

        <!-- Animation CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

        <!-- JS Code Prettifier -->
        <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

        <title>Crystal</title>
    </head>

    <body class="customScrollBar">

    <!-- Libraries -->
    <!-- Load them here to get a cleaner loading screen -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
    <script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>
    <script src="%% url_for('static', filename='js/plotly-latest.min.js') %%"></script>
    <script src="https://unpkg.com/vue"></script>

    <div id="vue-dashboard" style="overflow-x: hidden" class="textContent">

        <!-- use the modal component, pass in the prop -->
        <modal v-if="showModal" @close="showModal = false"></modal>

        <div class="row mt-3 mr-3">
            <div class="col-lg-10">
                <div class="row">
                    <div class="col-lg-1">
                        <img src="../static/icons/Icon-1024.ico" style="width: 100%">
                    </div>
                    <div class="col">
                        <div class="row">
                            <div class="col">
                                <h2>Crystal</h2>
                            </div>
                        </div>
                        <br/>
                        <div class="row">
                            <div class="col">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="row">
                                            <div class="col-lg-2">
                                                <h4 style="margin-top:0.45rem">Project: </h4>
                                            </div>
                                            <div class="col">
                                                <div class="dropdown">
                                                    <button v-on:click="get_projects()" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="text-transform: inherit;">
                                                        <span style="font-size: 1.3rem">{{current_project}}</span>
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a v-on:click="set_project(value)" v-for="value in all_projects" class="dropdown-item" href="#">
                                                            {{value}}
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="row">
                                            <div class="col-lg-1">
                                                <h4 style="margin-left: 2rem; margin-top:0.45rem">Run: </h4>
                                            </div>
                                            <div class="col">
                                                <div class="dropdown">
                                                    <button v-on:click="get_runs()" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="text-transform: inherit;">
                                                        <span style="font-size: 1.3rem">{{current_run}}</span>
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a v-on:click="set_run(value)" v-for="value in all_runs" class="dropdown-item mw-100" href="#">
                                                            {{value}}
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="row">
                    <div class="col-lg-8">
                        <button class="btn btn-secondary" v-on:click="toggle_refresh()">
                            {{refresh_button_text}}
                        </button>
                    </div>
                    <div class="col">
                        <button class="btn btn-secondary" v-on:click="refresh()" class="btn btn-dark">
                            <i class="material-icons">
                                refresh
                            </i>
                        </button>
                    </div>
                </div>
            </div>
        </div>


        <!-- Info display: Will bw used later -->
        <!--<div class="row mt-3">-->
            <!--<div class="col-lg-1"></div>-->
            <!--<div class="col">-->
                <!--<div class="row">-->
                    <!--<h4>-->
                        <!--Test message!-->
                    <!--</h4>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->


        <!-- Dashboard cards -->
        <div class="dashBoardContainer">

            <div class="crystalMenuBar">

                <div class="row h-25 crystalIconContainer"  @mouseenter="show_mouse_over('dashboard')" @mouseleave="hide_mouse_over('dashboard')">
                    <div class="col">
                        <div class="row">
                            <div v-on:click="show_dashboard_window()" class="crystalIcon rounded-circle btn" style="padding: 0!important;">
                                <i class="material-icons" style="font-size: 3rem; margin-top: 0.7rem;">dashboard</i>
                            </div>
                        </div>
                        <div class="row">
                            <div id="dashboard_text" class="text-center" style="margin-left: 0.5rem"></div>
                        </div>
                    </div>
                </div>

                <div class="row h-25 crystalIconContainer"  @mouseenter="show_mouse_over('plots')" @mouseleave="hide_mouse_over('plots')">
                    <div class="col">
                        <div class="row">
                            <div v-on:click="show_plots_window()" class="crystalIcon rounded-circle btn" style="padding: 0!important;">
                                <i class="material-icons" style="font-size: 3rem; margin-top: 0.7rem;">waves</i>
                            </div>
                        </div>
                        <div class="row">
                            <div id="plots_text" class="text-center" style="margin-left: 1.6rem"></div>
                        </div>
                    </div>
                </div>

                <div class="row h-25 crystalIconContainer"  @mouseenter="show_mouse_over('images')" @mouseleave="hide_mouse_over('images')">
                    <div class="col">
                        <div class="row">
                            <div v-on:click="show_images_window()" class="crystalIcon rounded-circle btn" style="padding: 0!important;">
                                <i class="material-icons" style="font-size: 3rem; margin-top: 0.7rem;">filter_hdr</i>
                            </div>
                        </div>
                        <div class="row">
                            <div id="images_text" class="text-center" style="margin-left: 1.2rem"></div>
                        </div>
                    </div>
                </div>

                <!-- Project Management Button -->
                <div class="row h-25 crystalIconContainer"  @mouseenter="show_mouse_over('manage')" @mouseleave="hide_mouse_over('manage')">
                    <div class="col">
                        <div class="row">
                            <div id="show-modal" @click="show_project_management()" class="crystalIcon rounded-circle btn" style="padding: 0!important;">
                                <i class="material-icons" style="font-size: 3rem; margin-top: 0.7rem;">ballot</i>
                            </div>
                        </div>
                        <div class="row">
                            <div id="manage_text" class="text-center" style="margin-left: 1.1rem"></div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="row">
                <div class="col-lg-11 offset-md-1">
                    <div class="textContent" v-if="current_window==='plots' && isCurrentVariableEmpty()">
                        <div class="container" style="text-align: center">
                            <br/>
                            Please pick the required <b>project</b> and <b>run</b> to display.
                            <br/>
                            <br/>
                            Haven't made plots yet?
                            <br/>
                            No problem!
                            <br/>
                            <br/>
                            Try this out to get started:
                            <br/>
                            <br/>
                        </div>
                        <br/>
                        <div class="container">
                            <pre class="prettyprint" style="border: none">
                                import time
                                import numpy as np
                                from crystal import Crystal

                                cr = Crystal(project_name="Realtime_sine")
                                x_range = np.arange(0, 1000, 0.1)

                                for i in x_range:
                                value = np.sin(2*np.pi*i)
                                cr.scalar(value=value, step=i, name="sine_wave")
                                print("step: {} \t value: {}".format(i, value))
                                time.sleep(1)  # one value a second
                            </pre>
                        </div>

                        <div class="container" style="text-align: center">
                            Checkout <a href="https://github.com/Naresh1318/crystal">this</a> link for more info!
                        </div>
                    </div>

                    <div class="row" v-if="current_window === 'dashboard'">
                        <div class="col">
                            <h1>You are now in the dashboard window</h1>
                            <p>This section is still being worked on!</p>
                        </div>
                    </div>

                    <transition-group v-if="current_window === 'plots'" class="row" tag="div" name="slide-fade">
                        <div class="col-lg-6" v-for="value in current_variables" :key="value">
                            <div class="shadow p-1 mb-5 bg-white card crystalCard">
                                <h5 class="card-title crystalCardTitle"> {{extract_correct_name(value)}} </h5>
                                <div class="card-img" v-bind:id="value" style="width: auto"></div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col">
                                            <button type="button" class="btn btn-raised btn-info" v-on:click="download_graph(value)">Download graph</button>
                                        </div>
                                        <div class="col" style="float: left; padding-left: 3rem">
                                            <button type="button" class="btn btn-raised btn-info"  v-on:click="get_graph_csv(value)">Download CSV</button>
                                        </div>
                                        <div class="col-lg-1">
                                            <div class="dropdown">
                                                <button class="btn bmd-btn-icon dropdown-toggle" type="button" id="ex1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="material-icons">more_vert</i>
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-left" aria-labelledby="ex1">
                                                    <button class="dropdown-item" type="button">Action</button>
                                                    <button class="dropdown-item disabled" type="button">Another action</button>
                                                    <button class="dropdown-item" type="button">Another action</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </transition-group>


                    <div class="row" v-if="current_window === 'images'">
                        <div class="col">
                            <h1>You are now in the images window</h1>
                            <p>This section is still being worked on!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End of dashboard cards -->

    <!-- Project management -->
    <div id="vue-manage" class="textContent">
        <script id="modal-template" type="text/x-template">
            <transition name="modal">
                <div class="modal-mask" @click="close_project_management">
                    <div class="modal-wrapper">
                        <div class="modal-container">
                            <div class="modal-header" style="font-family: 'Source Sans Pro', sans-serif;">
                                <slot name="header">
                                    <span style="font-size: 2rem">{{title}}</span>
                                </slot>
                            </div>

                            <div class="modal-body customScrollBar">
                                <slot name="body">
                                    <div class="m-2" v-for="project in all_projects" @click="get_runs(project)">
                                        <div class="card row" style="cursor: pointer;border-radius: 0.5rem !important">
                                            <div class="card-body" style="padding: 1rem">
                                                <div class="row">
                                                    <div class="col" style="padding-top: 0.4rem; user-select: none;">
                                                        <h5>
                                                            {{project}}
                                                        </h5>
                                                    </div>
                                                    <div class="col-lg-1" @click="delete_project(project)">
                                                        <i class="material-icons" style="padding-top: 0.2rem">
                                                            delete_forever
                                                        </i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div v-for="(runs, project_key) in all_runs">
                                            <div v-if="project_key == project">
                                                <transition-group tag="div" class="content__list" name="slide-fade">
                                                    <div class="card m-1" v-for="run in runs" :key="run" style="cursor: pointer;border-radius: 0.5rem !important;margin-top: 0.7rem!important;">
                                                        <div class="card-body" style="padding: 0.8rem">
                                                            <div class="row" style="padding: 0;">
                                                                <div class="col" style="padding-top: 0.4rem; user-select: none;">
                                                                    <h6>{{run}}</h6>
                                                                </div>
                                                                <div class="col-lg-1" @click="delete_run(project, run)">
                                                                    <i class="material-icons" style="padding-top: 0.2rem">
                                                                        delete_forever
                                                                    </i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </transition-group>
                                            </div>
                                        </div>
                                    </div>
                                </slot>
                            </div>

                            <div class="modal-footer">
                                <slot name="footer">
                                    <div class="row" style="width: 100%">
                                        <div class="col">
                                            <input type="text" class="form-control" v-on:keyup.enter="set_refresh_interval()" v-model="entered_refresh_time" placeholder="time in s"/>
                                        </div>
                                        <div class="col">
                                            <label>Graph Smoothing: {{entered_smoothing_value}}</label>
                                            <input  class="form-control-range" type="range" min="0" max="1.3" step="0.1" v-on:change="set_smoothing_value()" v-model="entered_smoothing_value">
                                        </div>
                                    </div>
                                </slot>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </script>
    </div>
    <br/>

    <!-- My code -->
    <script> {% include 'js/crystal_dashboard.js' %} </script>


    </body>
</html>
