{% extends "layout.html" %}
{% block header_addition %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/search/searchcursor.min.js"></script>
<script src="{{ url_for('static',filename='lib/mergely.js') }}" type="text/javascript"></script>
<link rel="stylesheet" media="all" href="{{ url_for('static',filename='lib/mergely.css') }}" />
<script type="text/javascript">
    $(document).ready(function () {
        // set editor content
        $('#mergely').mergely({
            width: 'auto',
			height: '80%',
			license: 'lgpl',
            lhs: function(setValue) {
                setValue(atob("{{ filecontent_local }}"));
            },
            rhs: function(setValue) {
                setValue(atob("{{ filecontent_remote }}"));
            },
            viewport: true
        });
    });
    </script>

{% endblock %}
{% block content %}
<div class="row">
    <div class="col-md">
        Resolve Merge Conflict
    </div>
</div>
<div class="row">
    <div class="col-md">
        <div id="mergely"></div>
    </div>

</div>
<div class="row">
    <div class='col-md'>
        <form id='updateform'>
            <input type='hidden' id='sha' name='sha' value="{{ sha_remote }}">
            <input type='hidden' id='path' name='path' value="{{ path }}">
            <input type="submit" value="Update">
        </form>
        <script>

        updateform.onsubmit = async (e) => {
            e.preventDefault();

            let fd = new FormData(updateform)
            fd.append('content', $('#mergely').mergely('get', 'lhs'));

            let response = await fetch('/update', {
            method: 'POST',
            body: fd
            });

            let result = await response;
            window.location.href = '/';
            alert(result.message);
        };

        </script>
    </div>
</div>
{% endblock %}