import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('not-found-page')
export class NotFoundPage extends LitElement {
  static styles = css`
    div {
      padding-top: 4rem;
      * {
        width: fit-content;
        margin: auto auto;
        padding-bottom: 1rem;
      }
    }
  `;

  navigate(path: string) {
        this.dispatchEvent(
            new CustomEvent('nav', { detail: { path }, bubbles: true, composed: true })
        );
    }

  render() {
    return html`
      <div>
        <h1>404 Not Found</h1>
        <p><ui-link href="/">Here</ui-link>you can get back.</p>
      </div>
    `;
  }
}