{% extends "otree/Base.html" %}
{% load i18n %}
{% load otree otree_internal static %}

{% block internal_styles %}
    {{ block.super }}
    <link href="{% static 'otree/css/table.css' %}" rel="stylesheet" />

    <style>
        body {
            padding-top: 50px;
        }
    </style>

{% endblock %}

{% block internal_scripts %}
{{ block.super }}
<script>
$(function () {
    $('[data-toggle="popover"]').popover()

    // if top menu link is clicked inside iframe
    // we exit full mode
    $("#top_menu a").click(function() {
        if ( window.location !== window.parent.location ) {
                window.parent.location.href = $(this).attr("href");
        }
    });

    $.ajax({
        url: '{% url 'OtreeCoreUpdateCheck' %}',
        type: 'GET',
        success: function(data) {
            if (!data.pypi_connection_error) {
                if (data.update_needed) {
                    $('._otree-updates').html(
                        '<a class="nav-link" href="{% url 'ServerCheck' %}"><small>Update available</small></a>')
                }
            }
        }
    });

    // i guess sockets must be global variables, and i should name it
    // something other than 'socket' because there might be other sockets
    // in descendant pages
    var disconnectionSocket;

    function setupDisconnectedAlert() {
        var ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
        var ws_path = ws_scheme + '://' + window.location.host + '/no_op/';
        disconnectionSocket = new ReconnectingWebSocket(ws_path);
        var socket = disconnectionSocket;

        var alertStyle = document.querySelector('#disconnected-alert').style;
        socket.onopen = function (e) {
            alertStyle.visibility = 'hidden';
        };

        socket.onclose = function (e) {
            alertStyle.visibility = 'visible';
        };
    }
    setupDisconnectedAlert();

});

</script>

<script src="{% static 'otree/js/jquery.color-2.1.2.min.js' %}"></script>
<script src="{% static 'otree/js/jquery.timeago.js' %}"></script>
<script src="{% static 'otree/js/jsondiffpatch.min.js' %}"></script>
<script src="{% static 'otree/js/table-utils3.js' %}"></script>

{% endblock %}
{% block body_main %}
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="top_menu">
        <a class="navbar-brand" href="/">oTree</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-collapse collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="{% url 'DemoIndex' %}">Demo</a></li>
                <li class="nav-item"><a class="nav-link" href="{% url 'Sessions' %}">Sessions</a></li>
                <li class="nav-item"><a class="nav-link" href="{% url 'Rooms' %}">Rooms</a></li>
                <li class="nav-item"><a class="nav-link" href="{% url 'ExportIndex' %}">Data</a></li>
                <li class="nav-item"><a class="nav-link" href="{% url 'ServerCheck' %}">Server Check</a></li>
                <li class="nav-item _otree-updates"></li>

                {% if request.user.is_authenticated|default:False %}
                    <li><a class="nav-link" href="{% url 'logout' %}">Logout</a></li>
                {% endif %}
            </ul>
        </div>
    </nav>

    <div class="container" style='max-width:970px'>
    <div class="page-header" style="padding-top: 40px">
        <h2>{% block title %}{% endblock %}</h2>
    </div>
    {% block menus %}{% endblock %}
    <div>
        {% block content %}{% endblock %}

    </div>
    <br/>
</div>
{% endblock %}
<!--end body_main-->
