@use crate::extensions::ProfileExt;
@use crate::nav::NavState;
@use crate::profile_list::ProfileListState;
@use crate::templates::layouts::home;
@use hyaenidae_toolkit::{templates::button_group, Button};
@use hyaenidae_toolkit::{templates::{card, card_body, card_section}, Card};
@use hyaenidae_toolkit::templates::{icon, image};
@use hyaenidae_toolkit::{templates::link, Link};
@use hyaenidae_toolkit::templates::search;

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

@:home("Discover Users", "Find users on Hyaenidae", nav_state, {}, {
    <div class="profile-search">
        <form method="GET" action="@state.search_path()">
            @:search(state.search_input().dark(nav_state.dark()), Button::primary("Search"))
        </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() {
                        <div class="profile-result--background">
                            @:image(&img)
                        </div>
                    }
                    <div class="profile-result--left">
                        <div class="profile-result--icon">
                            @:icon(&pview.icon().small(true).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(pview))
                        }
                    </div>
                </div>
            })
        }

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