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

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

        link(rel="stylesheet" type="text/css" href="style.css")
        script(src="script.js")
    body
        h1 image-to-bitsy
        p convert any image to a bitsy room

        #game-data.section
            h2 game data

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

        #image.section
            h2 image

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

            #croppie

        #palette.section
            h2 palette

            form#palettes
                table
                    tbody
                        tr.palette
                            td
                                input(type="radio" name="palette" checked)
                            td
                                label Palette 0
                            td
                                input(type="color" name="background" value="#3e2b20")
                            td
                                input(type="color" name="tile"       value="#d07038")
                            td
                                input(type="color" name="sprite"     value="#e55c44")

        #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#output(width=128, height=128)

            input#roomName(placeholder="room name")
            
            //-input(type="slider") 
            
            br

            //-label favour broad strokes | favour details

            br

            //-button Download