{% extends 'dashboard.html' %}

{% block page %}

{{ render_partial('dashboard/http_functions/header.html',
user_id=user_id,
show_name=False,
show_refresh=False,
show_logs=False,
show_client=False,
show_link=False,
dashboardUrl=url_for('http.overview'),
cancel_url=url_for('http.overview'),
title='New HTTP Function')
}}

<div id="app" class="">
    <!-- The Editor component will be mounted here -->
</div>

<script>
    // Mount the component
    m.mount(document.getElementById("app"), {
        view: () => m(Editor, {
            name: '{{ name }}',
            path: '{{ path }}',
            jsValue: {{ script | tojson | safe }},
        pythonValue: {{ default_python_script | tojson | safe }},
        jsonValue: {{ environment_info | tojson | safe }},
        isEdit: false,
        isAdd: true,
        showHeader: true,
        isPublic: {{ is_public | tojson }},
        logRequest: {{ log_request | tojson }},
        logResponse: {{ log_response | tojson }},
        executeUrl: "{{ url_for('execute_code', playground='true') }}",
        saveUrl: "{{ url_for('http.new') }}",
        showDeleteButton: false,
        generateUrl: "{{ url_for('llm.generate_script') }}",
        dashboardUrl: "{{ url_for('http.overview') }}"
      })
    })
</script>

{% endblock %}