doctype html
html
    head
        // lodash
        script(src="includes/lodash.min.js")

        // jquery
        script(src="includes/jquery.min.js")
        
        // croppie
        link(rel="stylesheet" href="includes/croppie.css")
        script(src="includes/croppie.js")

        // main stuff
        link(rel="stylesheet" type="text/css" href="includes/style.css")
        script(src="includes/script.js")
    body
        header
            h1 image-to-bitsy
            p convert any image to a #[a(href="https://ledoux.itch.io/bitsy") bitsy] room
            p.
                #[a(href="https://github.com/synth-ruiner/bitsy-image-to-room") about]
                |
                please contact me if you have any issues:
                #[a(href="https://twitter.com/synth_ruiner") twitter],
                #[a(href="mailto:max@tinybird.info") email]

        .flex-container
            #game-data.section
                h2 game data

                textarea#bitsy-data(placeholder="Bitsy data or html")
                    include includes/default.bitsy

                p
                    input.game-data(type="file")
                p paste or upload your game data (or html) here
                p (maybe make a backup first)

            #image.section
                h2 image

                #croppie

                input#imageUpload(type="file" accepts="image/*")

            #palette.section
                h2 palette

                form#palettes
                    table
                        tbody

            #crop.section
                h2 preview

                canvas#preview(width=128, height=128)

                input#brightness(type="range" min=-255 max=255 value=0)

                label(for="brightness") brightness

                //- to do
                    input#dithering(type="checkbox")
                    label(for="dithering") dithering

                //- to do
                    input#smoothing(type="checkbox")
                    label(for="smoothing") smoothing

            #output.section
                h2 output

                canvas#room-output(width=128, height=128)

                label#never never
                input#threshold(type="range" min=0 max=64 value=64)
                label#always  always
                br
                label(for="threshold") create new tiles
                br

                input#roomName(type="text", placeholder="room name")

                button#save write to game data

                //- to do

                    //-label favour broad strokes | favour details

                    br

                    //-button Download