<!DOCTYPE html>
<html lang="en" style="height: 100%!important;">
<!--<html lang="en">-->
<head>
    <link rel="stylesheet" href="/static/jstree/dist/themes/default/style.min.css"/>
    <link rel="stylesheet" href="/static/bootstrap-4.0.0a5.css"/>
    <link rel="stylesheet" href="/static/mainstyle.css"/>
</head>
<body>

<!-- Here starts shared code between BaaS and Jupyter embedded template. -->

<div id="treeanddetails">
    <div id="treediv"></div>
    <div id="details">
        <input class="form-control form-control" type="text" id="search_box"
               placeholder="Search here..."/>
        <img id="search_spinner" src="/static/images/spin.svg">
        <form id="datanodedetails" class="blockform">
                <legend>Data node details</legend>
                <ul>
                    Type: <span id="nodetype"></span>

                    <span class="clinicaldata" hidden>
                        <br>File: <span id="filename"></span>(<span id="columnnumber"></span>)
                    </span>

                    <span class="dfv" hidden>
                        <br>Datafile Value: <span id="datafile_value"></span>
                    </span>
                </ul>

                <table width="100%">
                    <tr class="label">
                        <td style="padding-right: 45px;"> Label</td>
                        <td width="90%"><input style="width:inherit;"
                                               class="form-control form-control-sm" type="text"
                                               id="datalabel"/></td>
                    </tr>
                    <tr hidden class="clinicaldata">
                        <td>DLS</td>
                        <td width="90%"><input style="width:inherit;"
                                               class="form-control form-control-sm" type="text"
                                               id="magic5"/></td>
                    </tr>
                    <tr hidden class="clinicaldata">
                        <td>CVCD</td>
                        <td width="90%"><input style="width:inherit;"
                                               class="form-control form-control-sm" type="text"
                                               id="magic6"/></td>
                    </tr>
                    <tr hidden class="clinicaldata">
                        <td><input style="width:inherit;position:relative;float:right;margin-right:5px;"
                                   class="form-control form-control-sm" type="checkbox"
                                   id="fc"/></td>
                        <td>Force Categorical</td>

                    </tr>
                </table>

                <div hidden id="tagbox" class="tag-container"  >
                        <table id="tagtable" class="table-condensed table-striped" width=99%" >
                            <colgroup>
                                <col span="1" style="width: 80%;">
                                <col span="1" style="width: 19%;">
                            </colgroup>
                            <tbody id="tagtable-body"></tbody>
                        </table>
                </div>
            <input type="submit" class="btn btn-secondary" value="Apply changes"
                   style="margin: 15px 0px 0px 5px;"/>
            <span style="float: center; padding-right: 5px;" id="feedback"></span>

            <div hidden id="hdtagbox" class="hdtagdata table-striped">
                <table id="hdtagtable" width="95%">
                    <colgroup>
                        <col span="1" style="width: 100px;">
                        <col span="1" style="width: calc(95% - 100px);">
                    </colgroup>
                    <tbody id="hdtagtable-body">
                        <tr><td colspan="2"><b>Node information</b></td></tr>
                        <tr><td>datatype:</td><td id="hd_type"></td></tr>
                        <tr><td>tissue type:</td><td id="hd_tissue"></td></tr>
                        <tr><td>sample type:</td><td id="hd_sample"></td></tr>
                        <tr><td colspan="2"><b>Platform information</b></td></tr>
                        <tr><td>title:</td><td id="pl_title"></td></tr>
                        <tr><td>marker type:</td><td id="pl_marker_type"></td></tr>
                        <tr><td>genome build:</td><td id="pl_genome_build"></td></tr>
                        <tr><td>platform ID:</td><td id="pl_id"></td></tr>
                    </tbody>
                </table>
            </div>

        </form>

        <!-- End of shared code. -->

        <div id="bottom-btns">
            <button type="button" class="btn btn-sm btn-success"
                    style="float: right; margin-right: 10px;" id="embeded_return">Return to Jupyter
            </button>
            <br><span id="feedbacksave"></span>
        </div>
    </div>
</div>

<script type="application/javascript">
    var treeData = {{ json | safe }};
    var shutdown_url = "{{ url_for('shutdown', treefile=treefile) }}";

</script>

<script src="/static/jquery-1.11.1.js"></script>
<script src="/static/jstree/dist/jstree.min.js"></script>
<script src="/static/tree.js"></script>
