<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Data Repository</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="{{ static_url("vendor/bootstrap/css/bootstrap.css") }}">

    <!-- MetisMenu CSS -->
    <link rel="stylesheet" href="{{ static_url("vendor/metisMenu/metisMenu.min.css") }}">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ static_url("dist/css/sb-admin-2.css") }}">

    <!-- Custom Fonts -->
    <link rel="stylesheet" href="{{ static_url("vendor/font-awesome/css/font-awesome.min.css") }}">
    
    <link rel="stylesheet" href="{{ static_url("vendor/jquery/jquery-ui.css") }}">
    

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
    <!--
    <div class="floatingdiv">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                            <span id="magnify-type">Front:</span> 
                            <span id="magnify-current-number">1</span> / <span id="magnify-total-number">1</span>
                            Magnification&nbsp;factor:&nbsp;2
                </div>
                <div id="demo-container" class="panel-body">
                </div>
            </div>
        </div>
    </div>
    -->
    <div class="floatingdiv">
        <div id="demo-container"></div>
    </div>
    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
            
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="https://www.kit.edu/english/index.php" target="_blank"><img id="kit-logo" src="{{ static_url("dist/img/icon/kit2.svg") }}" height="55px"></a><a href="https://www.kit.edu/english/index.php" target="_blank" class="navbar-brand">Parasitoid biology preserved in mineralized fossils</a></img>
            </div>
            <!-- /.navbar-header -->

            <ul class="nav navbar-top-links navbar-right" id="nova">
                <li class="dropdown">
                    <a href="https://ufo.kit.edu/dis/index.php/project/nova/" target="_blank" style="min-height:75px; padding: 18px;">
                        <img src="{{ static_url("dist/img/icon/nova.svg") }}" height="24px" width="auto">
                    </a>
                </li>
                <!-- /.dropdown -->
            </ul>
            <ul class="nav navbar-top-links navbar-right" id="astor">
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a href="https://ufo.kit.edu/dis/index.php/project/astor/" target="_blank" style="min-height:75px;">
                        <img src="{{ static_url("dist/img/icon/astor2.svg") }}" height="32px" width="auto">
                    </a>
                </li>
            </ul>
            
            <ul class="nav navbar-top-links navbar-right" id="astor">
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a href="https://biomedisa.de/" target="_blank" style="min-height:75px;">
                        <img src="{{ static_url("dist/img/icon/biomedisa_logo_alpha.png") }}" height="32px" width="auto">
                    </a>
                </li>
            </ul>
                <!-- /.dropdown -->
            <!-- /.navbar-top-links -->

            <div id="side-ntj" class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">
                        <li>
                            <a id="overviewBtn" href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Overview<span class="fa arrow"></span></a>
                            <ul  id="fossil-overview" class="nav nav-second-level">
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <th scope="row"> </th>
                                            <td><strong>Related publication</strong></td>
                                            <td>van de Kamp, T., Schwermann, A.H., dos Santos Rolo, T., Lösel, P.D., Engler, T., Etter, W., Faragó, T., Göttlicher, J., Heuveline, V., Kopmann, A., Mähler, B., Mörs, T., Odar, J., Rust, J., Tan Jerome, N., Vogelgesang, M, Baumbach, T. & Krogmann, L. (2018). Parasitoid biology preserved in mineralized fossils. Nature Communications 9: 3325, DOI: 10.1038/s41467-018-05654-y. <a href="https://www.nature.com/articles/s41467-018-05654-y">Link</a></td>
                                        </tr>
                                        <tr>
                                            <th scope="row"> </th>
                                            <td><strong>Data Info</strong></td>
                                            <td>55 synchrotron µCT volumes of mineralized fly pupae with parasitation events.  See method section of related publication for more details</td>
                                        </tr>
                                        <tr>
                                            <th scope="row"> </th>
                                            <td><strong>Instructions</strong></td>
                                            <td>
						<ul class="fa-ul">
						  <li><i class="fa-li fa fa-circle"></i>Please click on the <strong><i class="fa fa-sitemap fa-fw"></i> Data</strong> and choose a data set.</li>
						  <li><i class="fa-li fa fa-circle"></i>Use mouse to hover over images for full size view (hover mode: on/off).</li>
						  <li><i class="fa-li fa fa-circle"></i>Click on <i class="fa fa-arrows-alt fa-fw"></i> to switch to full screen mode.</li>
						</ul>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li class="sidebar-search" id="filter-dropdown">
                            <div>
                                <select id="filterType" class="form-control input-sm">
                                    <option value="0">all specimens</option>
                                    <option value="Coptera anka"><i>Coptera anka</i></option>
                                    <option value="Palaeortona quercyensis"><i>Palaeortona quercyensis</i></option>
                                    <option value="Xenomorphia handschini"><i>Xenomorphia handschini</i></option>
                                    <option value="Xenomorphia resurrecta"><i>Xenomorphia resurrecta</i></option>
                                    <option value="unknown">unknown</option>
                                </select>
                            </div>
     <!--                       <div class="input-group custom-search-form">
                                <input type="text" class="form-control" placeholder="Search...">
                                <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                            </div>-->
                            <!-- /input-group -->
                        </li>
                        <li>
                            <ul id="pagination-demo" class="pagination-sm" style="margin-left: 10px;"></ul> 
                        </li>
                        <li>
                            <a href="#" id="dataBtn"><i class="fa fa-sitemap fa-fw"></i> Data<span class="fa arrow"></span></a>
                            <ul id="sidebar-list" class="nav nav-second-level collapse" aria-expanded="false">
                                {% for sample in data_list %}
                                <li>
                                <a class="data-pil" data-dim="{{[sample[3],sample[4],sample[5],sample[7],sample[8],sample[9]]}}" href="#">{{ sample[0] }} 
                                    {% for text_desc in sample[1] %}
                                        {% if text_desc['type'] == "holo" %}
                                            <span class="label label-danger">HOLOTYPE</span>
                                        {% end %}
                                    {% end %}
                                    <span class="fa arrow"></span></a>
                                    <ul class="nav nav-third-level">
                                        <table class="table">
                                            <tbody>
                                                <tr>
                                                    <th scope="row"> </th>
                                                    <td width="150"><strong>Photograph of fossil</strong></td>
                                                    <td><img width="100%" src="img?name={{sample[0]}}&type=photo"/></td>
                                                </tr>
                                                <tr>
                                                    <th scope="row"> </th>
                                                    <td width="150"><strong>Volume rendering of internal voids</strong></td>
                                                    <td><img width="100%" src="img?name={{sample[0]}}&type=volren"/></td>
                                                </tr>
                                                <tr>
                                                    <th scope="row"> </th>
                                                    <td width="150"><strong>Description</strong></td>
                                                    <td>
                                                        {% for text_desc in sample[1] %}
                                                            {% if text_desc['type'] == "i" %}
                                                                <i>{{ text_desc['text'] }}</i>
                                                            {% end %}
                                                            {% if text_desc['type'] == "holo" %}
                                                                <span>{{ text_desc['text'] }}</span>
                                                            {% end %}
                                                            {% if text_desc['type'] == "p" %}
                                                                {{ text_desc['text'] }}
                                                            {% end %}
                                                        {% end %}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th scope="row"> </th>
                                                    <td width="150"><strong>Collection</strong></td>
                                                    <td>{{ sample[2] }} GB</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row"> </th>
                                                    <td width="150"><strong>Size of dataset</strong></td>
                                                    <td>{{ sample[2] }} GB</td>
                                                </tr>
                                                <tr>
                                                    <th scope="row"> </th>
                                                    <td width="150"></td>
                                                    <td>
                                                        <button class="download" data-name="{{ sample[0] }}" type="button" class="btn btn-default btn-sm">
                                                            <span class="glyphicon glyphicon-download"></span> Download
                                                        </button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </ul>
                                </li>
                                {% end %}
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                    </ul>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->
        </nav>

        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h1 id="header-name" class="page-header">NMB F2543&nbsp;&nbsp;&nbsp;&nbsp;<i>Xenomorphia handschini</i></h1>
                    <div>
    			<label for="hoverMode">Hover mode</label>
    			<input type="checkbox" id="hoverMode" name="hover" value="mode" checked>
  		    </div>
                    <!--
                    <div id="info-general" class="alert alert-info" role="alert">
                        <i class="fa fa-info-circle fa-fw"></i> Please click on the <strong><i class="fa fa-sitemap fa-fw"></i> Data</strong> and choose a data set.
                    </div>
                    -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <!--
            <div class="row">
                            <div class="col-xs-3">
                               Filter: 
                                <select id="filterType" class="form-control input-sm">
                                    <option value="0">all specimens</option>
                                    <option value="Coptera anka"><i>Coptera anka</i></option>
                                    <option value="Palaeortona quercyensis"><i>Palaeortona quercyensis</i></option>
                                    <option value="Xenomorphia handschini"><i>Xenomorphia handschini</i></option>
                                    <option value="Xenomorphia resurrecta"><i>Xenomorphia resurrecta</i></option>
                                    <option value="unknown">unknown</option>
                                </select>
                            </div>
            </div>
            -->
            <div class="row">
                <div class="col-lg-6">
                    <div id="photowrapper-front" class="panel panel-default">
                        <div class="panel-heading">
                            <i id="frontFS" class="fa fa-arrows-alt fa-fw"></i> Front: 
                                <button id="front-down-counter" class="btn btn-default btn-xs" type="button"><i class="fa fa-caret-down"></i></button>
                                <input type="text" id="front-current-number" value="1553" size="4"> / <span id="front-number">3107</span>
                                <button id="front-up-counter" class="btn btn-default btn-xs" type="button"><i class="fa fa-caret-up"></i></button>    
                            Magnification&nbsp;factor:&nbsp;<span id="front-magnify" ori="1161.00" screen="0.00">0.32</span>
                            <!--
                            <div class="pull-right">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default btn-xs">
                                        Buffer
                                    </button>
                                </div>
                            </div>
                            -->
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <!--<img id="img-front" width="100%" data-zoom-image="" src=""/>--> 
                            <img id="img-front" width="100%" data-zoom-image="img?name={{data_list[0][0]}}&type=front&counter=1553" src="img?name={{data_list[0][0]}}&type=front&counter=1553"/> 
                            <!--<div class="progress">
                                <div id="progress-top" class="progress-bar" role="progressbar" aria-valuenow="0"
                                    aria-valuemin="0" aria-valuemax="100" style="width:0%">
                                </div>
                            </div>-->
                            <div style="margin: 5px 0;"><span class="info-text"></span></div>
                            <div id="slider-front"></div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    <div id="photowrapper-top" class="panel panel-default">
                        <div class="panel-heading">
                            <i id="topFS" class="fa fa-arrows-alt fa-fw"></i> Top: 
                                <button id="top-down-counter" class="btn btn-default btn-xs" type="button"><i class="fa fa-caret-down"></i></button>
                               <!--<input type="text" id="top-current-number" value="1" size="4">  / <span id="top-number">{{ data_list[0][4] }}</span>-->
                               <input type="text" id="top-current-number" value="645" size="4">  / <span id="top-number">1291</span>
                                <button id="top-up-counter" class="btn btn-default btn-xs" type="button"><i class="fa fa-caret-up"></i></button>    
                            Magnification&nbsp;factor:&nbsp;<span id="top-magnify" ori="3107.0" screen="0.00">0.12</span>
                            <!--
                            <div class="pull-right">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default btn-xs">
                                        Buffer
                                    </button>
                                </div>
                            </div>
                            -->
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <!--<img id="img-top" width="100%" data-zoom-image="" src=""/>--> 
                            <img id="img-top" width="100%" data-zoom-image="img?name={{data_list[0][0]}}&type=top&counter=645" src="img?name={{data_list[0][0]}}&type=top&counter=645"/>
                            <!--<div class="progress">
                                <div id="progress-top" class="progress-bar" role="progressbar" aria-valuenow="0"
                                    aria-valuemin="0" aria-valuemax="100" style="width:0%">
                                </div>
                            </div>-->
                            <div style="margin: 5px 0;"><span class="info-text"></span></div>
                            <div id="slider-top"></div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    <div id="photowrapper-left" class="panel panel-default">
                        <div class="panel-heading">
                            <i id="leftFS" class="fa fa-arrows-alt fa-fw"></i> Left: 
                                <button id="left-down-counter" class="btn btn-default btn-xs" type="button"><i class="fa fa-caret-down"></i></button>
                               <!--<input type="text" id="left-current-number" value="1" size="4">  / <span id="left-number">{{ data_list[0][3] }}</span>-->
                               <input type="text" id="left-current-number" value="580" size="4">  / <span id="left-number">1161</span>
                                <button id="left-up-counter" class="btn btn-default btn-xs" type="button"><i class="fa fa-caret-up"></i></button>    
                            Magnification&nbsp;factor:&nbsp;<span id="left-magnify" ori="3107.0" screen="0.00">0.12</span>
                            <!--
                            <div class="pull-right">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default btn-xs">
                                        Buffer
                                    </button>
                                </div>
                            </div>
                            -->
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <!--<img id="img-left" width="100%" data-zoom-image="" src=""/>--> 
                            <img id="img-left" width="100%" data-zoom-image="img?name={{data_list[0][0]}}&type=left&counter=580" src="img?name={{data_list[0][0]}}&type=left&counter=580"/>
                            <!--<div class="progress">
                                <div id="progress-top" class="progress-bar" role="progressbar" aria-valuenow="0"
                                    aria-valuemin="0" aria-valuemax="100" style="width:0%">
                                </div>
                            </div>-->
                            <div style="margin: 5px 0;"><span class="info-text"></span></div>
                            <div id="slider-left"></div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-6 -->
                
                
            </div>
            <!-- /.row -->
        </div>
        <!-- /#page-wrapper -->
    </div>


    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="{{ static_url("vendor/jquery/jquery.min.js") }}"></script>
    <script src="{{ static_url("vendor/jquery/jquery-ui.js") }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
    <script src="{{ static_url("vendor/bootstrap/js/bootstrap.min.js") }}"></script>
    <script src="{{ static_url("vendor/metisMenu/metisMenu.min.js") }}"></script>
    <script src="{{ static_url("vendor/metisMenu/metisMenu.min.js") }}"></script>
    <script src="{{ static_url("vendor/metisMenu/metisMenu.min.js") }}"></script>
    <script src="{{ static_url("dist/js/sb-admin-2.js") }}"></script>
    <script src="{{ static_url("dist/js/jquery.twbsPagination.min.js") }}"></script>
    <script src="{{ static_url("dist/js/jquery.ez-plus.js") }}"></script>
    <script src="{{ static_url("dist/js/script.js") }}"></script>
</body>

</html>
