<!DOCTYPE html>

<%
    try:
       from tob.template_tools import *
    except ModuleNotFoundError:
        from theonionbox.tob.template_tools import *
    end

    base_path = get('virtual_basepath', '') + '/'
%>

<html lang="en">
<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" href="data:image/gif;base64,{{!icon}}">

    % for stylesheet in session['stylesheets']:
    <link href="{{base_path}}{{session.id}}/{{!stylesheet}}" rel="stylesheet">
    % end



    <title>The Onion Box</title>
</head>
<body>
<header class="navbar navbar-expand navbar-dark d-flex flex-row bd-navbar tobcc-font justify-content-between">
    <span class="navbar-brand mr-0 mr-md-2" aria-label="TheOnionBox">
        <a href="/" class="navbar-brand mb-0 h1">The Onion Box</a>
    </span>
    <div class="navbar-nav d-none d-md-inline-flex" style="margin-left: auto; margin-right: auto;">
        <canvas style="height:50px; width: 450px; display: none;" class="justify-content-center" id="topchart"></canvas>
    </div>
    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="javascript: cc.on_new_node()" class="nav-link p-2">
                <i class="fas fa-plus fa-lg"></i>
            </a>
        </li>
        <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" id="ccUserDropdown" role="button"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-user fa-lg"></i>
            </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="javascript: cc.about()">About The Onion Box</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="javascript: cc.license()">License</a>
                </div>
        </li>
    </ul>

    % if show_logout is True:
    <a class="btn btn-outline-light d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" id="button_logout"
       href="{{base_path}}{{session.id}}/cc/logout">
        Logout
    </a>
    % end
</header>

<div class = "cc-cards-area">
    <div class="row" id="cc-cards"></div>
</div>

%# NEVER NEVER shall this part of the code be executed!

<noscript>
    <style type="text/css">
    </style>

    <div class="modal tobcc-font" style="display: block;" tabindex="-1" role="dialog" id="modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header cc-dialog-header">
                    <h5 class="modal-title cc-dialog-title">The Onion Box</h5>
                </div>
                <div class="modal-body text-center" id='license'>
                    <b>Sorry!</b><br>
                    This dashboard relies on
                    <a href="https://www.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a>.<br>
                    Please ACTIVATE it to proceed!
                </div>
                <div class="modal-footer">
                    <div style="margin-right: auto"></div>
                    <a href='{{base_path}}{{session.id}}/' class="btn btn-primary">
                        Reload
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-backdrop fade show"></div>
</noscript>

</body>

% for script in session['scripts']:
    <script type="text/javascript" src="{{base_path}}{{session.id}}/{{!script}}"></script>
% end

<script>
    var cc;
    $(window).on('load', function() {
        cc = new ControlCenter({{launcher}});
    });

</script>

</html>


