<!-- Main body template. Define the base template, <style> and <script> here -->
<!DOCTYPE html>
<html class="html-scroll">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
    <meta charset="utf-8">
    <title>{{main_title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional Bootstrap theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- Update with data soon -->
    <link rel="shortcut icon" type="image/x-icon" href={{favicon}}>
    <!-- Get variables needed within js from jinja -->

    <style type="text/css">
    .html-scroll {
        overflow-y: scroll;
    }
    .container {
        max-width: 1900px;
        padding-top: 10px;
    }
    .control-form {
        display: inline;
        margin-right: 20px;
        margin-top: -8px;
    }
    .boxstyle {
        border: 1px solid #ccc;
        margin-bottom: 5px;
        border-radius: 8px;
        padding: 2px 10px 2px 10px;
    }
    .group-boxstyle {
        border: 1px solid #ccc;
        margin-bottom: 5px;
        border-radius: 8px;
        padding: 0px 0px 0px 0px;
        background-color: #f8f8f8;
    }
    .group-boxstyle:hover {
        background-color: #f2f2f2;
    }
    .login-w-hover {
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: #f8f8f8;
        font-weight: 350;
    }
    .login-w-hover:hover {
        background-color: #d9d9d9;
    }
    .commonstyle {
        margin: 0px 10px 5px 10px;
    }
    .collapse-div{
        overflow: hidden;
        clear: both;
    }
    .own-line {
        display: block;
    }
    .in-line{
        display: inline-block;
    }
    .action-icon {
        height: 11px;
        width: 11px;
        border-radius: 50%;
        display: inline-block;
    }
    .assc-action-done {
        background-color: #55aa57;
    }
    .assc-action-fail {
        background-color: #b84947;
    }
    .assc-action-pend {
        background-color: #e7c418;
    }
    .assc-action-ready {
        background-color: #b6b5b5;
    }
    .info {
        background-color: #D6EAF8;
        color: #263A48;
    }
    .check-pass, .check-done {
        background-color: #dff0d8;
        color: #3c763d;
    }
    .check-warn, .check-pend {
        background-color: #fcf8e3;
        color: #8a6d3b;
    }
    .check-fail {
        background-color: #f2dede;
        color: #a94442;
    }
    .check-error {
        background-color: #fbdcbd;
        color: #b75c00;
    }
    .check-ignore {
        display: none;
    }
    .center-element {
        text-align: center;
    }
    .opacity-transition {
        -webkit-transition: opacity 0.5s;
        transition: opacity 0.5s;
    }
    .title-image-hover, .title-image-hover:visited, .title-image-hover:active {
        text-decoration: none;
        opacity: 0.7;
    }
    .title-image-hover:hover, .title-image-hover:focus {
        text-decoration: none;
        opacity: 1.0;
    }
    .title-hover, .title-hover:visited, .title-hover:active {
        color: inherit;
    }
    .title-hover:hover, .title-hover:focus{
        text-decoration: none;
        color: #000;
    }
    .top-level-list {
        padding: 0px;
    }
    .no-border {
        border: none;
    }
    li {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    dl {
        margin-bottom: 0px;
    }
    dd {
        margin-left: 20px;
        margin-bottom: 5px;
    }
    </style>
</head>
<body>
<div>
    <div width="100%" height="70" style="background:#143c53;">
        <table width="100%">
            <tr>
                <td width="400" style="padding-left:2pt;white-space:nowrap;">
                    <a href={{context + base_path + 'view/' + env}}>
                        <img src="https://github.com/dbmi-bgm/cgap-pipeline/raw/master/docs/images/cgap_logo.png" width="130" />
                    </a>
                </td>
                <td align="center" style="white-space:nowrap;">
                        <span style="font-family:arial;font-size:18pt;color:white;">
                            {% if stage == 'dev' %}<span style="color:lightyellow;">&#x7523;</span>{% endif %}
                            {{main_title}}
                            {% if stage == 'dev' %}<span style="color:lightyellow;">&#x7523;</span>{% endif %}
                        </span>
                </td>
                <td width="400" style="padding-right:10pt;white-space:nowrap;color:#D6EAF8;" align="right">
                    <small title="Page loaded time.">{{load_time}}</small>
                    {% if not is_running_locally and is_admin %}
                        &nbsp;<b>|</b>&nbsp; <span style="cursor:pointer;color:#D6EAF8;" onclick="delete_login_cookies();location.reload();">LOGOUT</span>
                    {% endif %}
                </td>
            </tr>
        </table>
        <table width="100%">
                <tr style="background:{% if stage == 'dev' %}#AED6F1{% else %}#c0c0c0;{% endif %}">
                <td width="400" style="padding-left:10pt;padding-top:3pt;padding-bottom:3pt;white-space:nowrap;">
                        {% if request.path.endswith('/view/info') %}
                            <a href="{{context + base_path + 'view/' + env}}" style="text-decoration:none;">HOME</a> &nbsp;<b>|</b>&nbsp;
                            <a href="{{context + base_path + 'view/info'}}" style="text-decoration:none;color:#263A48;"><b>INFO</b></a>
                        {% elif request.path.endswith('/view/{environ}') %}
                            <a href="{{context + base_path + 'view/' + env}}" style="text-decoration:none;color:#263A48;"><b>HOME</b></a> &nbsp;<b>|</b>&nbsp;
                            <a href="{{context + base_path + 'view/info'}}" style="text-decoration:none;">INFO</a>
                        {% else %}
                            <a href="{{context + base_path + 'view/' + env}}" style="text-decoration:none;">HOME</a> &nbsp;<b>|</b>&nbsp;
                            <a href="{{context + base_path + 'view/info'}}" style="text-decoration:none;">INFO</a>
                        {% endif %}
                </td>
                <td align="center" style="white-space:nowrap;">
                    <a target="_blank" href="https://pypi.org/project/foursight-cgap/{{version}}/"><b title="Version of: foursight-cgap" style="text-decoration:none;color:#263A48;">{{version}}</b></a>
                </td>
                <td width="400" style="padding-right:10pt;padding-top:2pt;padding-bottom:1pt;white-space:nowrap;" align="right">
                    STAGE:
                    {% if stage == 'prod' %}
                        <b title="Deployment stage: PROD!" style="color:red;">PROD</b> &nbsp;<b>|</b>&nbsp;
                    {% elif stage == 'dev' %}
                        <b title="Deployment stage: DEV" style="color:red;">DEV</b> &nbsp;<b>|</b>&nbsp;
                    {% else %}
                        <b title="Deployment stage: {{stage}}">{{stage}}</b> &nbsp;<b>|</b>&nbsp;
                    {% endif %}
                    {% if is_admin %}
                        {% if logged_in_as %}
                            <b style="color:darkblue;" title="Logged in as.">{{logged_in_as}}</b>
                        {% else %}
                            LOGIN: <b style="color:darkblue;">admin</b>
                        {% endif %}
                    {% else %}
                        <span style="cursor:pointer;font-weight:bold;color:darkred;" title="Not logged in. Click to login." onclick="create_redir_cookie(); lock.show();">LOGIN</span>
                    {% endif %}
                </td>
            </tr>
            {% if running_checks != '0' or queued_checks != '0' %}
                <table width="100%">
                    <tr style="background:#F9E79F;">
                        <td style="padding-right:8pt;padding-top:2pt;padding-bottom:2pt;white-space:nowrap;" align="right">
                            running: <b>{{running_checks}}</b> &nbsp;<b>|</b>&nbsp;
                            queued: <b>{{queued_checks}}</b>
                        </td>
                    </tr>
                </table>
            {% endif %}
        </table>
    </div>
    {% if not is_admin %}
        <div class="container">
            <div class="boxstyle check-warn" style="margin:20pt;padding:10pt;">
                Not logged in. Click <u style="cursor:pointer" onclick="create_redir_cookie(); lock.show();"><b>here</b></u> to <span style="cursor:pointer" onclick="create_redir_cookie(); lock.show();">login</span>.
            </div>
        </div>
    {% else %}
        <div class="container">
            <div id="content">{% block content %}{% endblock %}</div>
        </div>
    {% endif %}
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.auth0.com/js/lock/10.24.1/lock.min.js"></script>
<script type="text/javascript">
      // set cookie containing the location we were at when we tried to Login
      // this cookie is re-loaded at /callback and parsed for the url, which
      // it redirects to upon finishing authentication
      function create_redir_cookie() {
        var expr = new Date();
        expr.setFullYear(expr.getFullYear() + 1);
        document.cookie = "redir=" + window.location.href + "; path=/; expires=" + expr.toUTCString();
      }
</script>
<script type="text/javascript">
        var domain = "{{domain}}";
        var context = "{{context}}";
        var lock = new Auth0Lock('DPxEwsZRnKDpk0VfVAxrStRKukN14ILB', 'hms-dbmi.auth0.com', {
            auth: {
                redirectUrl: 'https://' + domain + context + 'callback/',
                responseType: 'code',
                sso: false,
                params: {scope: 'openid email', prompt: 'select_account'}
            },
            socialButtonStyle: 'big',
            languageDictionary: { title: "Log in" },
            theme: { logo: "{{favicon}}" },
            allowedConnections: ['github', 'google-oauth2']
        });
</script>
<script type="text/javascript">
        function collapse_group(e, id){
            // Do not trigger collapse if click is on or a child of a check-result
            var isCheck = $(e.target).hasClass("check-result")
            var parents = $(e.target).parents(".check-result");
            if(!isCheck && parents.length === 0){
                $('#' + id).collapse('toggle');
            }
        }
</script>
<script type="text/javascript">
        function confirm_action(uuid, message){
            var actionMessage = document.getElementById("action-message-" + uuid);
            actionMessage.innerHTML = '<pre class="commonstyle"><code>' + message + '</code></pre>';
            var actionButton = document.getElementById("action-" + uuid);
            actionButton.classList.remove('btn-warning');
            actionButton.classList.add('btn-danger');
            actionButton.onclick = null;
            actionButton.disabled = true;
            setTimeout(function(){
                actionButton.disabled = false;
                actionButton.type = "submit";
            },1000);
        }
</script>
<script>
        // Toggle opacity of a check result summary when the anchor to open/close result is used
        $(document).ready(function() {
            $('.title-hover').click(function(){
                var anchorId = $(this).attr("id");
                var variablePart = anchorId.replace("toggle-","");
                var summaryEle = $('#summary-'+variablePart);
                if (summaryEle.css('opacity') == 0){
                    summaryEle.css({ opacity: 1 });
                }else{
                    summaryEle.css({ opacity: 0 });
                }
            });
        });
</script>
<script>
    function copy_to_clipboard(id) {
        var r = document.createRange();
        r.selectNode(document.getElementById(id));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(r);
        document.execCommand('copy');
        window.getSelection().removeAllRanges();
    }
    function delete_login_cookies() {
        document.cookie = "jwtToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=" + location.hostname + ";";
    }
</script>
{% block script %}{% endblock %}
</body>
</html>
