<!DOCTYPE html>
<html lang="{{ site.lang | default: " en-US" }}">

<head>
  <meta charset='utf-8'>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
  <link rel="stylesheet" type="text/css" href="{{ '/assets/css/print.css' | relative_url }}" media="print">
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-TMTZVLLMBP"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-TMTZVLLMBP');
  </script>
  <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  <style>
    #centeringDiv {
      margin: auto;
      max-width: 1200px;
    }
    #navDiv
    {
      display: block;
      box-sizing: border-box;
      padding-top: 5px;
      padding-bottom: 5px;
      border-bottom-width: 3px;
      border-bottom-style: solid;
      border-bottom-color: #F0F0F0;
    }
    #navDiv nav
    {
      float:left;
    }
    #navDiv::after {
      content: "";
      clear: both;
      display: table;
    }
    #navDiv nav li::after
    {
      content: "/";
      padding-left: 10px;
      padding-right: 0px;
      color: #808080;
    }
    #navDiv nav li
    {
      display:inline;
      padding-left: 10px;
      padding-right: 0px;
    }
    #tocColumn {
      width: 350px;
      position: fixed;
      overflow-y: auto;
      box-sizing: border-box;
      display: block;
    }

    #tocInner {
      padding: 20px;
    }

    #rightColumn {
      padding-left: 390px;
      padding-right: 40px;
      padding-top: 20px;
    }

    .toc_root_list {
      list-style-type: none;
      list-style-position: outside;
      background-color: initial;
      padding-left: 0px;
    }
    .toc_list {
        padding-left: 16px;
        background-color: initial;
        list-style-type: none;
        margin-bottom: 0px;
    }
    .toc_item {
        cursor: pointer;
        user-select: none;
        list-style-type: none;
        padding-left: 0px;
        padding-top: 5px;
    }
    .toc_item_expanded::before {
        content: "\25be";
        cursor: pointer;
    }
    .toc_item_collapsed::before {
        content: "\25b8";
        cursor: pointer;
    }
    .toc_item_leaf {
        padding-left: 14px;
        cursor: pointer;
        list-style-type: none;
    }
    .toc_span:hover
    {
      color: #d5000d;
    }
    .tocIcon
    {
      vertical-align: -2.5px;
    }
    .editButton
    {
      float: right;
      margin-right: 10px;
      color:#808080;
    }
    .editIcon
    {
      fill: currentColor;
      vertical-align: text-top;
    }
    #btnToggleTOC {
      display: none;
      width: fit-content;
      margin-left: 10px;
      margin-top: 10px;
      padding: 10px;
      border-style: solid;
      border-color: #808080;
      border-width: 1px;
      background-color: #E8E8E8;
    }
    #btnToggleTOC:hover {
      background-color: #F0F0E8;
    }
    #btnToggleTOC:active {
      background-color: #D4D4D4;
    }
    @media screen and (max-width: 900px) {
      #tocColumn {
        width: 300px;
        display: block;
        box-sizing: border-box;
      }
      #rightColumn {
        padding-left: 320px;
        padding-right: 20px;
      }
    }

    @media screen and (max-width: 700px) {
      #tocColumn {
        width: 100%;
        position: static;
        display: none;
        border-right-style: none;
        box-sizing: content-box;
      }
      #tocInner {
        padding: 10px;
      }
      #rightColumn {
        padding-left: 10px;
        padding-right: 10px;
      }
      #centeringDiv {
         padding-left: 0px;
      }
      #btnToggleTOC {
        display: block;
      }
    }
  </style>
  {% seo %}
</head>

