{% extends 'dashboard.html' %}

{% block page %}

{{ render_partial('dashboard/http_functions/header.html', user_id=user_id, function_id=function_id,
active_tab='edit',
show_edit_form=True,
show_logs=True,
show_client=True,
show_history=True,
show_tests=True,
edit_url=edit_url,
cancel_url=cancel_url,
logs_url=url_for('http.logs', function_id=function_id),
history_url=url_for('http.history', function_id=function_id),
tests_url=url_for('http.tests', function_id=function_id)) }}


<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 }}',
      functionId: {{ id }},
    description: '{{ description }}',
    jsValue: {{ script_content | tojson | safe }},
    jsonValue: {{ environment_info | tojson | safe }},
    isEdit: true,
    showHeader: true,
    isPublic: {{ is_public | tojson }},
    logRequest: {{ log_request | tojson }},
    logResponse: {{ log_response | tojson }},
    versionNumber: {{ version_number }},
    runtime: '{{ runtime }}',
    executeUrl: "{{ url_for('execute_code', playground='true') }}",
    saveUrl: "{{ url_for('http.edit', function_id=id) if id else url_for('http.new') }}",
    deleteUrl: "{{ url_for('http.delete', function_id=id) if id else '' }}",
    cancelUrl: "{{ url_for('http.overview') }}",
    generateUrl: "{{ url_for('llm.generate_script') }}",
    showDeleteButton: true
    })
  })
</script>

{% endblock %}