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")
                br
                textarea#game-data(placeholder="Paste your game data here or use the file chooser button above")
                button.pagination.prev previous
                button.pagination.next#game-data-next(disabled=true) next
            .page.image
                h2 image
                .image-container
                    input#image(type="file")
                    img#preview
                button.pagination.prev previous
                button.pagination.next next
            .page.extras
                h2 tiles
                label
                    | tile name prefix
                    input#prefix(type="text" placeholder="e.g. 'forest'")
                p.
                    to help you find your new tiles in Bitsy, #[br]
                    new tiles will be named #[span#tile-name-preview e.g. 'forest 1']
                br

                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 tiles automatically in #[i tilesy].
                p.
                    #[i tilesy] will not create duplicate tiles,
                    so don't worry about ending up with numerous identical tiles.
                button.pagination.prev previous
                button.pagination.next#import next
            .page.download
                h2 download
                textarea#output
                br
                button#download download
                button.pagination.prev#add add another image
                button.pagination.start#reset start again
        script(type="module")
            include script.js