@use crate::{templates::{layouts::root, nav}, nav::NavState};
@use crate::templates::statics::nav_js;
@use hyaenidae_toolkit::templates::{bar, centered};
@use hyaenidae_toolkit::{templates::{card, card_body}, Card};
@use hyaenidae_toolkit::{templates::link, Link};
@use hyaenidae_toolkit::{templates::button_group, Button};

@(title: &str, description: &str, nav_state: &NavState, head: Content, body: Content)

@:root(title, description, nav_state.dark(), {
    <script src="@crate::statics_path(nav_js.name)"></script>
    @:head()
}, {
    @:bar(nav_state.dark(), "desktop-bar", {
        <div>
            @:link(&Link::current_tab("/").plain(true), {
                <h2>Hyaenidae</h2>
            })
        </div>
        <nav>
            @:nav(nav_state)
        </nav>
    })
    @:bar(nav_state.dark(), "mobile-bar", {
        @:link(&Link::current_tab("/").plain(true), {
            <h2>Hyaenidae</h2>
        })
        <h3 class="nav-link">@:link(&Link::current_tab(nav_state.href()).plain(true), { Nav })</h3>
    })
    <div class="home-content">
        @:centered(false, {
            @:body()
        })
    </div>
    <div class="nav-body @nav_state.class_string()">
        <div class="nav-link nav-background">
            @:link(&Link::current_tab(nav_state.href()).plain(true), {
                <div class="nav-background">
                </div>
            })
        </div>
        <nav class="nav-links">
            @:centered(false, {
                @:card(&Card::full_width().classes(&["nav"]).dark(nav_state.dark()), {
                    @:card_body({
                        @:nav(nav_state)
                    })
                    @:card_body({
                        <div class="nav-link">
                            @:button_group(&[
                                Button::primary_outline("Close").href(nav_state.href()).dark(nav_state.dark()),
                            ])
                        </div>
                    })
                })
            })
        </nav>
    </div>
})