@use crate::{templates::{layouts::home, profiles::view}, profiles::Profile};
@use hyaenidae_accounts::LogoutState;
@use hyaenidae_toolkit::{templates::{button_group, card, card_body, card_title, statics::button_js}, Button, Card};

@(require_login: bool, error: Option<String>, profile: &Profile, logout: LogoutState)

@:home("Create Profile", "Create a new profile on Hyaenidae", &Some(logout), {
    <script src="/toolkit/@button_js.name"></script>
}, {
    @:card(&Card::full_width().classes(&["account-page"]), {
        <form method="POST" action="/profiles/create/require-login">
            @:card_title({ Require Login })
            @:card_body({
                <p>
                If you would like to hide your profile from people without accounts, you
                can check this box to restrict your profile page to logged in users.
                </p>
            })
            @if let Some(error) = error {
                @:card_body({
                    <p>@error</p>
                })
            }
            @:card_body({
                <label for="require_login">
                    @if require_login {
                        <input
                            type="checkbox"
                            name="require_login"
                            checked
                        />
                    } else {
                        <input
                            type="checkbox"
                            name="require_login"
                        />
                    }
                    <span>Require Login</span>
                </label>
            })
            @:card_body({
                @:button_group(&[
                    &Button::primary("Next"),
                    Button::outline("Back").href("/profiles/create/banner"),
                    Button::primary_outline("Skip").href("/profiles/create/done"),
                ])
            })
        </form>
    })
    @:card(&Card::full_width().classes(&["account-page"]), {
        @:card_title({ Preview })
        @:view("", profile)
    })
})