use maud::{html, Markup};

use crate::credits::Row;
use crate::page::icon;

/// A reorderable list of credits that owns its add button and hidden form
/// field. Each row is a handle, or a name for the staff account's mods, and a
/// role; the finished order serialises into `name` on submit. `staff` is
/// whether people are named rather than credited by handle.
pub fn render(name: &str, rows: &[Row], staff: bool) -> Markup {
    html! {
        credits-input {
            template { (item(&Row::default(), staff)) }
            @for row in rows { (item(row, staff)) }
            button.secondary.add-person type="button" {
                (icon(icondata::LuPlus))
                "Add person"
            }
            input type="hidden" name=(name);
        }
    }
}

/// One credit. A handle is drawn like sign-in's, with the @ inside the field;
/// a name is just a field.
fn item(row: &Row, staff: bool) -> Markup {
    let value = (!row.value.is_empty()).then_some(&row.value);
    html! {
        div.item {
            span.handle draggable="true" aria-hidden="true" {
                (icon(icondata::LuGripVertical))
            }
            @if staff {
                div.person {
                    input type="text" placeholder="Name" aria-label="Credited person" value=[value];
                }
            } @else {
                div.person.input-icon {
                    (icon(icondata::LuAtSign))
                    input type="text" placeholder="alex.starhaven.dev" aria-label="Credited person"
                        autocapitalize="none" autocorrect="off" inputmode="url" spellcheck="false"
                        value=[value];
                }
            }
            input type="text" class="role" placeholder="Role (optional)"
                aria-label="Role" value=[(!row.role.is_empty()).then_some(&row.role)];
            button type="button" class="remove" aria-label="Remove person" {
                (icon(icondata::LuX))
            }
        }
    }
}