<!DOCTYPE html>
<html>

<head>
    {% block head %}
    <title>{% block title %}{% endblock %} - RAMP</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='lib/css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='lib/css/font-awesome.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='lib/css/animate.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='lib/css/bootstrap-switch.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='lib/css/checkbox3.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='lib/css/jquery.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='lib/css/dataTables.bootstrap.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='lib/css/select2.min.css') }}">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/themes/flat-blue.css') }}">
    {% endblock %}
    <script>
        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date(); a = s.createElement(o),
                m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-99639693-1', 'auto');
        ga('send', 'pageview');

    </script>
</head>

<body class="flat-blue" {% block bodyoptions %}{% endblock %}>
    <div class="app-container">
        <div class="row content-container">
            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid base-top">
                    <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle">
                            <i class="fa fa-bars icon"></i>
                        </button>
                        <ol class="breadcrumb navbar-breadcrumb">
                            <li class="active"><a href="/">RAMP</a></li>
                        </ol>
                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-th icon"></i>
                        </button>
                    </div>
                    <ul class="nav navbar-nav navbar-right navbar-base">
                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-times icon"></i>
                        </button>
                        {% if not session.logged_in %}
                        <li><a class="login" href="/login">Login</a></li>
                        <li><a class="login" href="/sign_up">Sign Up</a></li>
                        {% endif %}
                        <!-- for later
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-comments-o"></i></a>
                            <ul class="dropdown-menu animated fadeInDown">
                                <li class="title">
                                    Notification <span class="badge pull-right">0</span>
                                </li>
                                <li class="message">
                                    No new notification
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown danger">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-star-half-o"></i> 4</a>
                            <ul class="dropdown-menu danger  animated fadeInDown">
                                <li class="title">
                                    Notification <span class="badge pull-right">4</span>
                                </li>
                                <li>
                                    <ul class="list-group notifications">
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge">1</span> <i class="fa fa-exclamation-circle icon"></i> new registration
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge success">1</span> <i class="fa fa-check icon"></i> new orders
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge danger">2</span> <i class="fa fa-comments icon"></i> customers messages
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item message">
                                                view all
                                            </li>
                                        </a>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        -->
                        {% if session.logged_in %}
                        <li class="dropdown profile">
                            <a href="#" class="dropdown-toggle login" data-toggle="dropdown" role="button"
                                aria-expanded="false">Hi {{ current_user.firstname }}!<span class="caret"></span></a>
                            <ul class="dropdown-menu animated fadeInDown">
                                <li>
                                    <div class="profile-info">
                                        <h4 class="username">{{ current_user.name }}</h4>
                                        <p>{{ current_user.email }}</p>
                                        <div class="btn-group margin-bottom-2x" role="group">
                                            <a href="{{ url_for('auth.update_profile') }}" role="button"
                                                class="btn btn-default"><i class="fa fa-user"></i>update profile</a>
                                            <a href="{{ url_for('auth.logout') }}" role="button"
                                                class="btn btn-default"><i class="fa fa-sign-out"></i>log out</a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        {% endif %}
                    </ul>
                </div>
            </nav>
            <div class="side-menu sidebar-inverse">
                <nav class="navbar navbar-inverse" role="navigation">
                    <div class="side-menu-container">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="/">
                                <div class="icon fa fa-users"></div>
                                <div class="title">RAMP</div>
                            </a>
                        </div>
                        <ul class="nav navbar-nav navbar-font-about">
                            {% if admin %}
                            <li><a href="/approve_users"><span class="icon fa fa-user-plus"></span><span
                                        class="title">Approve users</span></a></li>
                            {% endif %}
                            <li>
                                <a href="/problems">
                                    <span class="icon fa fa-list"></span><span class="title">Problems &amp events</span>
                                </a>
                            </li>

                            {% if event and current_user.is_authenticated %}
                            <li class="panel panel-default dropdown active">
                                <a data-toggle="collapse" href="#dropdown-event">
                                    <span class="icon fa fa-cloud"></span><span class="title">{{ event.name }}</span>
                                </a>
                                <!-- Dropdown level 1 -->
                                <div id="dropdown-event" class="panel-collapse active collapse in">
                                    <div class="panel-body">
                                        <ul class="nav navbar-nav">
                                            <li><a href="/events/{{ event.name }}">Overview</a></li>
                                            {% if (approved is not defined) or (approved == True) %}
                                            <li><a href="/events/{{ event.name }}/leaderboard">Leaderboard</a></li>
                                            <li><a href="/events/{{ event.name }}/competition_leaderboard">Competition
                                                    leaderboard</a></li>
                                            <li><a href="/events/{{ event.name }}/sandbox">Sandbox</a></li>
                                            <li><a href="/events/{{ event.name }}/my_submissions">My submissions</a>
                                            </li>
                                            {% else %}
                                            <!-- <li class='disabled'><a href="#">starting kit</a></li> -->
                                            <li class='disabled'><a href="#">Leaderboard</a></li>
                                            <li class='disabled'><a href="#">Competition leaderboard</a></li>
                                            <li class='disabled'><a href="#">Sandbox</a></li>
                                            <li class='disabled'><a href="#">My submissions</a></li>
                                            {% endif %}
                                            {% if admin %}
                                            <li><a href="/events/{{ event.name }}/dashboard_submissions">Dashboard
                                                    admin</a></li>
                                            <li><a href="/events/{{ event.name }}/private_leaderboard">Private
                                                    leaderboard</a></li>
                                            <li><a href="/events/{{ event.name }}/private_competition_leaderboard">Private
                                                    competition leaderboard</a></li>
                                            <li><a href="/events/{{ event.name }}/update">Update event</a></li>
                                            {% endif %}
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            {% elif current_user.is_authenticated %}
                            <li class="panel panel-default dropdown disabled">
                                <a data-toggle="collapse" href="#">
                                    <span class="icon fa fa-cloud"></span><span class="title">Select event to
                                        view</span>
                                </a>
                                <!-- Dropdown level 1 -->
                                <div id="dropdown-event" class="panel-collapse active collapse in">
                                    <div class="panel-body">
                                        <ul class="nav navbar-nav">
                                            <li class='disabled'><a href="#">Overview</a></li>
                                            {% if (approved is not defined) or (approved == True) %}
                                            <!-- <li class='disabled'><a href="#">starting kit</a></li> -->
                                            <li class='disabled'><a href="#">Leaderboard</a></li>
                                            <li class='disabled'><a href="#">Competition leaderboard</a></li>
                                            <li class='disabled'><a href="#">Sandbox</a></li>
                                            <li class='disabled'><a href="#">My submissions</a></li>
                                            {% endif %}
                                            {% if admin %}
                                            <li class='disabled'><a href="#">Dashboard admin</a></li>
                                            <li class='disabled'><a href="#">Private leaderboard</a></li>
                                            <li class='disabled'><a href="#">Private competition leaderboard</a></li>
                                            <li class='disabled'><a href="#">Update event</a></li>
                                            {% endif %}
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            {% endif %}
                        </ul>
                    </div>
                    <!-- /.navbar-collapse -->
                </nav>
            </div>
            <!-- Main Content -->
            <div class="container-fluid">
                <div class="side-body">
                    <div class="row">
                        {% block content %}
                        {% endblock %}
                    </div>
                </div>
            </div>
        </div>
        <footer class="app-footer">
            <div class="wrapper">
                <span class="pull-left"><i class="icon fa fa-copyright"></i> RAMP <a href="#"><i
                            class="icon fa fa-long-arrow-up"></i><i class="icon fa fa-long-arrow-up"></i></a></span>
                &nbsp; &nbsp; &nbsp; &nbsp;
                <span><a href="/"><img src="{{ url_for('static', filename='img/logo_CDS_footer.svg') }}"
                            height="20px"></a></span> &nbsp; &nbsp; &nbsp; &nbsp; <span><a
                        href="mailto:admin@ramp.studio">Contact Us <i class="icon fa fa-envelope"></i></a></span>
            </div>
        </footer>
        <div>
            <script type="text/javascript" src="{{ url_for('static', filename='lib/js/jquery.min.js') }}"></script>
            <script type="text/javascript" src="{{ url_for('static', filename='lib/js/bootstrap.min.js') }}"></script>
            <script type="text/javascript" src="{{ url_for('static', filename='lib/js/Chart.min.js') }}"></script>
            <script type="text/javascript"
                src="{{ url_for('static', filename='lib/js/bootstrap-switch.min.js') }}"></script>
            <script type="text/javascript"
                src="{{ url_for('static', filename='lib/js/jquery.matchHeight-min.js') }}"></script>
            <script type="text/javascript"
                src="{{ url_for('static', filename='lib/js/jquery.dataTables.min.js') }}"></script>
            <script type="text/javascript"
                src="{{ url_for('static', filename='lib/js/dataTables.bootstrap.min.js') }}"></script>
            <script type="text/javascript"
                src="{{ url_for('static', filename='lib/js/select2.full.min.js') }}"></script>
            <script type="text/javascript" src="{{ url_for('static', filename='lib/js/ace/ace.js') }}"></script>
            <script type="text/javascript" src="{{ url_for('static', filename='lib/js/ace/mode-html.js') }}"></script>
            <script type="text/javascript"
                src="{{ url_for('static', filename='lib/js/ace/theme-github.js') }}"></script>
            <!-- Javascript -->
            <script type="text/javascript" src="{{ url_for('static', filename='js/app.js') }}"></script>
            {#            <script type="text/javascript" src="{{ url_for('static', filename='js/index.js') }}"></script> #}
            {% block scripts %}
            {% endblock %}
</body>

</html>