                <div id="modalPolicy{{ loop.index }}" class="modal fade">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">Policy report</h4>
                                <label class="control-label" for="fileDetail_policy_policy">Policy:</label>
                                <select id="fileDetail_policy_selector{{ loop.index }}" name="filedetail[policy][selector]" class="form-control" onchange="webpage.onFillPolicyReport('{{ check.getSource }}', '#modalPolicy{{ loop.index }}', $('#fileDetail_policy_selector{{ loop.index }}').val(), $('#fileDetail_policy_display{{ loop.index }}').val());">
                                  <option selected="selected" value="-1">Choose a policy</option>
                                </select>
                                <label class="control-label" for="fileDetail_policy_display">Display:</label>
                                <select id="fileDetail_policy_display{{ loop.index }}" name="filedetail[policy][display]" class="form-control" onchange="webpage.onFillPolicyReport('{{ check.getSource }}', '#modalPolicy{{ loop.index }}', $('#fileDetail_policy_selector{{ loop.index }}').val(), $('#fileDetail_policy_display{{ loop.index }}').val());">
                                  <option selected="selected" value="-1">Choose a Display</option>
                                </select>
                            </div>
                            <div class="modal-body">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary report-dld" data-target="#policyDld{{ loop.index }}" data-save-name="{{ check.filename }}_MediaConch.{{ check.filename }}" onclick="webpage.onSavePolicyReport('{{ check.getSource }}', $(this).data('save-name'), $('#fileDetail_policy_selector{{ loop.index }}').val(), $('#fileDetail_policy_display{{ loop.index }}').val());">Download report</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="modalConformance{{ loop.index }}" class="modal fade">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">Implementation report</h4>
                                <label class="control-label" for="fileDetail_implementation_display">Display:</label>
                                <select id="fileDetail_implementation_display{{ loop.index }}" name="filedetail[implementation][display]" class="form-control" onchange="webpage.onFillImplementationReport('{{ check.getSource }}', '#modalConformance{{ loop.index }}', $('#fileDetail_implementation_display{{ loop.index }}').val());">
                                  <option selected="selected" value="-1">Choose a Display</option>
                                </select>
                            </div>
                            <div class="modal-body">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary report-dld" data-target="#modalConformance{{ loop.index }}" data-save-name="{{ check.filename }}_ImplementationReport.txt" onclick="webpage.onSaveImplementationReport('{{ check.getSource }}', $(this).data('save-name'), $('#fileDetail_implementation_display{{ loop.index }}').val());">Download report</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="modalInfo{{ loop.index }}" class="modal fade">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">MediaInfo</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <i class="glyphicon glyphicon-search"></i><input type="text" value="" class="jstreeSearch" id="infoSearch{{ loop.index }}" placeholder="Search" />
                                    </div>
                                    <div class="col-md-12">
                                        <div id="info{{ loop.index }}"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary report-dld-info-ajax" data-target="#infoXml{{ loop.index }}" data-save-name="{{ check.filename }}_MediaInfo.xml" onclick="webpage.onSaveInfo('{{ check.getSource }}', $(this).data('save-name'));">Download MediaInfo report</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="modalTrace{{ loop.index }}" class="modal fade">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">MediaTrace</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <i class="glyphicon glyphicon-search"></i><input type="text" value="" class="jstreeSearch" id="traceSearch{{ loop.index }}" placeholder="Search" />
                                    </div>
                                    <div class="col-md-12">
                                        <div id="trace{{ loop.index }}"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary report-dld-trace-ajax" data-target="#traceXml{{ loop.index }}" data-save-name="{{ check.filename }}_MediaTrace.xml" onclick="webpage.onSaveTrace('{{ check.getSource }}', $(this).data('save-name'));">Download trace report</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <script>
                  $('#modalTrace{{ loop.index }}').on('show.bs.modal', function() {
                      $('#trace{{ loop.index }}').jstree({
                          'core' : {
                                       'check_callback' : function (operation, node, parent, position, more) {
                                           if (operation === 'copy_node' || operation === 'move_node') {
                                               return false;
                                           }
                                           else {
                                               return true;
                                           }
                                       },
                                       'multiple' : false,
                                       'dblclick_toggle' : false,
                                       'data' : function (obj, callback) {
                                           var report = webpage.onFillMediaTraceReport('{{ check.getSource }}');
                                           callback.call(this, eval(report));
                                       }
                          },
                          "plugins" : ['search', 'types', 'grid'],
                          'types' : {
                              'default' : {'icon' : 'glyphicon glyphicon-folder-open'},
                              'block' : {'icon' : 'glyphicon glyphicon-folder-open'},
                              'data' : {'icon' : 'glyphicon glyphicon-file'},
                          },
                          'grid' : {
                              columns : [
                                  {header: "Offset", value: 'offset'},
                                  {header: "Key", tree: true},
                                  {header: "Value",  value: 'dataValue'},
                              ],
                              resizable: true,
                          },
                      })
                  });

                  $('#trace{{ loop.index }}').on('ready.jstree', function () {
                      $(function () {
                          var to = false;
                          $('#traceSearch{{ loop.index }}').keyup(function () {
                              if(to) { clearTimeout(to); }
                              to = setTimeout(function () {
                                  var v = $('#traceSearch{{ loop.index }}').val();
                                  $('#trace{{ loop.index }}').jstree(true).search(v);
                              }, 250);
                          });
                      });
                  });

                  $('#trace{{ loop.index }}').on('loaded.jstree', function (e, data) {
                      data.instance.get_container().find('li').each(function () {
                          data.instance.open_node($(this));
                      })
                  });

                  $('#trace{{ loop.index }}').on('select_node.jstree', function (e, data) {
                      data.instance.toggle_node(data.node);
                  });

                  $('#modalInfo{{ loop.index }}').on('show.bs.modal', function() {
                      $('#info{{ loop.index }}').jstree({
                          'core' : {
                              'check_callback' : function (operation, node, parent, position, more) {
                                  if (operation === 'copy_node' || operation === 'move_node') {
                                      return false;
                                  }
                                  else {
                                      return true;
                                  }
                              },
                              'multiple' : false,
                              'dblclick_toggle' : false,
                              'data' : function (obj, callback) {
                                  var report = webpage.onFillMediaInfoReport('{{ check.getSource }}');
                                  callback.call(this, eval(report));
                              }
                          },
                          "plugins" : ['search', 'types', 'grid'],
                          'types' : {
                              'default' : {'icon' : 'glyphicon glyphicon-folder-open'},
                              'block' : {'icon' : 'glyphicon glyphicon-folder-open'},
                              'data' : {'icon' : 'glyphicon glyphicon-file'},
                          },
                          'grid' : {
                              columns : [
                                  {header: "Key", tree: true},
                                  {header: "Value",  value: 'dataValue'},
                              ],
                              resizable: true,
                          },
                      })
                  });

                  $('#info{{ loop.index }}').on('ready.jstree', function () {
                      $(function () {
                          var to = false;
                          $('#infoSearch{{ loop.index }}').keyup(function () {
                              if(to) { clearTimeout(to); }
                              to = setTimeout(function () {
                                  var v = $('#infoSearch{{ loop.index }}').val();
                                  $('#info{{ loop.index }}').jstree(true).search(v);
                              }, 250);
                          });
                      });
                  });

                  $('#info{{ loop.index }}').on('loaded.jstree', function (e, data) {
                      data.instance.open_all();
                  });

                  $('#info{{ loop.index }}').on('select_node.jstree', function (e, data) {
                      data.instance.toggle_node(data.node);
                  });

                </script>
