@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::file_input;
@use hyaenidae_toolkit::templates::image;
@use hyaenidae_toolkit::templates::profile;
@use hyaenidae_toolkit::templates::text_input;

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

@:home("Profile Settings", &format!("{}'s profile", state.profile.name()), nav_state, {
    @:button_js()
    @:file_js()
}, {
    @:card(&Card::full_width().dark(nav_state.dark()), {
        @:profile(&state.profile().heading().dark(nav_state.dark()))
    })
    @:card(&Card::full_width().dark(nav_state.dark()), {
        @:card_title({ Profile Actions })
        @:card_body({
            @:button_group(&[
                Button::secondary("View Profile").href(&state.profile.view_path()).dark(nav_state.dark()),
                Button::secondary("Switch Profile").href("/profiles/change").dark(nav_state.dark()),
            ])
        })
    })
    @:card(&Card::full_width().dark(nav_state.dark()), {
        @:card_title({ Update Profile })
        @:card_body({
            <form method="POST" action="/profiles/update/bio">
                <div class="columns">
                    <div class="columns--column"></div>
                    <div class="columns--column">
                        <h3>Update Bio</h3>
                        <p>
                        Update the name that appears by your posts and on the top of your profile, and
                        the description that appears on your profile page.
                        </p>
                        @:text_input(&state.display_name(nav_state.dark()))
                        @:text_input(&state.description(nav_state.dark()))
                        <div class="button-section">
                            @:button_group(&[
                                Button::primary("Save").dark(nav_state.dark()),
                            ])
                        </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() {
                            @:image(&img)
                        } else {
                            <p>No icon set</p>
                        }
                    </div>
                    <div class="columns--column">
                        <h3>New Icon</h3>
                        <p>
                        This icon appears at the top of your profile, and next to any submissions or
                        comments you create
                        </p>
                        <div class="button-section">
                            <div class="toolkit-button-group">
                                @:file_input(&state.icon(nav_state.dark()))
                                @:button(&Button::primary("Save").dark(nav_state.dark()))
                            </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() {
                            @:image(&img)
                        } else {
                            <p>No banner set</p>
                        }
                    </div>
                    <div class="columns--column">
                        <h3>New Banner</h3>
                        <p>
                        This banner appears at the top of your profile on the profile page
                        </p>
                        <div class="button-section">
                            <div class="toolkit-button-group">
                                @:file_input(&state.banner(nav_state.dark()))
                                @:button(&Button::primary("Save").dark(nav_state.dark()))
                            </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>Require Login</h3>
                        <p>
                        Choose whether your profile is visible to everyone, or only logged-in users.
                        </p>
                        <div class="text-section">
                            <label for="require_login">
                                @if state.profile.login_required() {
                                    <input
                                        type="checkbox"
                                        name="require_login"
                                        checked
                                    />
                                } else {
                                    <input
                                        type="checkbox"
                                        name="require_login"
                                    />
                                }
                                <span>Require Login</span>
                            </label>
                        </div>
                        <div class="button-section">
                            @:button_group(&[
                                Button::primary("Save").dark(nav_state.dark()),
                            ])
                        </div>
                    </div>
                </div>
            </form>
        })
    })
    @:card(&Card::full_width().dark(nav_state.dark()), {
        @:card_title({ Danger })
        @:card_body({
            @:button_group(&[
                Button::primary_outline("Delete Profile").href("/profiles/delete").dark(nav_state.dark()),
            ])
        })
    })
})