doctype html
html(lang="en-gb")
    head
        meta(charset="utf-8")
        title pixsy
        link(rel="stylesheet" href="includes/style.css")
        link(rel="stylesheet" href="includes/cropper.css")
        script(src="includes/cropper.min.js")
    body
        h1
            | pixsy
            //img(alt="pixsy" src="includes/pixsy.png")
        p.
            convert images to Bitsy rooms
            |
            #[a(href="./old/") old version]
            |
            #[a(href="mailto:max@tinybird.info") email]
            |
            #[a(href="https://twitter.com/synth_ruiner") twitter]
        .pages
            .page#start
                button.normal.pagination.next#new create a new bitsy game
                button.normal.pagination.next#load load an existing bitsy game
            .page.game-data
                h2 game data

                input#game(type="file" autocomplete="off")
                br

                textarea#game-data(
                    placeholder="Paste your game data here or use the file chooser button above"
                    autocomplete="off"
                )

                button.pagination.prev previous
                button.pagination.next#game-data-next(disabled=true) next
            .page.image
                h2 image

                .image-container
                    input#image(type="file" accept="image/*")
                    #crop

                button.pagination.prev previous
                button.pagination.next#image-next(disabled=true) next
            .page.room
                h2 room

                table
                    tbody
                        tr
                            td(style="width: 60%")
                                img#preview(alt="preview")
                                br

                                label
                                    | brightness
                                    input#brightness(type="range" min=-64 max=64 value=0)
                            td
                                label
                                    | palette
                                    select#palette

                                label
                                    input#dither(type="checkbox")
                                    | dither
                                br

                                label
                                    | name (optional)
                                    input#room-name(type="text" placeholder="e.g. 'bedroom'" autocomplete="off")

                button.pagination.prev#back-to-image previous
                button.pagination.next#room-next next
            .page.download
                h2 download

                textarea#output(autocomplete="off")
                br

                button#download download

                button.pagination.prev#add add another image
                button.pagination.start#reset start again
        script(type="module")
            include script.js