{% macro header() -%}

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="{{ url_for('static', filename='jdd/reset.css') }}" type="text/css" media="screen">
<link rel="stylesheet" href="{{ url_for('static', filename='jdd/throbber.css') }}" type="text/css" media="screen">
<link rel="stylesheet" href="{{ url_for('static', filename='jdd/jdd.css') }}" type="text/css" media="screen">

<script src="{{ url_for('static', filename='jdd/jquery.3.6.0.min.js') }}" type="text/javascript" charset="utf-8"></script>

<script src="{{ url_for('static', filename='jdd/jsl/jsl.format.js') }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ url_for('static', filename='jdd/jsl/jsl.parser.js') }}" type="text/javascript" charset="utf-8"></script>
<script src="{{ url_for('static', filename='jdd/jdd.js') }}" type="text/javascript" charset="utf-8"></script>

{%- endmacro %}

{% macro body() -%}

<div id="main">

    <div class="initContainer">
        <div class="left">
            <textarea spellcheck="false" id="textarealeft" placeholder="Enter JSON to compare, enter an URL to JSON" tabindex="1"></textarea>
            <pre id="errorLeft" class="error"></pre>
            <span class="fileInput">or <input type="file" id="fileLeft" onchange="jdd.handleFiles(this.files, 'left')" tabindex="4"></span>
        </div>

        <div class="center">
            <button id="compare" tabindex="3">Compare</button>
            <div class="throbber-loader"></div>
        </div>

        <div class="right">
            <textarea spellcheck="false" class="right" id="textarearight" placeholder="Enter JSON to compare, enter an URL to JSON" tabindex="2"></textarea>
            <pre id="errorRight" class="error"></pre>
            <span class="fileInput">or <input type="file" id="fileRight" onchange="jdd.handleFiles(this.files, 'right')" tabindex="5"></span>
        </div>
    </div>

    <div class="diffcontainer">
        <div id="report">
        </div>
        <pre id="out" class="left" class="codeBlock"></pre>
        <pre id="out2" class="right" class="codeBlock"></pre>
        <ul id="toolbar" class="toolbar"></ul>
    </div>
</div>

{%- endmacro %}
