@use crate::templates::layouts::home;
@use crate::nav::NavState;
@use crate::profiles::EditProfileState;
@use crate::templates::{button_js, file_js};
@use hyaenidae_toolkit::{templates::button_group, Button};
@use hyaenidae_toolkit::{templates::{card, card_body, card_title}, Card};
@use hyaenidae_toolkit::templates::file_input;
@use hyaenidae_toolkit::templates::profile;

@(profile_state: &EditProfileState, nav_state: &NavState)

@:home("Create Profile", "Create a new profile on Hyaenidae", nav_state, {
    @:button_js()
    @:file_js()
}, {
    @:card(&Card::full_width().dark(nav_state.dark()), {
        <form method="POST" action="/profiles/create/banner" enctype="multipart/form-data">
            @:card_title({ Add a banner })
            @:card_body({
                <p>
                This banner will be displayed on your profile behind your icon.
                </p>
            })
            @if let Some(error) = &profile_state.banner_error {
                @:card_body({
                    <p>@error</p>
                })
            }
            @:card_body({
                @:file_input(&profile_state.banner(nav_state.dark()))
            })
            @:card_body({
                @:button_group(&[
                    Button::primary("Next").dark(nav_state.dark()),
                    Button::outline("Back").href("/profiles/create/icon").dark(nav_state.dark()),
                    Button::primary_outline("Skip").href("/profiles/create/require-login").dark(nav_state.dark()),
                    Button::primary_outline("Skip All").href("/profiles/create/done").dark(nav_state.dark()),
                ])
            })
        </form>
    })
    @:card(&Card::full_width().dark(nav_state.dark()), {
        @:card_title({ Preview })
        @:profile(&profile_state.profile().heading().dark(nav_state.dark()))
    })
})