{#
/**
 * @file
 * Theme override for the basic structure of a single Drupal page.
 *
 * This template provides a minimal HTML structure for the playground page,
 * removing Drupal's default page chrome (toolbar, admin menu, etc.) to
 * provide a fullscreen immersive experience.
 *
 * Variables:
 * - logged_in: A flag indicating if user is logged in.
 * - root_path: The root path of the current page (e.g., node, admin, user).
 * - node_type: The content type for the current node, if the page is a node.
 * - head_title: List of text elements that make up the head_title variable.
 *   May contain one or more of the following:
 *   - title: The title of the page.
 *   - name: The name of the site.
 *   - slogan: The slogan of the site.
 * - page_top: Initial rendered markup. This should be printed before 'page'.
 * - page: The rendered page markup.
 * - page_bottom: Closing rendered markup. This variable should be printed after
 *   'page'.
 * - db_offline: A flag indicating if the database is offline.
 * - placeholder_token: The token for generating head, css, js and js-bottom
 *   placeholders.
 *
 * @see \Drupal\Core\Theme\ThemePreprocess::preprocessHtml()
 */
#}
<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token }}">
    <js-placeholder token="{{ placeholder_token }}">
  </head>
  {#
    We avoid attaching attributes to the body as server-side set attributes
    usually don't make sense for a fullscreen app.

    For Example:
    Gin toolbar module injects some classes on body assuming the toolbar HTML
    is present, which ends up breaking the layout.

    This template provides a clean slate for the playground React app.
  #}
  <body>
    {{ page }}
    <js-bottom-placeholder token="{{ placeholder_token }}">
  </body>
</html>
