{% extends "source/includes/base.html" %}
{% import "source/includes/macros.html" as macros %}

{% set title = "Re-Nav ↩ Share" %}

{% block head %}
<link rel="stylesheet" href="/scss/re-nav/re-nav.scss">
<link rel="stylesheet" href="/scss/re-nav/share.scss">
{% endblock %}

{% block body %}
<header class="page-header">
  <h1>
    <img src="../../assets/re-nav.png" alt="Re-Nav Logo">
    Re-Nav
  </h1>
</header>

<main class="page-main">
  <p class="subtitle">
    Welcome to Re-Nav's share page!
    <br />
    Use the share button in Re-Nav's options page to create a link with your
    redirect.
  </p>

  <div class="hidden-by-default redirect">
    <p class="matcher-data">
      <span class="matcher-type"></span>
      {{-":"-}}
      <span class="matcher-value"></span>
    </p>
    <p class="arrow">↓</p>
    <p class="redirect-data">
      <span class="redirect-type"></span>
      {{-":"-}}
      <span class="redirect-value"></span>
    </p>
  </div>

  {#
    This element will be shown by JS on page load, and if Re-Nav is installed,
    it will be used as the root container for the import button.
  #}
  <div class="hidden-by-default re-nav-import">
    <p>
      With <a href="..">Re-Nav</a> installed, you'll see a button here to import
      this redirect.
    </p>
  </div>
</main>

<footer class="page-footer">
  &copy;
  <a href="https://git.bauke.xyz/Holllo/re-nav">AGPL-3.0-or-later</a>
  💖
  <a href="mailto:helllo@holllo.org">helllo@holllo.org</a>
</footer>

<script src="../../ts/re-nav/share.ts" type="module"></script>
{% endblock %}