extends layout
block header
	div#create-card.post-it-actions
		a.add-post-it.add-white-card(href="#", data-color="white")
			i.fa.fa-fw.fa-lg.fa-plus-circle(title='Ajouter une note blanche')
			img(alt="blanc", src="images/white-card.png")
		a.add-post-it.add-yellow-card(href="#", data-color="yellow")
			i.fa.fa-fw.fa-lg.fa-plus-circle(title='Ajouter une note jaune')
			img(alt="jaune", src="images/yellow-card.png")
		a.add-post-it.add-green-card(href="#", data-color="green")
			i.fa.fa-fw.fa-lg.fa-plus-circle(title='Ajouter une note verte')
			img(alt="vert", src="images/green-card.png")
		a.add-post-it.add-blue-card(href="#", data-color="blue")
			i.fa.fa-fw.fa-lg.fa-plus-circle(title='Ajouter une note bleu')
			img(alt="bleu", src="images/blue-card.png")
		div.stickers
				div.sticker#sticker-red(title='Glisser-déposer la pastille rouge')
				div.sticker#sticker-blue(title='Glisser-déposer la pastille bleue')
				div.sticker#sticker-yellow(title='Glisser-déposer la pastille jaune')
				div.sticker#sticker-green(title='Glisser-déposer la pastille verte')
				div.sticker#sticker-pink(title='Glisser-déposer la pastille rose')
				div.sticker#sticker-lightblue(title='Glisser-déposer la pastille bleu clair')
				div.sticker#sticker-orange(title='Glisser-déposer la pastille orange')
				div.sticker#sticker-purple(title='Glisser-déposer la pastille violette')
				br
				div.sticker#sticker-gold(title='Glisser-déposer une étoile dorée')
				div.sticker#sticker-bluestar(title='Glisser-déposer une étoile bleue')
				div.sticker#sticker-silverstar(title='Glisser-déposer une étoile argentée')
				div.sticker#sticker-redstar(title='Glisser-déposer une étoile rouge')
				div.sticker#nosticker(title='Supprimer les pastilles ou les étoiles d\'une note')
	div.actions
		a#smallify(href="#size", title="Changer la taille des post-it")
			i.fa.fa-fw.fa-lg.fa-search-plus
		a#full-page(href="#fullscreen", aria-hidden="true", title="Plein écran")
			i.fa.fa-fw.fa-lg.fa-expand
		a.toggle-nav(href="#share",aria-hidden="true", title="Partager le tableau")
			i.fa.fa-fw.fa-lg.fa-share-alt
		a.toggle-nav(href="#settings", aria-hidden="true", title="Options")
			i.fa.fa-fw.fa-lg.fa-cog

block body
	div.container
		div.board-container
			div.board-outline
				div#board
					div#board-doodles
					table#board-table.board-table
						tr
							td#icon-col(width='1%')
								image#add-col.col-icon(width='20', height='20', src='images/icons/iconic/raster/black/plus_alt_32x32.png' alt='Ajouter une colonne')
								image#delete-col.col-icon(width='20', height='20', src='images/icons/iconic/raster/black/minus_alt_32x32.png' alt='Supprimer une colonne')

		div.names
			p <i class="fa fa-fw fa-lg fa-users"></i> connectés :
			input#yourname-input
			span.you-text (vous)
			ul#names-ul