@use crate::ActixLoader;
@use crate::nav::NavState;
@use hyaenidae_toolkit::templates::bar;
@use hyaenidae_toolkit::templates::{button, button_group};
@use hyaenidae_toolkit::{templates::icon, Size};
@use hyaenidae_toolkit::{templates::link, Link};
@use i18n_embed_fl::fl;

@(loader: &ActixLoader, nav_state: &NavState)

@:bar(nav_state.dark(), "desktop-bar", {
    <div>
        @:link(&Link::current_tab("/").plain(true), {
            <h2>@fl!(loader, "site-name")</h2>
        })
    </div>
    <nav>
        @if let Some(profile) = nav_state.profile() {
            <div class="profile-nav">
                <div class="toolkit-button-group">
                    @:button(&nav_state.submission_button(loader))
                    @:button(&nav_state.browse_button(loader))
                    @if nav_state.has_notifications() {
                        <div class="toolkit-button toolkit-button__link">
                            <span><i class="fa fa-bell"></i></span>
                            @:link(&Link::current_tab(nav_state.notifications_path()).plain(true).class("toolkit-button--action").title("Notifications"), {
                                <i class="fa fa-bell"></i>
                            })
                        </div>
                    }
                </div>
                @:icon(&profile.icon(loader).size(Size::Tiny).class("bar-icon").dark(true))
            </div>
        } else {
            <div class="narrow-nav">
                @:button_group(&nav_state.narrow_buttons(loader))
            </div>
            <div class="wide-nav">
                @:button_group(&nav_state.buttons(loader))
            </div>
        }
    </nav>
})
@:bar(nav_state.dark(), "mobile-bar", {
    @:link(&Link::current_tab("/").plain(true), {
        <h2>@fl!(loader, "site-name")</h2>
    })
    <h3 class="nav-link">
        @:link(&Link::current_tab(nav_state.href()).plain(true), {
            @fl!(loader, "nav-text")
        })
    </h3>
})