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
        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

        #game-data.section
            h2 game data

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

            p paste your game data 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

            br
            br

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

            //- 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)

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

            button#save write to game data

            //- to do

                //-label favour broad strokes | favour details

                br

                //-button Download