---
import "../../scss/pages/re-nav.scss";
import "../../scss/pages/re-nav-share.scss";
import WebExtensionLayout from "../../layouts/web-extension.astro";
import {props} from "./index.astro";

delete props.frontmatter.byline;
---

<WebExtensionLayout {...props}>
  <img alt="Re-Nav Logo" src="/re-nav.png" slot="header-image" />

  <slot slot="main-content">
    <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>
  </slot>

  <script src="../../ts/re-nav-share.ts"></script>
</WebExtensionLayout>