---
const { PHPMYADMIN_PORT = 8081 } = import.meta.env;

interface Props {
  title?: string;
}

const { title = "phpMyAdmin" } = Astro.props;
---

<a href="#" data-pma-port={PHPMYADMIN_PORT} target="_blank" rel="noopener noreferrer">
  {title}&nbsp;(<span class="pma-url"></span>)
</a>

<script define:vars={{ PHPMYADMIN_PORT }}>
  const link = document.currentScript.previousElementSibling;
  const host = window.location.hostname;
  const url = `http://${host}:${PHPMYADMIN_PORT}`;
  link.href = url;
  link.querySelector('.pma-url').textContent = url;
</script>