@use plume_models::CONFIG;
@use plume_models::instance::Instance;
@use std::path::Path;
@use crate::template_utils::*;
@use crate::routes::*;

@(ctx: BaseContext, title: String, head: Content, header: Content, content: Content)

<!DOCTYPE html>
<html class="@ctx.2.clone().and_then(|u| u.preferred_theme).unwrap_or_else(|| CONFIG.default_theme.clone())">
    <head>
        <meta charset="utf-8" />
        <title>@title ⋅ @i18n!(ctx.1, "Plume")</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="@uri!(plume_static_files: file = Path::new("css").join(ctx.2.clone().and_then(|u| u.preferred_theme).unwrap_or_else(|| CONFIG.default_theme.clone())).join("theme.css"), build_id = CACHE_NAME)" />
        <link rel="manifest" href="@uri!(instance::web_manifest)" />
        <link rel="icon" type="image/png" href="@uri!(plume_static_files: file = CONFIG.logo.favicon.as_str(), build_id = CACHE_NAME)">
        <meta content='#282c37' name='theme-color'/>
        @:head()
    </head>
    <body>
        <header>
            <nav id="menu">
                <a href="#" aria-label="@i18n!(ctx.1, "Menu")" title="@i18n!(ctx.1, "Menu")" role="button" aria-haspopup="true" aria-controls="content" aria-epanded="false"><i class="icon icon-menu"></i></a>
            </nav>
            <div id="content" role="menu" aria-labelled-by="menu">
                <nav>
                    <a href="@uri!(instance::index)" class="title">
                        <img src="@uri!(plume_static_files: file = CONFIG.logo.main.as_str(), build_id = CACHE_NAME)">
                        <p>@i18n!(ctx.1, "Plume")</p>
                    </a>
                    <hr/>
                    @:header()
                </nav>
                <nav>
                    @if ctx.2.is_some() {
                        <a href="@uri!(search::search: _)">
                            <i class="icon icon-search"></i>
                            <span class="mobile-label">@i18n!(ctx.1, "Search")</span>
                        </a>
                        <a href="@uri!(user::dashboard)">
                            <i class="icon icon-home" aria-label="@i18n!(ctx.1, "Dashboard")"></i>
                            <span class="mobile-label">@i18n!(ctx.1, "Dashboard")</span>
                        </a>
                        <a href="@uri!(notifications::notifications: page = _)">
                            <i class="icon icon-bell" aria-label="@i18n!(ctx.1, "Notifications")"></i>
                            <span class="mobile-label">@i18n!(ctx.1, "Notifications")</span>
                        </a>
                        <a href="@uri!(session::delete)">
                            <i class="icon icon-log-out" aria-label="@i18n!(ctx.1, "Log Out")"></i>
                            <span class="mobile-label">@i18n!(ctx.1, "Log Out")</span>
                        </a>
                        <a href="@uri!(user::me)" title="@i18n!(ctx.1, "My account")">
                            @avatar(ctx.0, &ctx.2.clone().unwrap(), Size::Small, false, ctx.1)
                            <span class="mobile-label">@i18n!(ctx.1, "My account")</span>
                        </a>
                    } else {
                        <a href="@uri!(search::search: _)">
                            <i class="icon icon-search"></i>
                            <span class="mobile-label">@i18n!(ctx.1, "Search")</span>
                        </a>
                        <a href="@uri!(session::new: m = _)">
                            <i class="icon icon-log-in"></i>
                            <span class="mobile-label">@i18n!(ctx.1, "Log In")</span>
                        </a>
                        <a href="@uri!(user::new)">
                            <i class="icon icon-user-plus"></i>
                            <span class="mobile-label">@i18n!(ctx.1, "Register")</span>
                        </a>
                    }
                </nav>
            </div>
        </header>
        <div class="messages">
            @if let Some(ref message) = ctx.3 {
                <p class="flash-message @message.0">@message.1</p>
            }
        </div>
        <main>
            @:content()
        </main>
        <footer>
            <hr/>
            <div>
                <h3>@Instance::get_local().map(|i| i.name).unwrap_or_default()</h3>
                <a href="@uri!(instance::about)">@i18n!(ctx.1, "About this instance")</a>
                <a href="@uri!(instance::privacy)">@i18n!(ctx.1, "Privacy policy")</a>
                @if ctx.2.clone().map(|u| u.is_admin()).unwrap_or(false) {
                    <a href="@uri!(instance::admin)">@i18n!(ctx.1, "Administration")</a>
                }
            </div>
            <div>
                <h3>@concat!("Plume ", env!("CARGO_PKG_VERSION"))</h3>
                <a href="https://docs.joinplu.me">@i18n!(ctx.1, "Documentation")</a>
                <a href="https://github.com/Plume-org/Plume">@i18n!(ctx.1, "Source code")</a>
                <a href="https://matrix.to/#/#plume-blog:matrix.org">@i18n!(ctx.1, "Matrix room")</a>
            </div>
        </footer>
        <script type="module">
          import init from '@uri!(plume_static_files: file = "plume_front.js", build_id = CACHE_NAME)';
          (async () => await init())();
        </script>
    </body>
</html>
