<template id="tesoft-nav-template">
    <style>
        @import "/src/styles/default.css";

        :host {
            display: block;
        }

        nav {
            background-color: var(--dark-gray);
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            padding: var(--small-padding);
        }

        nav > div {
            align-items: center;
            background-color: var(--gray);
            border-radius: var(--button-border-radius);
            display: grid;
            gap: var(--medium-padding);
            grid-template-columns: 4rem 1fr;
            grid-template-rows: auto;
            padding: var(--small-padding) var(--medium-padding);
        }

        img {
            width: 100%;
        }

        a {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
        }

        a > svg {
            fill: var(--light-gray);
        }

        slot {
            display: grid;
            gap: var(--small-padding);
            grid-auto-columns: 14rem;
            grid-auto-flow: column;
            grid-template-rows: 1fr;
            justify-content: start;
        }

        tesoft-button.small-menu {
            display: none;
        }

        tesoft-button.small-menu::part(children) {
            display: grid;
            gap: var(--medium-padding);
            grid-template-columns: 1fr 4rem;
            grid-template-rows: auto;
            width: 100%;
        }

        tesoft-button.small-menu span {
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row: 1;
        }

        tesoft-button.small-menu svg {
            grid-column: 2;
            grid-row: 1;
            height: 2.4rem;
            justify-self: end;
            width: 2.4rem;
        }

        dialog {
            background-color: var(--gray);
            border-style: none;
            border-radius: var(--button-border-radius);
        }

        dialog.small-menu tesoft-button {
            min-height: 4rem;
            width: 100%;
        }

        dialog.exec {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        dialog.exec > div {
            color: var(--light-gray);
            display: grid;
            gap: var(--medium-padding);
            grid-template-columns: 1fr;
            grid-template-rows: auto auto;
            padding: var(--medium-padding);
            width: 90vw;
        }

        ::backdrop {
            background-color: #222831D1;
        }

        @media (max-width: 480px) {
            slot {
                display: none;
            }

            tesoft-button.small-menu {
                display: unset;
            }
        }

        @media (min-width: 860px) {
            dialog.exec > div {
                width: 80rem;
            }
        }
    </style>

    <nav>
        <div>
            <a href="/">
                <img src="/assets/logo.svg" alt="logo">
            </a>
            <slot>
            </slot>
            <tesoft-button class="small-menu" transparent>
                <span></span>

                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                    <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
                </svg>
            </tesoft-button>
        </div>
    </nav>

    <dialog class="small-menu" closedby="any">
        <div></div>
    </dialog>

    <dialog class="exec" closedby="any">
        <div>
            <tesoft-input>
                <svg slot="left" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                    <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/>
                </svg>
            </tesoft-input>
            <div class="results">
            </div>
        </div>
    </dialog>
</template>

<script src="/src/components/nav.ts" type="module"></script>
{% includeOnce 'components/button.njk' %}
{% includeOnce 'components/input.njk' %}
