@use crate::ActixLoader;
@use crate::extensions::ProfileExt;
@use crate::nav::NavState;
@use crate::profiles::EditProfileState;
@use crate::templates::{button_js, file_js};
@use crate::templates::layouts::home;
@use hyaenidae_toolkit::{templates::{button, button_group}, Button};
@use hyaenidae_toolkit::{templates::{card, card_body, card_title}, Card};
@use hyaenidae_toolkit::templates::checkbox;
@use hyaenidae_toolkit::templates::file_input;
@use hyaenidae_toolkit::templates::image;
@use hyaenidae_toolkit::templates::profile;
@use hyaenidae_toolkit::templates::text_input;
@use i18n_embed_fl::fl;

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

@:home(loader, &fl!(loader, "profile-settings-title"), &fl!(loader, "profile-settings-subtitle", profileName = state.profile.name()), nav_state, {
    @:button_js()
    @:file_js()
}, {
    @:card(&Card::full_width().dark(nav_state.dark()), {
        @:profile(&state.profile().heading(loader).dark(nav_state.dark()))
    })
    @:card(&Card::full_width().dark(nav_state.dark()), {
        @:card_title({
            @fl!(loader, "profile-actions-heading")
        })
        @:card_body({
            @:button_group(&state.buttons(loader))
        })
    })
    @:card(&Card::full_width().dark(nav_state.dark()), {
        @:card_title({
            @fl!(loader, "update-profile-heading")
        })
        @:card_body({
            <form method="POST" action="/profiles/update/bio">
                <div class="columns">
                    <div class="columns--column"></div>
                    <div class="columns--column">
                        <h3>@fl!(loader, "update-bio-heading")</h3>
                        <p>@fl!(loader, "update-bio-description")</p>
                        @:text_input(&state.display_name(loader).dark(nav_state.dark()))
                        @:text_input(&state.description(loader).dark(nav_state.dark()))
                        <div class="button-section">
                            @:button_group(&[
                                Button::primary(&fl!(loader, "update-bio-button")),
                            ])
                        </div>
                    </div>
                </div>
            </form>
        })
        @:card_body({
            <form
                method="POST"
                action="/profiles/update/icon"
                enctype="multipart/form-data"
            >
                @if let Some(error) = &state.icon_error {
                    <p class="error">@error</p>
                }
                <div class="columns">
                    <div class="columns--column">
                        @if let Some(img) = state.icon_image(loader) {
                            @:image(&img)
                        } else {
                            <p>@fl!(loader, "update-icon-no-icon")</p>
                        }
                    </div>
                    <div class="columns--column">
                        <h3>@fl!(loader, "update-icon-heading")</h3>
                        <p>@fl!(loader, "update-icon-description")</p>
                        <div class="button-section">
                            <div class="toolkit-button-group">
                                @:file_input(&state.icon(loader).dark(nav_state.dark()))
                                @:button(&Button::primary(&fl!(loader, "update-icon-button")))
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        })
        @:card_body({
            <form
                method="POST"
                action="/profiles/update/banner"
                enctype="multipart/form-data"
            >
                @if let Some(error) = &state.banner_error {
                    <p class="error">@error</p>
                }
                <div class="columns">
                    <div class="columns--column">
                        @if let Some(img) = state.banner_image(loader) {
                            @:image(&img)
                        } else {
                            <p>@fl!(loader, "update-banner-no-banner")</p>
                        }
                    </div>
                    <div class="columns--column">
                        <h3>@fl!(loader, "update-banner-heading")</h3>
                        <p>@fl!(loader, "update-banner-description")</p>
                        <div class="button-section">
                            <div class="toolkit-button-group">
                                @:file_input(&state.banner(loader).dark(nav_state.dark()))
                                @:button(&Button::primary(&fl!(loader, "update-banner-button")))
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        })
        @:card_body({
            <form method="POST" action="/profiles/update/require-login">
                @if let Some(error) = &state.login_required_error {
                    <p class="error">@error</p>
                }
                <div class="columns">
                    <div class="columns--column"></div>
                    <div class="columns--column">
                        <h3>@fl!(loader, "update-require-login-heading")</h3>
                        <p>@fl!(loader, "update-require-login-description")</p>
                        <div class="text-section">
                            @:checkbox("require_login", &fl!(loader, "update-require-login-checkbox"), state.profile.login_required())
                        </div>
                        <div class="button-section">
                            @:button_group(&[
                                Button::primary(&fl!(loader, "update-require-login-button")),
                            ])
                        </div>
                    </div>
                </div>
            </form>
        })
    })
    @:card(&Card::full_width().dark(nav_state.dark()), {
        @:card_title({
            @fl!(loader, "danger-heading")
        })
        @:card_body({
            @:button_group(&[
                Button::primary_outline(&fl!(loader, "delete-profile-button")).href("/profiles/delete"),
            ])
        })
    })
})