{% extends "web/pages/base_page.js.jinja2" %}

{% block declaration %}
{% for custom_code in custom_codes %}
{{custom_code}}
{% endfor %}
{% endblock %}

{% block export %}
export default function Component() {
  const {{state_name}} = useContext(StateContext)
  const {{const.router}} = useRouter()
  const { {{const.color_mode}}, {{const.toggle_color_mode}} } = {{const.use_color_mode}}()
  const focusRef = useRef();
  
  // Main event loop.
  const [Event, notConnected] = useContext(EventLoopContext)

  // Set focus to the specified element.
  useEffect(() => {
    if (focusRef.current) {
      focusRef.current.focus();
    }
  })

  // Route after the initial page hydration.
  useEffect(() => {
    const change_complete = () => Event([E('{{state_name}}.{{const.hydrate}}', {})])
    {{const.router}}.events.on('routeChangeComplete', change_complete)
    return () => {
      {{const.router}}.events.off('routeChangeComplete', change_complete)
    }
  }, [{{const.router}}])

  {% for hook in hooks %}
  {{ hook }}
  {% endfor %}

  return (
  <Fragment>
      {%- if err_comp -%}
            {{ utils.render(err_comp, indent_width=1) }}
       {%- endif -%}
    {{utils.render(render, indent_width=0)}}
    </Fragment>
  )
}
{% endblock %}
