{% 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,
edit_url=edit_url,
cancel_url=cancel_url) }}


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

<script>
  // Mount the component
  m.mount(document.getElementById("app"), {
    view: () => m(Editor, {
      name: '{{ name }}',
      functionId: {{ id }},
    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 }},
    executeUrl: "{{ url_for('execute_code', playground='true') }}",
    saveUrl: "{{ url_for('api_update_http_function', function_id=id) if id else url_for('api_create_http_function') }}",
    deleteUrl: "{{ url_for('api_delete_http_function', function_id=id) if id else '' }}",
    showDeleteButton: true
    })
  })
</script>

{% endblock %}