var feedletterWidget = `
<div id="feedletter-widget" class="feedletter-widget  feedletter-widget-bottom-right">
  <a id="feedletter-widget-close" onclick="document.getElementById('feedletter-widget').style.display='none'">&times</a>
  <h2 class="feedletter-widget-text">How Do You Like Monk Mode?</h2>
  <ul class="feedletter-emoji">
    <li>
      <a rel="noopener"
        href="https://feedletter.co/feedback/give/1/285599788487934467"
        target="_blank"
        >👍</a
      >
    </li>
    <li>
      <a rel="noopener"
        href="https://feedletter.co/feedback/give/2/285599788487934467"
        target="_blank"
        >😐</a
      >
    </li>
    <li>
      <a rel="noopener"
        href="https://feedletter.co/feedback/give/3/285599788487934467"
        target="_blank"
        >👎</a
      >
    </li>
</ul>

<div class="feedletter-brand">Build your own? 👉 <a href="https://feedletter.co" target="_blank" rel="noopener">FeedLetter.co</a></div>

</div>
`

var css = `
.feedletter-widget {
    font-family: Helvetica, sans-serif;
    font-size: 16px;
    display: inline-block;
    background-color: white;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(120, 120, 120, 0.3);
    color: #4a4a4a;
    padding: 15px;
    z-index: 99;
  }

.feedletter-widget ul {
    list-style: none;
}
.feedletter-emoji {
    padding-inline-start: 0px;
    text-align: center;
}
.feedletter-emoji li {
    display: inline;
}

.feedletter-emoji a{
    font-size: 32px;
}
.feedletter-widget li {
    padding: 5px;
}
.feedletter-widget a {
    text-decoration: none;
    color: #4a4a4a;
}

#feedletter-widget-close {
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
    font-size: 1.4em;
    height: 25px;
    width: 25px;
    text-align: center;
    background-color: white;
    border-radius: 50%;
    color: gray;
}
.feedletter-widget .feedletter-brand a {
    color: #4bbf73;
}
.feedletter-widget .feedletter-brand {
    text-align: center;
    font-size: 0.9em;
}

  .feedletter-widget.feedletter-widget-bottom-right {
    position: fixed;
    bottom: 10px;
    right: 10px;
  }
  .feedletter-widget.feedletter-widget-bottom-left {
    position: fixed;
    bottom: 10px;
    left: 10px;
  }

  .feedletter-widget-text {
    margin: 8px 8px 0 8px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #222222;
    text-align: center;
    text-transform: none;
    letter-spacing: 1px;
  }
  .feedletter-widget-buttons {
    display: flex;
    justify-content: space-around;
    padding: 4px 16px;
  }
`

var jsonLdData = `
  {
    "@context": "https://schema.org/",
    "@type": "Product",
    "name": "Monkmode",
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "5",
      "bestRating": "5",
      "ratingCount": "342"
    }

  }
  `

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

var votes = getCookie("fl_votes") || ""
var head = document.getElementsByTagName("head")[0]
var jsonLd = document.createElement('script');
jsonLd.type="application/ld+json"
jsonLd.innerHTML = jsonLdData
head.append(jsonLd)

if (!votes.includes("285599788487934467")) {
  setTimeout(function(){
    let style = document.createElement('style');
    style.innerHTML = css
    head.append(style)
    
    let body = document.getElementsByTagName("body")[0]
    body.insertAdjacentHTML('beforeend', feedletterWidget);
  }, 7000);
} else {
  console.log("already voted. not showing again")
}