import { html } from 'lit-html';
import { navs } from '@lit-html-free/router';
import { customElement } from '@lit-html-free/core';

@customElement('app-component')
export default class extends HTMLElement {
    public render() {
        return html`
            <div class="nav">
                ${navs('main').map(route => {
                    if (route.isNav) {
                        return html`
                            <a href=${route.href} class="navitem">${route.name}</a>
                        `;
                    } else {
                        return '';
                    }
                })}
            </div>

            <section>
                <free-router name="main"></free-router>
            </section>
        `;
    }
}