<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>{{ slug }}</title>
    <meta name="description" content="Institute for Data Processing and Electronics">
    <meta name="author" content="Nicholas Tan Jerome">
    <link rel="stylesheet" href="{{ static_url("css/jquery-ui.min.css") }}">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ static_url("css/style.css") }}">

    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
</head>

<body>
    <div id="header">
        <div id="header-text">
            Data repository
        </div>
        <div id="header-icon">
        <div>
            <a href="https://ufo.kit.edu/dis/index.php/project/astor/" target="_blank">
                <img src="{{ static_url("img/icon/astor.svg") }}" height="50px" width="auto"/>
            </a>
        </div>
        <div>
            <a href="https://ufo.kit.edu/dis/index.php/project/nova/" target="_blank">
                <img src="{{ static_url("img/icon/nova3.svg") }}" style="padding:6px" height="50px" width="auto"/>
            </a>
        </div>
        </div>
    </div>
    <div class="clearfix"></div>

    <hr>

<div class="container-fluid">
      <div class="row">
        <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
          <ul class="nav nav-pills flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Reports</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Analytics</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Export</a>
            </li>
          </ul>

          <ul class="nav nav-pills flex-column">
            <li class="nav-item">
              <a class="nav-link" href="#">Nav item</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Nav item again</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">One more nav</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Another nav item</a>
            </li>
          </ul>

          <ul class="nav nav-pills flex-column">
            <li class="nav-item">
              <a class="nav-link" href="#">Nav item again</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">One more nav</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Another nav item</a>
            </li>
          </ul>
        </nav>

        <main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main">
          <h1>Dashboard</h1>

          <section class="row text-center placeholders">
            <div class="col-6 col-sm-3 placeholder">
              <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <div class="text-muted">Something else</div>
            </div>
            <div class="col-6 col-sm-3 placeholder">
              <img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-6 col-sm-3 placeholder">
              <img src="data:image/gif;base64,R0lGODlhAQABAIABAAJ12AAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-6 col-sm-3 placeholder">
              <img src="data:image/gif;base64,R0lGODlhAQABAIABAADcgwAAACwAAAAAAQABAAACAkQBADs=" width="200" height="200" class="img-fluid rounded-circle" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
          </section>

          <h2>Section title</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1,001</td>
                  <td>Lorem</td>
                  <td>ipsum</td>
                  <td>dolor</td>
                  <td>sit</td>
                </tr>
                <tr>
                  <td>1,002</td>
                  <td>amet</td>
                  <td>consectetur</td>
                  <td>adipiscing</td>
                  <td>elit</td>
                </tr>
                <tr>
                  <td>1,003</td>
                  <td>Integer</td>
                  <td>nec</td>
                  <td>odio</td>
                  <td>Praesent</td>
                </tr>
                <tr>
                  <td>1,003</td>
                  <td>libero</td>
                  <td>Sed</td>
                  <td>cursus</td>
                  <td>ante</td>
                </tr>
                <tr>
                  <td>1,004</td>
                  <td>dapibus</td>
                  <td>diam</td>
                  <td>Sed</td>
                  <td>nisi</td>
                </tr>
                <tr>
                  <td>1,005</td>
                  <td>Nulla</td>
                  <td>quis</td>
                  <td>sem</td>
                  <td>at</td>
                </tr>
                <tr>
                  <td>1,006</td>
                  <td>nibh</td>
                  <td>elementum</td>
                  <td>imperdiet</td>
                  <td>Duis</td>
                </tr>
                <tr>
                  <td>1,007</td>
                  <td>sagittis</td>
                  <td>ipsum</td>
                  <td>Praesent</td>
                  <td>mauris</td>
                </tr>
                <tr>
                  <td>1,008</td>
                  <td>Fusce</td>
                  <td>nec</td>
                  <td>tellus</td>
                  <td>sed</td>
                </tr>
                <tr>
                  <td>1,009</td>
                  <td>augue</td>
                  <td>semper</td>
                  <td>porta</td>
                  <td>Mauris</td>
                </tr>
                <tr>
                  <td>1,010</td>
                  <td>massa</td>
                  <td>Vestibulum</td>
                  <td>lacinia</td>
                  <td>arcu</td>
                </tr>
                <tr>
                  <td>1,011</td>
                  <td>eget</td>
                  <td>nulla</td>
                  <td>Class</td>
                  <td>aptent</td>
                </tr>
                <tr>
                  <td>1,012</td>
                  <td>taciti</td>
                  <td>sociosqu</td>
                  <td>ad</td>
                  <td>litora</td>
                </tr>
                <tr>
                  <td>1,013</td>
                  <td>torquent</td>
                  <td>per</td>
                  <td>conubia</td>
                  <td>nostra</td>
                </tr>
                <tr>
                  <td>1,014</td>
                  <td>per</td>
                  <td>inceptos</td>
                  <td>himenaeos</td>
                  <td>Curabitur</td>
                </tr>
                <tr>
                  <td>1,015</td>
                  <td>sodales</td>
                  <td>ligula</td>
                  <td>in</td>
                  <td>libero</td>
                </tr>
              </tbody>
            </table>
          </div>
        </main>
      </div>
    </div>

   <!-- 
    <div id="title">
        <p>{{ title }}</p>
    </div>
    
    <div id="authors">
        <p>
            {% for author in authors %}
            {{ author }}, 
            {% end %}
        </p>
    </div>

    <div id="institute">
        <p>
            {% for institute in institutes %}
            {{ institute }}, 
            {% end %}
        </p>
    </div>

        
    <div id="subheader">
        <span>Sample:</span> 
        <select class="target">
            {% for sample in data_list %}
            {% if sample[1]  == name %}
            <option value={{ sample[0] }} selected>{{ sample[1] }}</option> 
            {% else %}
            <option value={{ sample[0] }}>{{ sample[1] }}</option> 
            {% end %}
            {% end %}
        </select>
        <img class="icon" id="download" src="{{ static_url("img/icon/download.svg") }}"/>
        <span id="size">({{ data_size }} GB)</span>
    </div>
    -->

    <!--
    <div id="image-container" class="clearfix">
        <div id="img-left">
            <div class="cont">
	            <span id="image-text">Overview (Volume Rendering)</span>
            </div>
	        <div class="photowrapper">
                <img id="img-preview" width="100%" height="100%" src="img?id={{ index }}&name={{ name }}&type=preview&counter=0"/>
            <div id="text-desc">
            <p id="description"><span>Description</span>
                {% for text_desc in desc %}
                    {% if text_desc['type'] == "i" %}
                        <i>{{ text_desc['text'] }}</i>
                    {% else %}
                        {{ text_desc['text'] }}
                    {% end %}
                {% end %}
                
            </p>
            </div>
            </div>
        </div>

        <div id="img-right">
	        <div id="photowrapper-front" class="photowrapper">
                <div class="cont">
                    <img id="front-left" class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
                    <span id="image-text">Front: <span id="front-text">1</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="front-quality-text"></span></span>
                    <img id="front-right" class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
                </div>
                <img id="img-front" width="100%" height="100%" src="img?id={{ index }}&name={{ name }}&type=front-resized&counter=0"/>
                <div id="slider-right"></div><div class="slice-count" id="front-count">{{ front_count }}</div>
            </div>
        </div>
        
        <div id="img-center">
	        <div id="photowrapper-top" class="photowrapper">
                <div class="cont">
                    <img id="top-left" class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
                    <span id="image-text">Top: <span id="top-text">1</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="top-quality-text"></span></span>
                    <img id="top-right" class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
                </div>
                <img id="img-top"  width="100%" height="100%" src="img?id={{ index }}&name={{ name }}&type=top-resized&counter=0" data-zoom-image="img?id={{ index }}&name={{ name }}&type=top-resized&counter=0" />
	            <div id="slider-center"></div><div class="slice-count" id="top-count">{{ top_count }}</div>
            </div>

	        <div id="photowrapper-left" class="photowrapper">
                <div class="cont">
                    <img id="left-left" class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
                    <span id="image-text">Left: <span id="left-text">1</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="left-quality-text"></span></span>
                    <img id="left-right" class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
                </div>
                <img id="placeholder-left" width="100%" height="100%" src="img?id={{ index }}&name={{ name }}&type=left-resized&counter=0"/>
	            <div id="slider-left"></div><div class="slice-count" id="left-count">{{ left_count }}</div>
            </div>

        </div>
    </div>
    -->
    <hr>

    <div id="footer">&copy;2017 A service provided by Ultra-fast Online Processing for Data-intensive Sciences group (<a href="https://ufo.kit.edu/" target="_blank">UFO</a>)</div>
<script src="{{ static_url("js/jquery-1.12.4.min.js") }}"></script>
<script src="{{ static_url("js/jquery-ui.min.js") }}"></script>
<script src="{{ static_url("js/jquery.ez-plus.js") }}"></script>
<script src="{{ static_url("js/jquery.fullscreenslides.js") }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="{{ static_url("js/script.js") }}"></script>
</body>
</html>

