{% extends "layout.html" %}

{% block title %}Doc{% endblock %}

{% block top_javascript %}



<script src="{{ url_for('static', filename='js/renderjson.js') }}"></script>

<script type="text/javascript">

$(function() {


  var doc = JSON.parse('{{doc|safe}}');
  $("#title").html("Doc " + doc["host_id"]);
  document.getElementById("doc").appendChild(
    renderjson.set_show_by_default(true)
              .set_show_to_level(1)
              .set_sort_objects(true)
              .set_icons('+', '-')
              .set_max_string_length(100)(doc));
  });


</script>
{% endblock %}

{%  block css %}
<link rel=stylesheet type=text/css
          href="{{ url_for('static', filename='index.css') }}">
    <style>
      .renderjson a { text-decoration: none; }
      .renderjson .disclosure { color: crimson;
                                font-size: 150%; }
      .renderjson .syntax { color: grey; }
      .renderjson .string { color: darkred; }
      .renderjson .number { color: darkcyan; }
      .renderjson .boolean { color: blueviolet; }
      .renderjson .key    { color: darkblue; }
      .renderjson .keyword { color: blue; }
      .renderjson .object.syntax { color: lightseagreen; }
      .renderjson .array.syntax  { color: orange; }
    </style>
{% endblock %}


{% block content %}

<h1 id="title">Collection: {{collection_name}}</h1>
<h2>Doc {{doc_id}}</h2>
<div id="doc">
</div>

{% endblock %}