{% 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");
        }
    });

    // 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() {
        disconnectionSocket = makeReconnectingWebSocket('/no_op/');
        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>

                {% 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>
{% comment %}
  this exists so that if there is an error in oTree's channel consumers,
  such as data export or rooms, the user gets some notification rather than it silently
  failing.
  don't put it in global base template even though it could be useful there too,
  because we don't want to pollute "view source"
  in user-defined pages
{% endcomment %}
<div id='websocket-server-error' class="top-left-fixed-alert" style="visibility: hidden"></div>
{% endblock body_main %}
