{% extends 'dashboard.html' %}

{% block page %}

{{ render_partial('dashboard/http_functions/header.html', title='History', user_id=user_id, function_id=function_id,
name=name,
refresh_url=url_for('get_http_function_history', function_id=function_id), show_logs=True, show_client=True,
show_edit_form=True) }}

<!-- Timeline -->
<div>
    {% if http_function.version_number > 1 %}
    {% for entry in http_function_history %}
    <!-- Item -->
    <div class="flex gap-x-3">
        <!-- Left Content -->
        <div class="w-24 text-end">
            <span class="text-xs text-gray-500">{{ entry.updated_at.strftime('%b %d %Y %I:%M %p').lstrip("0").replace("
                0", " ") }}
            </span>
        </div>
        <!-- End Left Content -->

        <!-- Icon -->
        <div
            class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200">
            <div class="relative z-10 size-7 flex justify-center items-center">
                <div class="size-2 rounded-full bg-gray-400"></div>
            </div>
        </div>
        <!-- End Icon -->

        <!-- Right Content -->
        <div class="grow pt-0.5 pb-4 cursor-pointer">
            <h3 class="flex gap-x-1.5 font-semibold text-gray-800">
                v{{ entry.version_number }}
            </h3>
            <p class="mt-1 text-sm text-gray-600">
            </p>

            <button type="button"
                class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none">
                Revert
            </button>

        </div>
        <!-- End Right Content -->
    </div>
    <div class="block">
        <div id="diff_{{ entry.version_id }}" class="relative h-80"></div>
    </div>
    <script>
        (function () {
            // Assigning JSON content to a JavaScript variable
            var preContent = '{{ entry.pre | tojson | safe }}';
            var postContent = '{{ entry.post | tojson | safe }}';

            var aceDiffer = new AceDiff({
                element: '#diff_{{ entry.version_id }}',
                mode: "ace/mode/javascript",
                left: {
                    content: preContent,
                    editable: false,
                },
                right: {
                    content: postContent,
                    editable: false,
                },
            });

            // Retrieve the individual editors
            var editors = aceDiffer.getEditors();

            // Set the maxLines property on each editor
            editors.left.setOptions({
                maxLines: 20, // Set the maximum number of lines
                autoScrollEditorIntoView: true,
            });
            editors.left.session.setOption("useWorker", false);

            editors.right.setOptions({
                maxLines: 20, // Set the maximum number of lines
                autoScrollEditorIntoView: true,
            });
            editors.right.session.setOption("useWorker", false);

        })();
    </script>

    <!-- End Item -->
    {% endfor %}
    <!-- Item -->
    <div class="flex gap-x-3">
        <!-- Left Content -->
        <div class="w-24 text-end">
            <span class="text-xs text-gray-500">{{ http_function.created_at.strftime('%b %d %Y %I:%M
                %p').lstrip("0").replace("
                0", " ") }}
            </span>
        </div>
        <!-- End Left Content -->

        <!-- Icon -->
        <div
            class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200">
            <div class="relative z-10 size-7 flex justify-center items-center">
                <div class="size-2 rounded-full bg-gray-400"></div>
            </div>
        </div>
        <!-- End Icon -->

        <!-- Right Content -->
        <div class="grow pt-0.5 pb-4 cursor-pointer">
            <h3 class="flex gap-x-1.5 font-semibold text-gray-800">
                v1
            </h3>
            <p class="mt-1 text-sm text-gray-600">
            </p>
            <button type="button"
                class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none">
                Revert
            </button>
        </div>
        <!-- End Right Content -->
    </div>

    <div id="diff_1_editor" class="relative rounded-lg shadow-lg p-4 text-opacity-0">{{ original_script }}</div>
    <script>
        var editor = ace.edit("diff_1_editor");
        editor.setOptions({
            maxLines: 100
        });
        editor.setTheme("ace/theme/github_dark");
        editor.session.setMode("ace/mode/javascript");

        editor.session.$worker.send("changeOptions", [{ asi: true }]);
    </script>
    <!-- End Item -->
    {% else %}

    <!-- Item -->
    <div class="flex gap-x-3">
        <!-- Left Content -->
        <div class="w-24 text-end">
            <span class="text-xs text-gray-500">{{ http_function.created_at.strftime('%b %d %Y %I:%M
                %p').lstrip("0").replace("
                0", " ") }}
            </span>
        </div>
        <!-- End Left Content -->

        <!-- Icon -->
        <div
            class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200">
            <div class="relative z-10 size-7 flex justify-center items-center">
                <div class="size-2 rounded-full bg-gray-400"></div>
            </div>
        </div>
        <!-- End Icon -->

        <!-- Right Content -->
        <div class="grow pt-0.5 pb-4 cursor-pointer">
            <h3 class="flex gap-x-1.5 font-semibold text-gray-800">
                v1
            </h3>
            <p class="mt-1 text-sm text-gray-600">
            </p>
            <button type="button"
                class="mt-1 -ms-1 p-1 inline-flex items-center gap-x-2 text-xs rounded-lg border border-transparent text-gray-500 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none">
                Revert
            </button>
        </div>
        <!-- End Right Content -->

    </div>

    <div id="diff_1_editor" class="relative rounded-lg shadow-lg p-4 text-opacity-0">{{ original_script }}</div>
    <script>
        var editor = ace.edit("diff_1_editor");
        editor.setOptions({
            maxLines: 100,
            readOnly: true,  // Disable editing
            highlightActiveLine: false,  // Optionally, disable highlighting the active line
            highlightGutterLine: false   // Optionally, disable highlighting the gutter line
        });
        editor.setTheme("ace/theme/github_dark");
        editor.session.setMode("ace/mode/javascript");

    </script>

    <!-- End Item -->
    {% endif %}

</div>
<!-- End Timeline -->


{% endblock %}