{{ define "header" }}
<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Title }}{{ end }}" />
{{ with .Params.relcanonical }}
<link rel="canonical" href="{{ . | relLangURL }}" itemprop="url" />
{{ end }}
{{ end }}

{{ define "navbar" }}
    {{ partial "navigators/navbar.html" . }}
{{ end }}

{{ define "sidebar" }}
  <section class="sidebar-section" id="sidebar-section">
    <div class="sidebar-holder">
      <div class="sidebar" id="sidebar">
        <form class="mx-auto" method="get" action="{{ "search" | relLangURL }}">
          <input type="text" name="keyword" value="" placeholder="{{ i18n "search" }}" data-search="" id="search-box" />
        </form>
        <div class="sidebar-tree">
          <ul class="tree" id="tree">
            <li id="list-heading"><a href="{{ "/posts/" | relLangURL }}" data-filter="all">Project Posts</a></li>
            <div class="subtree">
                {{ partial "navigators/sidebar.html" (dict "menuName" "sidebar" "menuItems" site.Menus.sidebar "ctx" .) }}
            </div>
          </ul>
        </div>
      </div>
    </div>
  </section>
{{ end }}

{{ define "content" }}
<section class="content-section" id="content-section">
  <div class="content">
    <div class="container p-0 read-area">
      <!--Hero Area-->
      <div class="hero-area col-sm-12" id="hero-area" style='background-image: url({{ partial "helpers/get-hero.html" . }});'>
      </div>

      <!--Content Start-->
      <div class="page-content">
        {{ if site.Params.features.blog.showAuthor | default true }}
        <div class="author-profile ms-auto align-self-lg-center">
          <img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}' alt="Author Image">
          <h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
          <p class="text-muted">{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} {{i18n "minute" .ReadingTime }}{{ end }}</p>
        </div>
        {{ else }}
        <div style="margin-bottom: 80px;"></div>
        {{ end }}

        <div class="title">
          <h1>{{ .Page.Title }}</h1>
        </div>

        {{ if not (site.Params.features.blog.showAuthor | default true) }}
        <div class="author-profile ms-auto align-self-lg-center">
          <p class="text-muted">{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} {{i18n "minute" .ReadingTime }}{{ end }}</p>
        </div>
        {{ end }}

        {{ if site.Params.features.tags.enable }}
          {{partial "misc/tags.html" .Params.tags }}
        {{ end }}
        <div class="github-button">
          <a href="{{ .Params.repo }}" target="_blank" class="btn btn-info">
            <i class="fab fa-github"></i> View on GitHub
          </a>
        </div>
        <div class="post-content" id="post-content">
          {{ .Page.Content }}
        </div>
      <!-- Keep backward compatibility with old config.yaml -->
      {{ if .Site.Config.Services.Disqus.Shortname }}
        {{ partial "comments/disqus.html" (dict (slice "disqus" "shortName")  .Site.Config.Services.Disqus.Shortname) }}
      {{ end }}

      </div>
    </div>
  </div>
  <!--scroll back to top-->
  <a id="scroll-to-top" class="btn" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Scroll to top">
    <i class="fas fa-chevron-circle-up"></i>
  </a>

  {{ if eq .Page.Title "Open Source Delta Robot" }}
  <!-- Hidden div containing the workspace content -->
  <div id="hidden-workspace" style="display: none;">
    {{ partial "robot_workspace.html" . }}
  </div>
  <script>
  document.addEventListener("DOMContentLoaded", function () {
    const workspaceContainer = document.getElementById("workspace-container");
    const hiddenWorkspace = document.getElementById("hidden-workspace");

    if (workspaceContainer && hiddenWorkspace) {
      // Move the content from the hidden div into the visible workspace container
      workspaceContainer.innerHTML = hiddenWorkspace.innerHTML;
      hiddenWorkspace.remove(); // Remove the original hidden div

      // Ensure scripts inside the moved content are executed
      workspaceContainer.querySelectorAll("script").forEach(oldScript => {
        const newScript = document.createElement("script");
        newScript.text = oldScript.textContent;
        document.body.appendChild(newScript);
      });
    }
  });
</script>
  {{ end }}
</section>
{{ end }}

{{ define "toc" }}
  <section class="toc-section" id="toc-section">
    {{ if and site.Params.features.toc.enable ( .Params.enableTOC | default true ) }}
    <div class="toc-holder">
      <h5 class="text-center ps-3">{{ i18n "toc_heading" }}</h5>
      <hr>
      <div class="toc">
        {{ .TableOfContents }}
      </div>
    </div>
    {{ end }}
  </section>
{{ end }}