<body>
  <div id="centeringDiv">
    <div id="navDiv">
    {% include_relative nav.html %}
    <a class="editButton" title="Edit this page" href="https://github.com/{{ site.github.repository_nwo }}/edit/master/docs/{{ page.path }}">
      <svg class="editIcon" height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
        <path fill-rule="evenodd"
          d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z">
        </path>
      </svg>
    </a>
    </div>
    <button id="btnToggleTOC" onclick="toggleTOC()">
      <svg height="16" class="tocIcon" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
        <path fill-rule="evenodd"
          d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z">
        </path>
      </svg>
      Table of Contents</button>
    <div id="tocColumn">
      <div id="tocInner">
        {% include_relative toc.html %}
      </div>
    </div>
    <div id="rightColumn">
        <section id="main_content">
          {% include anchor_headings.html html=content anchorBody="" %}
        </section>
        <a href="javascript:;" id="_content_end_"></a>
        <footer>
          {% if site.github.is_project_page %}
          {{ site.title | default: site.github.repository_name }} is maintained by <a
            href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a><br>
          {% endif %}
          This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.
        </footer>
      </div>
    </div>
  <script>
    // Fix for IE. Make sure String has `startsWith` method.
    if (!String.prototype.startsWith)
    {
      String.prototype.startsWith = function (searchString, position) {
        position = position || 0;
        return this.indexOf(searchString, position) === position;
      };
    }

    var tocColumn = document.getElementById("tocColumn");
    var rightColumn = document.getElementById("rightColumn");
    function updateScroll()
    {
      if (window.innerWidth < 700)
      {
        tocColumn.style.height = "";
        return;
      }
      var top = Math.max(0, rightColumn.getBoundingClientRect().top);
      tocColumn.style.top = top + "px";
      tocColumn.style.height = (window.innerHeight-top) + "px";
    }
    function updatePosition()
    {
      if (window.innerWidth > 700)
        tocColumn.style.display = "";
      tocColumn.style.left = rightColumn.getBoundingClientRect().left + "px";
      updateScroll();
    }
    window.addEventListener("resize", updatePosition);
    updatePosition();

    var tocItemsArray = [];
    var subSectionItems = [];
    var selectedItem = null;
    function toggleTOC() {
      var tocColumn = document.getElementById("tocColumn");
      if (tocColumn.style.display == "block")
        tocColumn.style.display = "none";
      else
        tocColumn.style.display = "block";
      event.stopPropagation();
    }
    function expandItem(e) {
      if (e == selectedItem)
        e.style["font-weight"] = "bold";
      var childList = e.getElementsByClassName("toc_list");
      if (childList.length == 0)
        return;
      childList[0].style.display = "block";
      childList[0].style["font-weight"] = "normal";
      e.setAttribute("class", "toc_item toc_item_expanded");
    }
    function collapseItem(e) {
      var childList = e.getElementsByClassName("toc_list");
      if (childList.length == 0)
        return;
      childList[0].style.display = "none";
      e.setAttribute("class", "toc_item toc_item_collapsed");
    }
    function tocSpanOnClick(e)
    {
      if (event.srcElement != null && event.srcElement.parentElement != null)
      {
        var link = event.srcElement.parentElement.getAttribute("data-link");
        if (link != null)
        {
          var poundIndex = link.indexOf("#");
          if (poundIndex == -1)
            window.location.href = link + ".html";
          else
            window.location.href = link.substr(0, poundIndex) + ".html#" + link.substr(poundIndex+1, link.length - poundIndex - 1);
        }
      }
      event.stopPropagation();
    }
    function tocItemOnClick(e)
    {
      if (event.srcElement == null) return;
      // Toggle expanded/collapsed state.
      if (event.srcElement.getAttribute("class").endsWith("toc_item_collapsed"))
        expandItem(event.srcElement);
      else if (event.srcElement.getAttribute("class").endsWith("toc_item_expanded"))
        collapseItem(event.srcElement);
      event.stopPropagation();
    }
    var path = window.location.pathname;
    var pageName = path.split("/").pop();
    var currentPageID = pageName.substr(0, pageName.lastIndexOf("."));
    if (currentPageID.length == 0)
      currentPageID = "index";
    var tocLists = document.getElementsByClassName("toc_root_list");
    for (var i = 0; i < tocLists.length; i++) {
      var tocList = tocLists[i];
      var items = tocList.getElementsByTagName("li")
      for (var j = 0; j < items.length; j++)
        tocItemsArray.push(items[j]);
    }
    for (var i = 0; i < tocItemsArray.length; i++) {
      var item = tocItemsArray[i];
      if (item.getAttribute("data-link") == currentPageID)
        selectedItem = item;
      if (item.getElementsByTagName("li").length != 0) {
        collapseItem(item);
      }
      else {
        item.setAttribute("class", "toc_item toc_item_leaf");
      }
      item.addEventListener("click", tocItemOnClick);
      var innerSpan = item.getElementsByTagName("span");
      if (innerSpan.length != 0)
      {
        innerSpan[0].addEventListener("click", tocSpanOnClick);
        innerSpan[0].setAttribute("class", "toc_span");
      }
    }
    var curItem = selectedItem;
    while (curItem != null) {
      expandItem(curItem);
      curItem = curItem.parentElement;
      if (curItem != null && curItem.getAttribute("class") != null &&
        curItem.getAttribute("class").startsWith("toc_list"))
        curItem = curItem.parentElement;
      if (curItem != null && curItem.getAttribute("class") != null &&
        curItem.getAttribute("class").startsWith("toc_root_list"))
        break;
    }

    var subItems = selectedItem.getElementsByTagName("li");
    var subSectionTitles = [];
    var subSectionTitleStrs = [];
    for (var i = 0; i < subItems.length; i++)
    {
      subSectionItems.push(subItems[i]);
      var title = subItems[i].getAttribute("data-link");
      var pos = title.lastIndexOf("#");
      title = title.substr(pos + 1);
      var element = document.getElementById(title);
      subSectionTitles.push(element);
      subSectionTitleStrs.push(title);
    }
    subSectionTitles.push(document.getElementById("_content_end_"));
    function isSectionFullyVisible(id)
    {
      var titleElement = subSectionTitles[id];
      var nextTitleElement = subSectionTitles[id+1];
      return (titleElement.getBoundingClientRect().top >= 0 && nextTitleElement.getBoundingClientRect().top <= window.innerHeight);
    }
    function findCurrentSubsection()
    {
      var currentSubsectionID = -1;
      for (var i = 0; i < subSectionItems.length; i++) {
        var titleElement = subSectionTitles[i];
        if (titleElement == null)
          continue;
        if (titleElement.getBoundingClientRect().top < window.innerHeight * 0.12)
          currentSubsectionID = i;
      }
      return currentSubsectionID;
    }
    function updateCurrentSubsection(currentSubsectionID)
    {
      for (var i = 0; i < subSectionItems.length; i++)
      {
        if (i == currentSubsectionID || isSectionFullyVisible(i))
          subSectionItems[i].getElementsByTagName("span")[0].style["font-weight"] = 600;
        else
          subSectionItems[i].getElementsByTagName("span")[0].style["font-weight"] = 400;
      }
    }
    function windowScroll(e)
    {
      updateCurrentSubsection(findCurrentSubsection());
      updateScroll();
    }
    window.addEventListener("scroll", windowScroll);
    updateCurrentSubsection(findCurrentSubsection());
  </script>
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [ ['$$','$$'], ["\\(","\\)"] ],
        displayMath: [ ['$$','$$'], ["\\(","\\)"] ],
      },
      TeX: {
        Macros: {
          bra: ["\\langle{#1}|", 1],
          ket: ["|{#1}\\rangle", 1],
          braket: ["\\langle{#1}\\rangle", 1],
          bk: ["\\langle{#1}|{#2}|{#3}\\rangle", 3]
       }
     }
    });
  </script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</body>

</html>