---
const { WEB_PORT = 8080 } = import.meta.env;

interface Props {
	href: string;
	title?: string;
}
---

<astro-docker-link data-link={Astro.props.href || ""} data-title={Astro.props.title}>
  <a href="#" target="_blank" rel="noopener noreferrer">
    Docker: {Astro.props.title}
  </a>
</astro-docker-link>

<script define:vars={{ WEB_PORT }}>

class AstroDockerLink extends HTMLElement {
  connectedCallback() {

    const href = this.dataset.link;

    const host = window.location.hostname;
    const url = `http://${host}:${WEB_PORT}/${href || ""}`;

    const anchor = this.querySelector("a");

    anchor.href = url;

    const title = this.dataset.title || url;
    anchor.textContent = `Docker: ${title}`;
  }
}

customElements.define("astro-docker-link", AstroDockerLink);
</script>