{% extends "views/report-templates/default.htm" %} 
{% load i18n %} 
{% block report %}

{% block body %}
<!-- JSON section -->
<div class="aher-report-section aher-flex-col">
    <h2 class="aher-report-section-title"><i tabindex="0" data-bind="onEnterkeyClick, onSpaceClick, click: function() {toggleVisibility(visible.json)}, onReportSectionToggleAria: visible.json, sectionName: '{% trans "Resource JSON" %}'" class="fa toggle"></i> {% trans "Resource JSON" %}</h2>

    <!-- Collapsible content -->
    <div data-bind="visible: visible.json" class="aher-report-collapsible-container pad-lft">
        <a href="#" class="aher-report-a" data-bind="click: function(){setSelectedJson('json')}">
            <!-- ko if: selectedFormat() == 'json' -->
            <i class="fa fa-arrow-down"></i> 
            <!-- /ko -->
            <!-- ko ifnot: selectedFormat() == 'json' -->
            <i style="display:inline-block;width: 12px"></i> 
            <!-- /ko -->
            {% trans "JSON" %}
        </a>
        <a href="#" class="aher-report-a" data-bind="click: function(){setSelectedJson('arches-json')}">
            <!-- ko if: selectedFormat() == 'arches-json' -->
            <i class="fa fa-arrow-down"></i> 
            <!-- /ko -->
            <!-- ko ifnot: selectedFormat() == 'arches-json' -->
            <i style="display:inline-block;width: 12px"></i> 
            <!-- /ko -->
            {% trans "Arches JSON" %}
        </a>
        <a href="#" class="aher-report-a" data-bind="click: function(){setSelectedJson('json-ld')}">
            <!-- ko if: selectedFormat() == 'json-ld' -->
            <i data-bind="if: (selectedFormat() == 'json-ld')" class="fa fa-arrow-down"></i> 
            <!-- /ko -->
            <!-- ko ifnot: selectedFormat() == 'json-ld' -->
            <i style="display:inline-block;width: 12px"></i> 
            <!-- /ko -->
            {% trans "JSON-LD" %}
        </a>
    </div>
    <!-- Show this block if there is resource tile content -->
    <div data-bind="visible: visible.json" class="aher-report-subsection aher-flex-col">
        <div class="aher-codemirror aher-flex-col">
            <div style="overflow:auto; height:100%;" class="geojson-editor" data-bind="codemirror: {
                value: selectedJSON,
                viewportMargin: Infinity,
                mode: { name: 'javascript', json: codeMirrorJsonMode, jsonld: codeMirrorJsonLDMode },
                lineNumbers: true
            }"></div>
        </div>
    </div>
</div>
{% endblock body %}
{% endblock report %}