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/croppie.css")
        script(src="includes/croppie.min.js")
    body
        header
            h1
                | pixsy
                //img(alt="pixsy" src="includes/pixsy.png")
            p.
                convert images to Bitsy rooms
                |
                #[a(href="http://tinybird.info/image-to-bitsy/old/" target="_blank") 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#page-image
                h2 image

                .image-container
                    input#image(type="file" accept="image/*")
                    #crop(style="display: none;")

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

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

                                label
                                    | brightness
                                    input#brightness(type="range" min=-96 max=96 value=0)
                            td(style="vertical-align: top;")
                                label
                                    | name (optional)
                                    input#room-name(type="text" placeholder="e.g. 'bedroom'" autocomplete="off")

                                label
                                    | palette
                                    select#palette

                                #new-palette(style="display: none;")
                                    .half
                                        input#colour-background(type="color" value="#000000")
                                    .half
                                        input#colour-foreground(type="color" value="#ffffff")

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

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

                button.pagination.prev#back-to-image previous
                button.pagination.next#room-next add room
            .page.download
                p#added

                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