@use crate::ActixLoader;
@use crate::extensions::ProfileExt;
@use crate::nav::NavState;
@use crate::profile_list::ProfileListState;
@use crate::templates::layouts::wide;
@use hyaenidae_toolkit::{templates::button_group, Button};
@use hyaenidae_toolkit::{templates::{card, card_body, card_section}, Card};
@use hyaenidae_toolkit::templates::centered;
@use hyaenidae_toolkit::{templates::{icon, image}, Size};
@use hyaenidae_toolkit::{templates::link, Link};
@use hyaenidae_toolkit::templates::search;
@use hyaenidae_toolkit::{templates::{tab, tab_group}, Tab};
@use i18n_embed_fl::fl;

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

@:wide(loader, &fl!(loader, "discover-users-title"), &fl!(loader, "discover-users-subtitle"), nav_state, {}, {
    <div class="tabs">
        @:tab_group({
            @:tab(Tab::new("/browse"), {
                @fl!(loader, "submissions-tab")
            })
            @:tab(Tab::new("/discover").selected(true), {
                @fl!(loader, "profiles-tab")
            })
        })
    </div>
    @:centered(false, {
        <div class="profile-search">
            <form method="GET" action="@state.search_path()">
                @:search(state.search_input(loader).dark(nav_state.dark()), Button::primary(&fl!(loader, "discover-users-search-button")))
            </form>
        </div>
        @:card(&Card::full_width().dark(nav_state.dark()), {
            @for pview in state.profiles() {
                @:card_section({
                    <div class="profile-result">
                        @if let Some(img) = pview.banner_image(loader) {
                            <div class="profile-result--background">
                                @:image(&img)
                            </div>
                        }
                        <div class="profile-result--left">
                            <div class="profile-result--icon">
                                @:icon(&pview.icon(loader).size(Size::Small).dark(nav_state.dark()))
                            </div>
                            <div class="profile-result--meta">
                                <div class="profile-result--display-name">
                                    @if let Some(display_name) = pview.profile.display_name() {
                                        @:link(&Link::current_tab(&pview.profile.view_path()).plain(true), {
                                            @Html(display_name)
                                        })
                                    }
                                </div>
                                <div class="profile-result--handle">
                                    @:link(&Link::current_tab(&pview.profile.view_path()).plain(true), {
                                        @pview.profile.full_handle()
                                    })
                                </div>
                            </div>
                        </div>
                        <div class="profile-result--buttons">
                            @if !pview.profile.is_suspended() {
                                @:button_group(&state.profile_buttons(loader, pview))
                            }
                        </div>
                    </div>
                })
            }

            @if state.has_nav() {
                @:card_body({
                    @:button_group(&state.nav(loader))
                })
            }
        })
    })
})