<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
    body {
      padding-top: 0px;
    }
    .starter-template {
      padding: 40px 15px;
      text-align: center;
    }
    </style>
  </head>

  <body>

    <div class="container">

      <div class="starter-template">
          <h1>{{meta.title}}</h1>
          <p class="lead">{{ meta.lead }}</p>
      </div>

      {% for elem in d %}
        
      {% if elem.type == 'h1' %}
      <h1>{{elem.text}}</h1>
      {% elif elem.type == 'h2' %}
      <h2>{{elem.text}}</h2>
      {% elif elem.type == 'p' %}
      <p>{{elem.text}}</p>
      {% elif elem.type == 'img' %}
      <a href="#" class="thumbnail">
        <img src="data:image/png;base64,{{elem.data}}" alt="Embedded Image">
      </a>
      {% elif elem.type == 'code' %}
      <p>formated as {{elem.format}}<p>
      <pre>{{ elem.text }}</pre>
      
      {% elif elem.type == 'table' %}
        {% if elem.format == 'pd.frame' %}
      {{elem.data|pdframetotable}}
        {% endif %}
      
      
      
      {% elif elem.type == 'title' %}
      {% else %}
      <h1> NOT FOUND type : {{elem.type}}</h1>
      {% endif %}
      {% endfor %}
    </div><!-- /.container -->

      <pre>{{ djson }}</pre>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


  </body>
</html>
