use leptos::prelude::*;

#[component]
pub fn DemoResizable() -> impl IntoView {
    view! {
        <style>
            {".direction__rtl {
            direction: rtl;
            }
            
            #behind-scene-toggle:checked ~ .wrapper .resizer {
            opacity: 1;
            }
            "}
        </style>

        <div>
            <input type="checkbox" id="behind-scene-toggle" class="hidden" />
            <div class="flex h-screen">
                <div class="flex-1 h-screen p-2.5 overflow-y-scroll">

                    <h1>CSS-only resizable panels</h1>
                    <p>
                        This is an example of a CSS-only resizeable panels solution. It uses a combination of the flexbox model, CSS
                        <code>resize</code>property, and <code>position: absolute</code>
                        for the resized panel contents.
                    </p>
                    <h2>No JavaScript!</h2>
                    <p>This is a pure CSS solution!</p>
                    <h2>Browser support</h2>
                    <p>
                        <a href="https://caniuse.com/css-resize">
                            All browsers supporting <code>resize</code>
                        </a>
                    </p>
                </div>
                <div class="aside   relative min-w-[300px] bg-red-200">
                    <div class="aside-inner m-0 flex flex-col absolute left-2.5 right-2.5 top-0 bottom-0 z-2 overflow-y-scroll">

                        <h1>Side Panel</h1>
                        <p>
                            Drag left/right the <span class="resize-icon">"⇆"</span>
                            handle in order to resize this panel!
                        </p>
                        <label class="cursor-pointer" for="behind-scene-toggle">
                            Click here to see behind the scene!
                        </label>
                    </div>
                    <div class="resize-icon top-1/2 h-3 margin-left-[-7px]  m-0  absolute inline-block p-0.5 leading-3 text-white bg-black rounded-full">
                        "⇆"
                    </div>
                    <div class="relative top-1/2 h-3 margin-left-[-7px] w-full overflow-hidden bg-red-500 opacity-0 resize-x direction__rtl resizer cursor-ew-resize"></div>
                </div>
            </div>
        </div>
    }
}