<!DOCTYPE html>

<html lang="{{ site.lang | default: 'en-US' }}">
{%- assign nodeCurrent = page.url | urlToNote: notes.notes -%}
{%- assign canShowGit =  nodeCurrent | gitShowLink %}
{% include includes/head.liquid %}


<body>
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
      <symbol id="svg-link" viewBox="0 0 24 24">
        <title>Link</title>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
        </svg>
      </symbol>
      <symbol id="svg-search" viewBox="0 0 24 24">
        <title>Search</title>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
          <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
      </symbol>
      <symbol id="svg-menu" viewBox="0 0 24 24">
        <title>Menu</title>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
          <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
      </symbol>
      <symbol id="svg-arrow-right" viewBox="0 0 24 24">
        <title>Expand</title>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
          <polyline points="9 18 15 12 9 6"></polyline>
        </svg>
      </symbol>
      <symbol id="svg-doc" viewBox="0 0 24 24">
        <title>Document</title>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
          <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
        </svg>
      </symbol>
    </svg>

    <div class="side-bar">
      <div class="site-header">
        <a href="{{ '/' | absolute_url }}" class="site-title lh-tight">{% include includes/title.liquid %} </a>
        <a href="#" id="menu-button" class="site-button">
          <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg>
        </a>
      </div>

      <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
      </nav>
      <footer class="site-footer">
        🌱 with 💕 using <a href="https://www.dendron.so/"> Dendron 🌲 </a>
      </footer>
    </div>
    <div class="main" id="top">
        <div id="main-header" class="main-header">
          {% if site.search_enabled != false %}
            <div class="search">
              <div class="search-input-wrap">
                <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
                <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
              </div>
              <div id="search-results" class="search-results"></div>
            </div>
          {% endif %}
          {% if site.aux_links %}
          <nav aria-label="Auxiliary" class="aux-nav">
            <ul class="aux-nav-list">
              {% for link in site.aux_links %}
                <li class="aux-nav-list-item">
                  <a href="{{ link.last }}" class="site-button"
                    {% if site.aux_links_new_tab %}
                    target="_blank" rel="noopener noreferrer"
                    {% endif %}
                  >
                    {{ link.first }}
                  </a>
                </li>
              {% endfor %}
            </ul>
          </nav>
        {% endif %}
    </div>
    <div id="main-content-wrap" class="main-content-wrap">
      {% unless page.url == "/" %}
        {% if nodeCurrent.parent %}
          <nav aria-label="Breadcrumb" class="breadcrumb-nav">
            <ol class="breadcrumb-nav-list">
              {%- include includes/crumbs.liquid  -%}
            </ol>
          </nav>
        {% endif %}
      {% endunless %}
      <div id="main-content" class="main-content" role="main">

        {% if site.enable_mathjax %}
        <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
        <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
        {% endif %}
        {% if dendronConfig.mermaid  %}
        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
        <script>mermaid.initialize({startOnLoad:true});</script>
        {% endif %}

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        
        {% if dendronConfig.workspace.feedback %}
        <script type="text/javascript" src="/assets/js/rater.js"></script>
        <link rel="stylesheet" type="text/css" href="/assets/css/jquery.feedback_me.css">
        <script type="text/javascript" src="/assets/js/jquery.thumbs.js"></script>
        <link rel="stylesheet" type="text/css" href="/assets/css/jquery.thumbs.css">
        {% endif %}

        {% if site.cognitoUserPoolId %}
          {% if processEnv.stage == "dev" %}
          {% else %}
            <script src="/assets/js/auth.js"></script>
            <script>
              let UserPoolId, ClientId, domain;
              UserPoolId = "{{site.cognitoUserPoolId}}";
              ClientId = "{{site.cognitoClientId}}";
              domain = "{{site.siteUrl}}";
              window.currentUser = window.getCurrentUser(UserPoolId, ClientId, domain);
            </script>
          {% endif %}
        {% endif %}

        {% if site.segmentKey %}
        <script>
          !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="{{site.segmentKey}}";analytics.SNIPPET_VERSION="4.13.2";
          analytics.load("{{site.segmentKey}}");
          if (window.currentUser) {
            analytics.identify(window.currentUser.username);
          }
          analytics.page({userId: window?.currentUser?.username});
          }}();
        </script>
        {% endif %}

        {% if nodeCurrent.custom.sources %}
        <div class="alert alert-primary" role="alert">
          This page was generated from content adapted from the following <a href="#" data-html="true" data-toggle="popover" title="Attributions">sources</a>
          </a>
        </div>

        <script>
          $(function () {
            $('[data-toggle="popover"]').popover({content: `
              <ul>
              {% for source in nodeCurrent.custom.sources %}
              <li> <a href="{{source.url}}" target="_blank">{% if source.name and source.name != "" %} {{source.name}} {% else %} {{source.url}} {% endif %} </li>
              {% endfor %}
              </ul>
            `})
          })
        </script>
        {% endif %}

        <script>
          $(function () {
            $('[data-toggle="popover"]').popover({html: true})
          })
        </script>

        {{ content }}
        <div class="thumbs feedback_trigger right-bottom"></div>

        {% if site.footer_content != nil or site.last_edit_timestamp or dendronConfig.site.gh_edit_link %}
          <hr>
          <footer>
            {% if site.back_to_top %}
              <p><a href="#top" id="back-to-top">{{ site.back_to_top_text }}</a></p>
            {% endif %}
            {% if site.footer_content != nil %}
              <p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
            {% endif %}

            {% if site.siteLastModified  %}
              <div class="d-flex mt-2">
              <p class="text-small text-grey-dk-000 mb-0 mr-2">
                Page last modified: <span class="d-inline-block">{{ nodeCurrent.updated | ms2ShortDate }}</span>.
              </p>
            {% endif %}
                {% if canShowGit %}
                  <p class="text-small text-grey-dk-000 mb-0">
                    <a href="{% githubUrl nodeCurrent %}" id="edit-this-page">{{ dendronConfig.site.gh_edit_link_text }}</a>
                  </p>
                {% endif %}
              </div>
          </footer>
        {% endif %}
    </div>
