<!-- 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;
    }
    .dropdown-button {
      background-color: inherit;
      color: inherit;
      border: none;
      cursor: pointer;
    }
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: {% if package == 'foursight' %}#9DE0C5{% else %}#9DC5E0{% endif %};
      min-width: 160px;
      box-shadow: 10px 10px 10px #476f86;
      z-index: 1;
    }
    .dropdown-content a {
      text-align: left;
      color: inherit;
      background-color: inherit;
      padding: 4px 80px 4px 8px;
      text-decoration: none;
      display: block;
    }
    .dropdown-content span {
      text-align: left;
      color: black;
      padding: 4px 80px 4px 8px;
      text-decoration: none;
      display: block;
      cursor: default;
    }
    .dropdown-content a:hover {background-color: #365e75; color:yellow; cursor:pointer;}
    .dropdown-content span:hover {color:blue;}
    .dropdown:hover .dropdown-content {display: block;}
    .dropdown:hover .dropdown-button {color: black;}
    </style>
</head>
<body>
<div>
    <div width="100%" style="background:{% if package == 'foursight' %}#14533c{% else %}#143c53{% endif %};">
        <table height="49" width="100%">
                <tr title="{% if lambda_deployed_time %}App Deployed: {{lambda_deployed_time}}&#013;{% endif %}App Launched: {{init_load_time}}&#013;Page Loaded: {{load_time}}">
                <td width="33%" style="padding-left:2pt;padding-top:3px;padding-bottom:3px;white-space:nowrap;">
                    <a target="_blank" href="{{portal_url}}">
                        {% if package == 'foursight' %}
                            <img style="padding-left:20px" src="https://data.4dnucleome.org//static/img/favicon-fs.ico" height="38" />
                        {% else %}
                            <img src="https://github.com/dbmi-bgm/cgap-pipeline/raw/master/docs/images/cgap_logo.png" width="130" />
                        {% endif %}
                    </a>
                </td>
                <td width="34%" align="center" style="white-space:nowrap;">
                        <span style="font-family:arial;font-size:18pt;color:white;">
                            <span style="color:default;">{{main_title}}</span>
                        </span>
                </td>
                <td width="33%" style="padding-right:10pt;white-space:nowrap;color:{% if package == 'foursight' %}#D6F8EA{% else %}#D6EAF8{% endif %};" align="right">
                    <span>{{load_time}}</span>
                    {% if is_admin %}
                        &nbsp;<b>|</b>&nbsp; <span style="cursor:pointer;color:{% if package == 'foursight' %}#D6F8EA{% else %}#D6EAF8{% endif %};" onclick="delete_login_cookies();location.reload();">LOGOUT</span>
                    {% elif not is_admin %}
                        &nbsp;<b>|</b>&nbsp; <span style="cursor:pointer;font-weight:bold;color:{% if package == 'foursight' %}#D6F8EA{% else %}#D6EAF8{% endif %};" title="Not logged in. Click to login." onclick="create_redir_cookie(); lock.show();">LOGIN</span>
                    {% endif %}
                </td>
            </tr>
        </table>
        <table width="100%">
            <tr style="background:{% if package == 'foursight' %}#AEF1D6{% else %}#AED6F1{% endif %}">
                <td width="49%" style="padding-left:10pt;padding-top:3pt;padding-bottom:3pt;white-space:nowrap;">
                        {% if request.context.path.startswith(context + 'info') %}
                            <a href="{{context + 'view/' + env}}" style="text-decoration:none;">HOME</a> &nbsp;|&nbsp;
                            <a href="{{context + 'users/' + env}}" style="text-decoration:none;">USERS</a> &nbsp;|&nbsp;
                            <a href="{{context + 'info/' + env}}" style="text-decoration:none;color:#263A48;"><b>INFO</b></a>
                        {% elif request.context.path.endswith('/view/' + env) %}
                            <a href="{{context + 'view/' + env}}" style="text-decoration:none;color:#263A48;"><b>HOME</b></a> &nbsp;|&nbsp;
                            <a href="{{context + 'users/' + env}}" style="text-decoration:none;">USERS</a> &nbsp;|&nbsp;
                            <a href="{{context + 'info/' + env}}" style="text-decoration:none;">INFO</a>
                        {% elif request.context.path.startswith(context + 'users') %}
                            <a href="{{context + 'view/' + env}}" style="text-decoration:none;">HOME</a> &nbsp;|&nbsp;
                            <a href="{{context + 'users/' + env}}" style="text-decoration:none;color:#263A48;"><b>USERS</b></a> &nbsp;|&nbsp;
                            <a href="{{context + 'info/' + env}}" style="text-decoration:none;">INFO</a>
                        {% else %}
                            <a href="{{context + 'view/' + env}}" style="text-decoration:none;">HOME</a> &nbsp;|&nbsp;
                            <a href="{{context + 'users/' + env}}" style="text-decoration:none;">USERS</a> &nbsp;|&nbsp;
                            <a href="{{context + 'info/' + env}}" style="text-decoration:none;">INFO</a>
                        {% endif %}
                        &nbsp;|&nbsp; <a target="_blank" title="Open AWS Console for this account ({{aws_account_number}}) in another tab." style="text-decoration:none;" href="https://{{aws_account_number}}.signin.aws.amazon.com/console/">AWS  <span class="fa fa-external-link" style="position:relative;bottom:-1px;font-size:14px;"></span></a>
                </td>
                <td width="2%" align="center" style="white-space:nowrap;">
                        <a target="_blank" href="https://pypi.org/project/{{package}}/{{version}}/"><b title="Version of: {{package}}" style="text-decoration:none;color:#263A48;">{{version}}</b></a>
                </td>
                <td width="49%" style="padding-right:10pt;padding-top:2pt;padding-bottom:1pt;white-space:nowrap;" align="right" nowrap="1">
                    {% if environments|length > 0 %}
                        <span class="dropdown">
                            <b class="dropdown-button" onclick="this.nextSibling.display = 'block';" onmouseover="this.style.display = 'block';" style="color:#143c53" title="Environment: {{env}} ({{env_short}})">{{env}}</b>
                            <span class="dropdown-content">
                                {% for environment in environments %}
                                    {% if environment["name"].upper() == env.upper() or environment["public_name"].upper() == env.upper() or environment["full_name"].upper() == env.upper() or environment["short_name"].upper() == env.upper() or environment["foursight_name"].upper() == env.upper() %}
                                        <span>{{environment["public_name"]}}&nbsp;&nbsp;&#x2713;</span>
                                    {% else %}
                                        <a href="{{request.context.path.replace('/' + env, '/' + environment['public_name'])}}" onclick="this.style.color = 'yellow'; this.style.backgroundColor = '#143c53'; this.style.fontWeight = 'bold';">{{environment["public_name"]}}</a>
                                    {% endif %}
                                {% endfor %}     
                            </span>
                         </span>
                    {% else %}
                        <b style="color:#143c53" title="Environment: {{env}}">{{env}}</b>
                    {% endif %}
                    &nbsp;|&nbsp;
                    {% if stage == 'prod' %}
                        <b title="Deployment stage: PROD!" style="color:red;">{{stage}}</b> &nbsp;|&nbsp;
                    {% elif stage == 'dev' %}
                        <b title="Deployment stage: DEV" style="color:darkgreen;">{{stage}}</b> &nbsp;|&nbsp;
                    {% else %}
                        <b title="Deployment stage: {{stage}}">{{stage}}</b> &nbsp;|&nbsp;
                    {% endif %}
                    {% if is_admin %}
                        {% if logged_in_as["email_address"] %}
                            <a href="{{context + 'users/' + env + '/' + logged_in_as['email_address']}}" style="text-decoration:none;"><b title="Logged in as {{logged_in_as['first_name']}} {{logged_in_as['last_name']}}&#013;{{logged_in_as['email_address']}}" style="color:darkblue;" title="Logged in as.">{{logged_in_as["email_address"]}}</b>
                        {% elif is_running_locally %}
                            <b style="color:darkblue;">local</b>
                        {% else %}
                            <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();">NOT LOGGED IN</span>
                    {% endif %}
                </td>
            </tr>
            <table width="100%">
                <tr style="background:#F9E79F;">
                    <td style="padding-left:8pt;padding-top:2pt;padding-bottom:2pt;white-space:nowrap;color:darkred;" ><i>
                        To try an <b>experimental</b> version of Foursight <b>React</b> click <a href="{{context + 'react/' + env + '/home'}}" style="color:darkred;"><b>here</b></>.
                    </i></td>
                    <td style="padding-right:8pt;padding-top:2pt;padding-bottom:2pt;white-space:nowrap;" align="right">
                        {% if running_checks != '0' or queued_checks != '0' %}
                            running: <b>{{running_checks}}</b> &nbsp;|&nbsp;
                            queued: <b>{{queued_checks}}</b>
                        {% endif %}
                    </td>
                </tr>
            </table>
        </table>
        <!--
        <div style="float:right;font-size:small;margin-right:6pt;margin-top:4pt;padding-left:5pt;padding-right:5pt;padding-top:2pt;padding-bottom:2pt;border:1px solid darkred;border-radius:4pt;color:darkred;background:lightyellow;">
            <a style="color:darkred" href="{{context + 'react/' + env + '/home'}}"><b>Foursight React</b></a>
        </div>
        -->
    </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>.
                {% if user_record["error"] == "noadmin" or user_record["error"] == "nogroups" %}
                    <br /><span style="color:darkred"><b>Warning</b>: The user <b>{{user_record["email"]}}</b> does not have permission for the <b>{{env}}</b> environment.</span>
                {% elif user_record["error"] == "exception"  %}
                    <br /><span style="color:darkred"><b>Warning</b>: A user record for <b>{{user_record["email"]}}</b> was not found for the <b>{{env}}</b> environment.</span>
                {% endif %}
                {% if aws_account_number %}
                    <br />
                    <small> AWS Account: {{aws_account_number}} </small>
                {% endif %}
            </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}}";
        // TODO/dmichaels/2022-08-04: Get this hardcoded value from (for example):
        // http://cgap-supertest-1972715139.us-east-1.elb.amazonaws.com/auth0_config?format=json
        // which returns: { "title": "Auth0 Config", "auth0Client": "DPxEwsZRnKDpk0VfVAxrStRKukN14ILB" }
        // where that base URL is for the portal.
        // var lock = new Auth0Lock('DPxEwsZRnKDpk0VfVAxrStRKukN14ILB', 'hms-dbmi.auth0.com', {
        var redirectUrl = 'https://' + domain + context + 'callback/';
        {% if is_running_locally %}
            redirectUrl = redirectUrl.replace("/api", "")
            redirectUrl = redirectUrl.replace("https://", "http://")
        {% endif %}
        var lock = new Auth0Lock('{{auth0_client_id}}', 'hms-dbmi.auth0.com', {
            auth: {
                redirectUrl: redirectUrl,
                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>
<br /><p /><br />
<center>
<table width="100%">
<tr style="background-color:darkred;height:1px;"><td></td></tr>
<tr><td align="center" style="padding-top:2px;padding-bottom:6px">
<!--<img src="https://hms.harvard.edu/themes/harvardmedical/logo.svg" height="20" />-->
<!--<img src="https://pbs.twimg.com/profile_images/997469790481530881/Da1WaBIn_400x400.jpg" height="20" />-->
<a href="{{portal_url}}" target="_blank">
    <img src="https://www.iscb.org/images/stories/ismb2020/bazaar/logo.HarvardMedical-BiomedicalInformatics.png" height="46"/>
</a>
</td></tr>
<tr style="background-color:darkred;height:1px;"><td></td></tr>
</table>
</center>
<br />
</html>
