/// TEMPORARY AI GENERATED FRONTEND \\\
///   NOT TO BE USED IN PRODUCTION  \\\

import { Theme } from "../theme.slint";

// Single-line text field with placeholder, built on the TextInput primitive so
// it matches the theme instead of the std-widgets style.
export component TextField inherits Rectangle {
    in property <string> placeholder;
    in property <bool> password;
    in-out property <string> text <=> input.text;
    callback accepted();
    public function focus-field() {
        input.focus();
    }

    height: 40px;
    border-radius: 4px;
    background: Theme.rail-bg;
    border-width: 1px;
    border-color: input.has-focus ? Theme.accent : Theme.divider;

    input := TextInput {
        x: 12px;
        y: 0px;
        width: parent.width - 24px;
        height: parent.height;
        vertical-alignment: center;
        color: Theme.text-normal;
        font-size: 15px;
        single-line: true;
        input-type: root.password ? InputType.password : InputType.text;
        selection-background-color: Theme.accent;
        accepted => {
            root.accepted();
        }
    }

    if input.text == "": Text {
        x: 12px;
        width: parent.width - 24px;
        height: parent.height;
        text: root.placeholder;
        color: Theme.text-faint;
        font-size: 15px;
        vertical-alignment: center;
    }
}