<div class="container-divider"></div>
<div class="container">
  <div class="sub-nav">
    {{breadcrumbs}}
  </div>

  <div id="main-content">
     <div id="service-catalog-item"></div>
  </div>
</div>

<script type="module">
  import { renderServiceCatalogItem } from "service-catalog";

  const settings = {{json settings}};
  const container = document.getElementById("service-catalog-item");

  // Extract the ID from the URL
  const id = window.location.pathname.split("/").pop()

  const props = {
    baseLocale: {{json help_center.base_locale}},
    hasAtMentions: {{json help_center.at_mentions_enabled}},
    userRole: {{json user.role}},
    userId: {{json user.id}},
    brandId: {{json brand.id}},
    organizations: {{json user.organizations}},
    serviceCatalogItemId: id,
    helpCenterPath: {{json (page_path 'help_center')}},
  }

  renderServiceCatalogItem(container, settings, props);
</script>
