---
layout: home
---
<div class="container">
    <div class="row">
        <div class="col-md-12 mx-auto">
            <div class="editor d-flex justify-content-between">
                <div id="left_editor_div">
                    <div class="input_editor_bar" id="input_editor_bar">
                        <label class="mb-0">Input</label>
                        <div class="editor_action">
                            <i class="fas fa-upload" id="upload_div_inner" title="File Upload">
                            </i>
                            <i class="fa fa-trash-alt cross_icon" title="Clear"></i>
                            <i class="fas fa-copy copy_icon" id="inputcopy" title="Copy"></i>
                            <i title="Download" class="save_icon fas fa-cloud-download-alt" id="input_save"></i>
                            <!-- <img src="/img/download.png" class="save_icon" id="input_save" alt="save_icon" /> -->
                        </div>
                    </div>
                    <div id="input_editor"></div>
                </div>
                <div class="format_json">
                    <div onclick="editor()" class="editor_btns" id="format_btn">
                        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiIGZpbGw9IiNmZmYiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg=="
                            alt="format" />
                    </div>
                </div>
                <div id="right_editor_div">
                    <div class="output_editor_bar" id="output_editor_bar">
                        <label class="mb-0">Output</label>
                        {%- if page.convert_to -%}
                        <div class="convert_to">
                            <select class="form-control py-0 px-3" name="convert_to_x" id="convert_to_x"
                                style="height:auto;">
                                <option value="yaml">yaml</option>
                                <option value="xml">xml</option>
                            </select>
                        </div>
                        {%- endif -%}

                        <div class="editor_action">
                            <i title="Delete" class="fa fa-trash-alt cross_icon"></i>
                            <i class="fas fa-copy copy_icon" id="outputcopy" title="Copy"></i>
                            <i title="Download" class="save_icon fas fa-cloud-download-alt" id="input_save"></i>
                        </div>

                    </div>
                    <div id="output_editor"></div>
                </div>
            </div>

            

            <div class="devtools_box p-2 w-100 mt-5 text-left" style="background: rgba(32, 152, 243, .8);">
                {{content}}
            </div>
        </div>
    </div>
</div>
<input data-sitename="{{site.name}}" type="file" id="file_upload" accept="{{page.type}}"
    style="height: 1px; width: 1px; visibility: hidden" />