<!DOCTYPE html>
<html lang="en">
    <head>

        <title>Real Space Interface</title>
        <meta charset="utf-8">
        <!-- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> -->

        <link rel="icon" type="image/png" sizes="32x32" href="{{ static_url('favicon-32x32.png') }}">
        <link rel="icon" type="image/png" sizes="16x16" href="{{ static_url('favicon-16x16.png') }}">

        <!-- Bootstrap, jquery, popper -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<!--         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
 -->
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css">
        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>

        <!-- Plotting framework Flot -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
        <script src="{{static_url("js/jquery.flot.axislabels.js")}}"></script>

        <!-- gif.js -->
        <script src="{{ static_url('js/gif.js') }}"></script>


        <!-- Open Iconic Icon font -->
        <link href="{{ static_url("fonts/open-iconic/font/css/open-iconic-bootstrap.css") }}" rel="stylesheet">

        <!-- Custom CSS -->
        <link rel="stylesheet" href="{{ static_url("css/custom.css") }}" />
        <link rel="stylesheet" href="{{ static_url("css/timeline.css") }}" />
    </head>

    <body>
        {% block threejs %}
        {% end %}

        <div id="infoTable" style="display: none;">
            <table class="table table-striped table-bordered">
                <tbody>
                    <tr>
                        <td>Unit of Length in Real Space</td>
                        <td id="DisplayrealScale"></td>
                    </tr>
                 </tbody>
            </table>
        </div>

        <!-- Configure popover displaying values such as units of length -->
        <script>
            $("#infoButton").popover({
                content: function() {
                    var table = $("#infoTable");
                    table.find("#DisplayrealScale").text(realScale);
                    return table.html();
                },
                html: true,
                placement: "bottom",
                title: "Information",
                trigger: "focus"
            }).click(function() {
                $(this).popover("show");
            });
        </script>


        <nav class="navbar navbar-expand-md navbar-dark bg-dark">

            <!-- <button type="button" id="infoButton" data-toggle="popover" class="btn btn-outline-secondary btn-sm mr-2"><span class="oi oi-info"></span></button> -->

            <button id="exitSingleMode" type="button" class="btn btn-warning btn-sm mr-2" onclick="exitSingleMode();">Return</button>

            <div id="quantityDropdownWrapper" class="dropdown">
                <button class="btn btn-primary btn-sm dropdown-toggle mr-2" type="button" id="quantity-dropdown-btn"
                    data-toggle="dropdown">
                    &delta;<sub>&gamma;</sub>
                </button>
                <div class="dropdown-menu" id="quantity-dropdown">
                    <a data-quantity="d_g" href="#" class="dropdown-item active">&delta;<sub>&gamma;</sub></a>
                    <a data-quantity="d_b" href="#" class="dropdown-item">&delta;<sub>b</sub></a>
                    <a data-quantity="d_ur" href="#" class="dropdown-item">&delta;<sub>&nu;</sub></a>
                    <a data-quantity="d_cdm" href="#" class="dropdown-item">&delta;<sub>cdm</sub></a>
                    <a data-quantity="d_g/4 + psi" href="#" class="dropdown-item">&delta;<sub>&gamma;</sub>/4 + &psi;</a>
                </div>
            </div>

            <button id="simulationListButton" type="button" class="btn btn-danger btn-sm mr-2"
                                  data-toggle="modal" data-target="#simulationListModal">Simulations</button>

            <script>
                $("#exitSingleMode").hide();
            </script>

            <div id="playerPanel" class="mr-2">
                <div class="btn-group btn-group-sm">
                    <button type="button" id="playerToStartBtn"
                    title="To Start" data-toggle="tooltip" data-placement="bottom" data-delay='{"show": 500, "hide": 10}'
                        class="btn btn-success">
                        <span class="oi oi-media-step-backward"></span>
                    </button>
                    <button type="button" id="playerBackFrameBtn"
                        title="Go back one frame" data-toggle="tooltip" data-placement="bottom" data-delay='{"show": 500, "hide": 10}'
                        class="btn btn-success">
                        <span class="oi oi-media-skip-backward" ></span>
                    </button>
                    <button type="button" id="playerPlayPauseBtn"
                        title="Play" data-toggle="tooltip" data-placement="bottom" data-delay='{"show": 500, "hide": 10}'
                        class="btn btn-success">
                        <span class="oi oi-media-play"></span>
                    </button>
                    <button type="button" id="playerForwardFrameBtn"
                        title="Advance one frame" data-toggle="tooltip" data-placement="bottom" data-delay='{"show": 500, "hide": 10}'
                        class="btn btn-success">
                        <span class="oi oi-media-skip-forward" ></span>
                    </button>
                    <button type="button" id="playerToEndBtn"
                        title="To End" data-toggle="tooltip" data-placement="bottom" data-delay='{"show": 500, "hide": 10}'
                        class="btn btn-success">
                        <span class="oi oi-media-step-forward"></span>
                    </button>
                    <button type="button" id="playerRepeatBtn"
                        title="Toggle Repeat" data-toggle="tooltip" data-placement="bottom" data-delay='{"show": 500, "hide": 10}'
                        class="btn btn-outline-success">
                        <span class="oi oi-loop"></span>
                    </button>
                </div>
            </div>

            <!-- <div class="nav-item navbar-text mr-2"> -->
            <form class="form-inline mr-2">
                <input class="form-control form-check-input" id="redshift-end-toggle" type="checkbox">
                <label
                class="text-light"
                for="redshift-end-toggle"
                data-toggle="tooltip"
                data-placement="bottom"
                data-html="true"
                title="Show evolution not only up to decoupling, but until today.
                WARNING: The results for &delta;<sub>&gamma;</sub> and
                &delta;<sub>&nu;</sub> beyond decoupling might be unphysical."
                >
                    Beyond Decoupling
                </label>
            </form>
            <!-- </div> -->

            <div class="nav-item player ml-2 mr-4">
                <div class="timeline" id="timeline">
                    <div id="scrubber" class="scrubber">
                    </div>
                </div>
            </div>


            <div class="nav-item text-light mr-2">
                z = <span id="DisplayRedshift"></span>
            </div>
        </nav>

        <script type="text/javascript">
            $(function () {
              $('[data-toggle="tooltip"]').tooltip()
            });
          </script>

        {% include "SimulationList.html" %}
        {% include "ProgressModal.html" %}
        {% include "AlreadySimulatedModal.html" %}
        {% include "GifExportModal.html" %}
        {% include "ImageExportModal.html" %}
        {% include "ExceptionModal.html" %}
        {% include "RedshiftModal.html" %}

        {% block body %}
        {% end %}
    </body>
</html>
