@inherits Custom.Hybrid.Razor14
@{

  if (Kit.Css.IsUnknown) {
    @* Include bootstrap 5 if the framework isn't known - then this file is still called, and we add Bootstrap to the page *@
    @Kit.Page.Activate(condition: Kit.Css.IsUnknown, features: "Bootstrap5")
    <div class="alert alert-warning">This Tutorial uses Bootstrap 5, without Bootstrap 5 there will be display errors</div>
  }
}


@* Script Contains ACE9 init code + Accordion JS *@
<script src="@App.Path/dist/scripts.min.js" @Kit.Page.AssetAttributes()></script>
<link rel="stylesheet" href="@App.Path/dist/styles.min.css" @Kit.Page.AssetAttributes()>

<script src="//cdn.jsdelivr.net/ace/1.2.6/noconflict/ace.js" type="text/javascript" charset="utf-8" @Kit.Page.AssetAttributes(priority: 200)></script>
<script src="//cdn.jsdelivr.net/ace/1.2.6/noconflict/ext-language_tools.js" @Kit.Page.AssetAttributes(priority: 201)></script>

<!-- styles, mainly used for code show/hide -->
<style>
  .code-block .source-code, .fa-chevron-up, 
  .is-expanded .fa-chevron-down  {
    display: none;
  }
  .is-expanded .source-code, 
  .is-expanded .fa-chevron-up {
    display: block;
  }
  .code-block .header {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
  }
  .code-block .header img {
    width: 20px;
    height: 20px;
    padding: 5px 4px 4px;
  }

  .tab-pane .alert.alert-info + .code-block {
    margin-bottom: 0 !important;
  }

  .alert.alert-info + .code-block {
    margin-bottom: 3rem !important;
  }

  .alert.alert-info + .code-block .source-code {
    border: 1px solid #E8E1D6;
  }

  .code-block .source-code pre,
  .pre-result .source-code pre {
    margin-bottom: 0;
  }

  h3 + ol,
  h3 + ul,
  p + ol,
  p + ul {
    margin-bottom: 1.5rem;
  }

</style>

@* 
  Activate Headings which should reveal snippets on this page
  Should ideally be in this header, because it ensures it will only be called once per page
  This should also work in Oqtane
@Kit.Page.TurnOn("window.snippets.initRevealers()")
*@
