"""
V-Model Vue Ref Dialog Test
Uses v-model for reactive two-way data binding instead of DOM manipulation.
"""

import badgui as bg

with bg.page("/", "VModelDialog", "V-Model Dialog Test"):
    with bg.column() as main_col:
        main_col.classes("q-pa-lg q-gutter-md")
        bg.label("V-Model Vue Ref Dialog Test").classes("text-h3 q-mb-lg")
        
        # Simple dialog with simplified card
        with bg.dialog() as my_dialog:
            with bg.card(title="Hello from Dialog!"):
                # Use v-model for reactive binding instead of Vue ref
                greeting_label = bg.label("Loading...")
                greeting_label.bind_text("greetingMessage")  # Bind to reactive variable
                
                # Input with v-model binding
                name_input = bg.input("Your name")
                name_input.bind_value("userName")  # Bind to reactive variable
                name_input.classes("q-mb-md")
                
                # Actions can go directly in the card
                with bg.row():
                    bg.button("Say Hello").on_click("sayHello").classes("q-btn-primary q-mr-sm")
                    bg.button("Close").on_click("closeDialog").classes("q-btn-secondary")
        
        my_dialog.vue_ref("myDialog")
        
        # Main content - use reactive binding for status
        status_label = bg.label("Loading...")
        status_label.bind_text("statusMessage")  # Bind to reactive variable
        status_label.classes("text-h6 q-mb-md")
        
        bg.button("Open Dialog").on_click("openDialog").classes("q-btn-primary")

# JavaScript functions - V-Model version with reactive variables
    bg.script("vmodel.js")

if __name__ == "__main__":
    print("🧪 V-Model Vue Ref Dialog Test")
    print("Testing v-model reactive data binding instead of DOM manipulation")
    
    # Build to examine output
    #bg.app.build("./vmodel-vue-ref-output", "vmodel-vue-ref")
    
    # Run dev server  
    bg.dev(port=3019)