doctype html
html(lang="en-gb")
    head
        meta(charset="utf-8")
        title tilesy
        link(rel="stylesheet" href="style.css")
    body
        h1
            span.background tilesy
        p
            span.background import 8×8 tile sheets into Bitsy games
        .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" autocomplete="off")
                    img#preview
                button.pagination.prev previous
                button.pagination.next next
            .page.extras
                h2 tiles
                label
                    | tile name prefix (optional)
                    input#prefix(type="text" placeholder="e.g. 'forest'" autocomplete="off")
                p.
                    to help you find your new tiles in Bitsy, #[br]
                    new tiles will be named #[span#tile-name-preview e.g. 'forest 1']

                h3 create alternate versions
                .checkboxes
                    label
                        input(type="checkbox")#invert
                        | inverted
                    label
                        input(type="checkbox")#flip
                        | flipped
                    label
                        input(type="checkbox")#mirror
                        | mirrored
                    label
                        input(type="checkbox")#rotate
                        | rotated
                p.
                    some tile sheets assume you will be able to flip and rotate their tiles.
                    Bitsy does not allow this, so it may be easier
                    to generate these alternate versions here.
                p.
                    don't worry - #[i tilesy] will not create duplicate tiles.
                button.pagination.prev#back-to-image previous
                button.pagination.next#import 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