<div id="page">
  {{ partial "partials/home/page.html" . }}
</div>
<div id="profile" class="hidden h-full">
  {{ partial "partials/home/profile.html" . }}
</div>

<script type="text/javascript">
  function switchLayout() {
    const pageDiv = document.getElementById("page");
    const profileDiv = document.getElementById("profile");
    const layoutCode = document.querySelectorAll("code[id=layout]");
    if (pageDiv.style.display === "none") {
      pageDiv.style.display = "block";
      profileDiv.style.display = "none";
      layoutCode.forEach(function (el) {
        el.innerText = "page";
      });
    } else {
      pageDiv.style.display = "none";
      profileDiv.style.display = "block";
      layoutCode.forEach(function (el) {
        el.innerText = "profile";
      });
    }
  }
</script>
