import gradio as gr
from gradio_toggle import Toggle

def update(input):
    output = input
    return output

with gr.Blocks(css=".gradio-container {max-width: 800px !important;}") as demo:
    title = gr.HTML("<h1><center>gradio_toggle demo</center></h1>")
    with gr.Row():
        shields = gr.HTML('<div style="display: flex; gap: 7px;"><a href="https://pypi.org/project/gradio-toggle/" target="_blank"><img alt="PyPI" src="https://img.shields.io/pypi/v/gradio-toggle"></a><a href="https://huggingface.co/spaces/dwancin/gradio_toggle" target="_blank"><img alt="Demo" src="https://img.shields.io/badge/%F0%9F%A4%97%20Demo-%23097EFF?style=flat&logoColor=black"></a><a href="https://github.com/dwancin/gradio-toggle" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Repository-white?logo=github&logoColor=black"></a></div>')
    with gr.Row():
        description = gr.Markdown("A toggle component that represents a boolean value, allowing users to switch between True and False states. Can function both as an input, to capture user interaction, and as an output, to display a boolean state.")
    with gr.Row():
        with gr.Column():
            input = Toggle(
                label="Input",
                value=False,
                info="Input version of the component",
                interactive=True,
            )
        with gr.Column():
            output = Toggle(
                label="Output",
                value=False,
                color="green",
                interactive=False,
                radius="sm", 
                transition=1,
            )
        
    input.change(fn=update, inputs=input, outputs=output)
        
if __name__ == "__main__":
    demo.launch()