</div>

{% if site.search_enabled != false %}
  {% if site.search.button %}
    <a href="#" id="search-button" class="search-button">
      <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
    </a>
  {% endif %}

  <div class="search-overlay"></div>
{% endif %}
</div>
{% if dendronConfig.workspace.feedback %}

<div class="modal fade" id="feedbackForm" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Thanks for the vote</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p> To provide additional details, fill out the form below. </p>
        <form>
          <div class="form-group">
            <label for="comment">Feedback</label>
            <textarea class="form-control" id="dendronComment" rows="3"></textarea>
          </div>
          <div class="form-group">
            <label for="email">Email address (optional) </label>
            <input type="email" class="form-control" id="dendronEmail" aria-describedby="emailHelp" placeholder="Enter email">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button id="submitFeedback" type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script>
  {% if processEnv.stage == "dev" %}
  const base_url = "http://localhost:3005";
  {% else %}
  const base_url = "https://api.dendron.app";
  function readCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') c = c.substring(1, c.length);
          if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
      }
      return null;
  }
  let headers = {};
  if (window.cognitoUser) {
    var cookieName = ["CognitoIdentityServiceProvider", cognitoUser.pool.clientId, cognitoUser.username, "idToken"].join(".");
    headers = {Authorization: readCookie(cookieName)};
  } 
  $.ajaxSetup({
      headers,
  });
  {% endif %}

  let noteId = window.location.pathname.split("/").pop().replace(/.html$/, "")
  if (noteId === "") {
      noteId = "index";
  }
  $(document).ready(function(){
    let feedback_url = `${base_url}/api/v1/feedback/`;

    function genFeedbackData() {
      return {
        domain: window.location.hostname,
        noteId,
      }
    }

    function sendRating(thumbsUp) {
      let rating = thumbsUp ? 1 : -1;
      $.post( feedback_url, {rating, 
        domain: window.location.hostname,
        pathname: window.location.pathname,
        noteId,
      })
        .done(function( data ) {
          console.log("done", data);
      });
    }

    function sendFeedback() {
      return $.post( feedback_url, {
        domain: window.location.hostname,
        pathname: window.location.pathname,
        noteId,
        comment: $("#dendronComment").val(),
        email: $("#dendronEmail").val(),
      })
      .done(function( data ) {
        console.log("done", data);
        return;
      });
    }

    $('.thumbs').thumbs({
      onLike: function (value) {
          sendRating(true);
          $("#feedbackForm").modal();
      },
      onDislike: function(value) {
          sendRating(false);
          $("#feedbackForm").modal();
      }
    });
    $( "#submitFeedback" ).click(function() {
      sendFeedback().then(function() {
        $("#feedbackForm").modal('hide');
      }).catch((err) => {
        console.log("error with form;")
        $("#feedbackForm").modal('hide');
      });
    });
  });
</script>
{% endif %}
</body>
</html>
