<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <title>
    {{ packages[0].display_name }}
    v{{ packages[0].version_name }}
    ({{ packages[0].version_code }})
  </title>
  <style type="text/css">
    button {
      all: unset;
    }

    .hidden {
      display: none;
    }
    .disabled {
      opacity: 0.5;
    }

    .modal {
      display: none;
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto; /* 15% from the top and centered */
      padding: 20px;
      border: 1px solid #888;
      border-radius: 20px;
      width: 80%; /* Could be more or less, depending on screen size */
      max-width: 400px;
    }
    .modal-close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      line-height: 0px;
    }
    .modal-close:hover,
    .modal-close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    body {
      font-family: Helvetica, Arial, sans-serif;
      text-align: center;
      color: #444;
      font-size: 18px;
    }
    p {
      color: #999
    }

    .btn, .btn:visited, .btn:hover, .btn:link {
      display: inline-block;
      border-radius: 3px;
      background-color: #0095c8;
      color: white;
      padding: .8em 1em;
      text-decoration: none;
    }
    .btn:hover {
      background-color: #00bbfb;
      color: white;
    }

    .app-icon {
      display: block;
      margin: 1em auto;
      border: none;
      width: 120px;
      height: 120px;
      border-radius: 20px;
    }

    #qrcode img, #qrcode canvas {
      margin: auto;
    }
  </style>
</head>
<body>
  <select id="package-select">
    {% for pkg in packages %}
    <option value="pkg-{{ loop.index }}">
      [{{ pkg.package_type }}]
      {{ pkg.display_name }}
      v{{ pkg.version_name }}
      ({{ pkg.version_code }})
    </option>
    {% endfor %}
  </select>
{% for pkg in packages %}
  <div
    id="pkg-{{ loop.index }}"
    class="package"
    data-fragment="{{ pkg.app_id }}:{{ pkg.version_code }}"
    data-title="{{ pkg.display_name }} v{{ pkg.version_name }} ({{ pkg.version_code }})"
    data-type="{{ pkg.package_type }}"
  >
    <h1>{{ pkg.display_name }}</h1>
    <h2>{{ pkg.version_name }} ({{ pkg.version_code }})</h2>
    {% if pkg.image_url %}
    <img class="app-icon" src="{{ pkg.image_url | safe }}">
    {% endif %}
    <a
      href="{{ pkg.install_url | safe }}"
      class="btn install-btn"
    >
      Install
    </a>
    <button class="btn show-qr-btn">
      Show QR
    </button>
    <a
      href="{{ pkg.download_url | safe }}"
      class="btn"
    >
      Download
    </a>
    <p class="comment">
      <a class="copy-link-btn" href="#{{ pkg.app_id }}:{{ pkg.version_code }}">Copy Permalink</a>
    </p>
    <p class="comment">
      {% set os = 'Android' if pkg.package_type == 'apk' else 'WatchOS' if pkg.platform == 'watchos' else 'iOS' %}
      {% if pkg.minimum_os_version is defined %}
      This app requires <b>{{ os }} {{ pkg.minimum_os_version }}</b> or higher.
      {% else %}
      This app requires <b>{{ os }}</b>.
      {% endif %}
    </p>
    <p class="comment">{{ pkg.app_id }}</p>
  </div>
{% endfor %}

  <div id="qr-modal" class="modal">
    <div class="modal-content">
      <span class="modal-close">&times;</span>
      <div id="qrcode"></div>
    </div>
  </div>

  <!-- https://cdnjs.com/libraries/qrcodejs -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
  var OS = (function() {
    var ua = navigator.userAgent || '';
    // test windows first because it contains android
    if (/windows phone/i.test(ua)) {
      return 'windows';
    }
    if (/Android/i.test(ua)) {
      return 'android';
    }
    if (/iPad|iPhone|iPod/i.test(ua) && !window.MSStream) {
      return 'ios';
    }
    return 'unknown';
  })();

  var select = document.getElementById('package-select');
  var packages = document.querySelectorAll('.package');
  var modal = document.getElementById('qr-modal');
  var modalClose = document.getElementsByClassName('modal-close')[0];
  var qrcode = new QRCode(document.getElementById('qrcode'), {
    text: window.location.href,
    width: 256,
    height: 256,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H,
  });

  select.addEventListener('change', function (e) {
    selectPackageById(e.target.value);
  });

  modalClose.addEventListener('click', function () {
    modal.style.display = 'none';
  });

  window.addEventListener('click', function (e) {
    if (e.target == modal) {
      modal.style.display = 'none';
    }
  });

  window.addEventListener('keydown', function (e) {
    if (modal.style.display === 'none') return;
    if (e.key === 'Escape') {
      modal.style.display = 'none';
    }
  });

  window.addEventListener('hashchange', function (e) {
    if (!window.location.hash) return;

    for (var i = 0 ; i < packages.length ; ++i) {
      var pkg = packages[i];
      if (window.location.hash === '#' + pkg.dataset.fragment) {
        return selectPackageById(pkg.id);
      }
    }
    // if nothing matched then just clear the hash
    window.location.fragment = '';
  });

  var activePackageId = null;
  for (var i = 0 ; i < packages.length ; ++i) {
    var pkg = packages[i];
    var isPackageInstallable = (
      (OS === 'android' && pkg.dataset.type === 'apk')
      || (OS === 'ios' && pkg.dataset.type === 'ipa')
    );
    if (!isPackageInstallable) {
      var installBtn = pkg.querySelector('.install-btn');
      installBtn.classList.add('disabled');
    }
    else if (activePackageId === null) {
      activePackageId = pkg.id;
    }

    var qrBtn = pkg.querySelector('.show-qr-btn');
    qrBtn.addEventListener('click', function () {
      modal.style.display = 'block';
      qrcode.makeCode(permalinkWithFragment(this.dataset.fragment));
    }.bind(pkg));

    var copyBtn = pkg.querySelector('.copy-link-btn');
    copyBtn.addEventListener('click', function (e) {
      e.preventDefault();

      const type = "text/plain";
      const text = permalinkWithFragment(this.dataset.fragment);
      const blob = new Blob([text], { type });
      const data = [new ClipboardItem({ [type]: blob })];

      navigator.clipboard.write(data).then(
        function () {},
        function () {
          alert('Failed to copy to clipboard.');
        },
      );
    }.bind(pkg));
  }

  // if a fragment is set then search for that item first
  if (window.location.hash) {
    for (var i = 0 ; i < packages.length ; ++i) {
      var pkg = packages[i];
      if (window.location.hash === '#' + pkg.dataset.fragment) {
        activePackageId = pkg.id;
      }
    }
  }
  // if we still don't have an initial package then use the first
  if (!activePackageId) {
    activePackageId = packages[0].id;
  }

  // mark the default package as selected
  selectPackageById(activePackageId);

  function selectPackageById(id) {
    activePackageId = id;

    for (var i = 0 ; i < select.options.length ; ++i) {
      var opt = select.options[i];
      opt.selected = opt.value === id;
    }

    for (var i = 0 ; i < packages.length ; ++i) {
      var pkg = packages[i];
      if (pkg.id === id) {
        document.title = pkg.dataset.title;
        pkg.classList.remove('hidden');
      }
      else {
        pkg.classList.add('hidden');
      }
    }
    // clear out the selected hash
    if (window.location.hash) {
      window.location.hash = '';
    }
  }

  function permalinkWithFragment(fragment) {
    var url = window.location.href.split('#', 1)[0];
    return url + '#' + fragment;
  }
  </script>
</body>
</html>
<!--
created at: {{ created_at }}
updated at: {{ updated_at }}
-->
