@use crate::templates::{button_js, file_js};
@use crate::{templates::{layouts::home, submissions::image}, nav::NavState, submissions::SubmissionState};
@use hyaenidae_toolkit::{templates::{button_group, card, card_body, card_title, file_input, text_input}, Button, Card};

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

@:home("Update Submission", "Update information or images", nav_state, {
    @:button_js()
    @:file_js()
}, {
    @if !state.is_published() {
        @:card(&Card::full_width().dark(nav_state.dark()), {
            <form method="POST" action="@state.publish_path()">
                @:card_title({ Publish submission })
                @:card_body({
                    Publish this submission
                })
                @if let Some(error) = &state.publish_error {
                    @:card_body({ @error })
                }
                @:card_body({
                    @:button_group(&[
                        &Button::primary("Publish").dark(nav_state.dark()),
                    ])
                })
            </form>
        })
    }
    @:card(&Card::full_width().dark(nav_state.dark()), {
        <form method="POST" action="@state.update_path()">
            @:card_title({ Add submission information })
            @:card_body({
                @:text_input(&state.title)
                @:text_input(&state.description)
            })
            @:card_body({
                @:button_group(&[&Button::primary("Save").dark(nav_state.dark())])
            })
        </form>
    })
    @:card(&Card::full_width().dark(nav_state.dark()), {
        @:card_title({ Remove Files })
        @for tup in state.files().iter().enumerate() {
            @if let Some(file) = tup.1.pictrs() {
                <form method="POST" action="@state.remove_file_path()">
                    @:card_body({
                        <div class="columns">
                            <div class="columns--column">
                                @:image(file.key(), &state.submission.title(), tup.0)
                            </div>
                            <div class="columns--column">
                                <h3>Remove Image From Submission</h3>
                                @if let Some(error) = state.remove_file_error.get(&tup.1.id()) {
                                    <p class="error">@error</p>
                                }
                                <input type="hidden" name="file_id" value="file.id()" />
                                <div class="button-section">
                                    @:button_group(&[
                                        &Button::primary("Remove"),
                                    ])
                                </div>
                            </div>
                        </div>
                    })
                </form>
            }
        }
    })
    @:card(&Card::full_width().dark(nav_state.dark()), {
        <form method="POST" action="@state.add_file_path()" enctype="multipart/form-data">
            @:card_title({ Add file })
            @:card_body({
                @:file_input(&state.file)
            })
            @:card_body({
                @:button_group(&[
                    &Button::primary("Submit").dark(nav_state.dark()),
                ])
            })
        </form>
    })
    @:card(&Card::full_width().dark(nav_state.dark()), {
        @:card_title({ View Submission })
        @:card_body({
            @:button_group(&[
                &Button::primary("View").href(&state.view_path()).dark(nav_state.dark()),
            ])
        })
    })
    @:card(&Card::full_width().dark(nav_state.dark()), {
        @:card_title({ Danger })
        @if let Some(error) = &state.delete_error {
            @:card_body({ @error })
        }
        @:card_body({
            <form method="POST" action="@state.delete_path()">
                @:button_group(&[
                    &Button::primary_outline("Delete Submission").dark(nav_state.dark()),
                ])
            </form>
        })
    })
})