<template>
  <div class="flex flex-col w-full h-full gap-2">
    <h1>About Ultrawidify</h1>
    <p>
      Ultrawidify version: <b>{{addonVersion}}</b><br>
      Install source: <b>{{addonSource}}</b>
    </p>

    <div class="flex flex-row gap-2 bg-black">
      <div class="w-[1/2]" style="width: 50%">
        <h2>Report a problem</h2>
        <p>
          Please report <strike>undocumented features</strike> bugs using one of the following options (in order of preference):
        </p>
        <ul>
          <li> <a target="_blank" href="https://github.com/tamius-han/ultrawidify/issues"><b>Github (preferred)</b></a><br/></li>
          <li>Email: <a target="_blank" :href="mailtoLink">tamius.han@gmail.com</a></li>
        </ul>
        <p>
          When reporting bugs, please include the following information:
        </p>
        <ul>
          <li>Extension version</li>
          <li>Which browser you're using¹</li>
          <li>Which extension store you installed extension from (install source)²</li>
          <li>Which site you're having the issue on (preferably link. For issues with autodetection, please also include a timestamp)</li>
          <li>What do I need to do in order to make the issue happen</li>
          <li>Please include a screenshot of the problem. It usually helps.</li>
        </ul>
        <p>
          <small>
            [1] If using anything other than Firefox, Chrome, or Edge, please check if issue also happens in Chrome or Edge. Bugs affecting Opera will only get fixed if they also affect Chrome, because <a target="_blank" href="https://stuff.tamius.net/sacred-texts/2024/06/08/why-im-boycotting-opera/">I'm salty</a>.<br/>
            [2] It is recommended that users of Microsoft Edge install Ultrawidify from the Microsoft Edge Addons source
          </small>
        </p>
      </div>

      <div class="w-[1/2]" style="width: 50%">
        <h2>Thank you monies</h2>
        <p>
          If you think I deserve money for the work I did up to this point, you can bankroll my caffeine addiction.
        </p>
        <p class="text-center">
          <a class="donate" href="https://www.paypal.com/paypalme/tamius" target="_blank">Donate on Paypal</a>
        </p>
        <p>
          I also have <a href="https://instagram.com/shaman_urkog" target="_blank">instagram with nerdy shit</a> <small>(mini painting + various fantasy events)</small>.
        </p>
      </div>
    </div>

  </div>
</template>

<script>
import BrowserDetect from '../../../ext/conf/BrowserDetect';

export default {
  components: {
    BrowserDetect,
 },
  data() {
    return {
      // reminder — webextension-polyfill doesn't seem to work in vue!
      addonVersion: BrowserDetect.firefox ? chrome.runtime.getManifest().version : chrome.runtime.getManifest().version,
      addonSource: BrowserDetect.processEnvVersion,
      mailtoLink: '',
      redditLink: '',
      showEasterEgg: false,
    }
  },
  async created() {
    const messageTemplate = encodeURIComponent(
`Describe your issue in more detail. In case of misaligned videos, please provide screenshots. When reporting\
 issues with autodetection not detecting aspect ratio correctly, please provide a link with timestamp to the\
 problematic video at the time where the problem happens. You may delete this paragraph, as it's only a template.


Extension info (AUTOGENERATED — DO NOT CHANGE OR REMOVE):
* Build: ${BrowserDetect.processEnvBrowser}-${this.addonVersion}-stable

Browser-related stuff (please ensure this section is correct):
* User Agent string: ${window.navigator.userAgent}
* vendor: ${window.navigator.vendor}
* Operating system: ${window.navigator.platform}
`
      );
    this.mailtoLink = `mailto:tamius.han@gmail.com?subject=%5BUltrawidify%5D%20ENTER%20SUMMARY%20OF%20YOUR%20ISSUE%20HERE&body=${messageTemplate}`;
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}

p, li {
  font-size: 1rem;
}
small {
  opacity: 0.5;
  font-size: 0.8em;
}
a {
  color: #fa6;
}
.text-center {
  text-align: center;
}
.donate {
  margin: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  background-color: #fa6;
  color: #000;
}
</style>
