extends layout

block body
	- if (locals.demo)
		div.notice-bar Ceci est un tableau de démonstration. N’y mettez rien d’important

	//div.config
	//	i.fa.fa-cog.fa-lg.faded-icon

	div.board-outline
		div#board
			div#board-doodles
			image#marker(src='images/marker.png')
			image#eraser(src='images/eraser.png')


			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.buttons
		i#create-card.fa.fa-plus-circle.fa-2x.bottom-icon
		i#smallify.fa.fa-expand.fa-2x.bottom-icon


	div.stickers
		div.sticker#sticker-red
		div.sticker#sticker-blue
		div.sticker#sticker-yellow
		div.sticker#sticker-green
		br
		div.sticker#sticker-pink
		div.sticker#sticker-lightblue
		div.sticker#sticker-orange
		div.sticker#sticker-purple
		//div.sticker#sticker-silverstar
		//div#addsticker
		br
		div.sticker#sticker-gold
		//	image(src="/images/stickers/sticker-gold.png")
		div.sticker#sticker-bluestar
		//	image(src="/images/stickers/sticker-bluestar.png")
		div.sticker#sticker-silverstar
		//	image(src="/images/stickers/sticker-silverstar.png")
		div.sticker#sticker-redstar
		//	image(src="/images/stickers/sticker-redstar.png")
		br
		div.sticker#nosticker


	div.names
		p connectés :
		//image#user-icon(src="/images/icons/cc/black/png/user_icon&16.png")
		input#yourname-input
		span.you-text (vous)
		ul#names-ul

	div.export
		h3 Exporter le tableau
		button#export-txt.btn.btn-primary Format texte
		button#export-csv.btn.btn-primary Format CSV
		button#export-json.btn.btn-primary Format JSON (pour import dans Framemo)

	div.import
		h3 Importer un tableau
		div.form-inline
			div.form-group
				label(for="import-input") fichier JSON à importer
				input(type="file")#import-input.form-control
				button#import-file.btn.btn-primary Importer

	//div.trash
	//	i.fa.fa-trash-o.fa-lg.faded-icon
	hr(role="presentation")
	div.row
		div#tuto-faq.col-md-4
			h2 Prise en main
			p.text-center(role="presentation")
				span.glyphicon.glyphicon-question-sign
			div#aboutbox
				p
					b.violet Fra
					b.vert memo
					span  est un service en ligne libre et minimaliste qui permet d’éditer et d’organiser collaborativement des idées sous forme de notes
				ol
					li Créez un tableau en choisissant son nom (attention, ne choisissez pas un nom trop générique, il risque d’être choisi par d’autres personnes)
					li Votre tableau est sauvegardé en temps réel, il vous suffit de partager son adresse web.
					li Créez une note en cliquant sur le (+) à gauche (cliquez plusieurs fois pour en changer la couleur), puis déplacez la sur le tableau. Double-cliquez pour l’éditer.
					li Déplacez-les en cliquant dessus et en les faisant glisser vers leur destination
					li Éditez-les en double-cliquant dessus
					li Les gommettes (en bas à droite) peuvent être placées sur les notes, pour représenter — par exemple — une personne ou une priorité.
					li Organisez votre tableau avec des colonnes ! Pour ajouter ou supprimer une colonne, cliquez sur les (+) ou (-) qui apparaissent en plaçant votre souris à droite du tableau. Double-cliquez sur le nom d’une colonne pour la renommer.

		div#le-logiciel.col-md-4
			h2 Le logiciel
			p.text-center(role="presentation")
				span.glyphicon.glyphicon-cloud
			p
				b.violet Fra
				b.vert memo
				span  repose sur le logiciel <a href="https://github.com/aliasaria/scrumblr">Scrumblr</a> développé par Ali Asaria.
			p Scrumblr et ses composants sont <a href="https://github.com/aliasaria/scrumblr/blob/master/LICENSE.txt">sous licence libre</a>.
			p
				b.violet Fra
				b.vert memo
				span  requiert l’activation du Javascript pour fonctionner ainsi qu’un navigateur web récent :
			ul
				li <a href="http://www.mozilla.org/firefox/">Firefox</a>,
				li Opera,
				li Chrome,
				li Safari…
			p L’utilisation d’Internet Explorer n’est pas recommandée.

		div#jardin.col-md-4
			h2 Cultivez votre jardin
			p.text-center(role="presentation")
				span.glyphicon.glyphicon-tree-deciduous
			p Pour participer au développement du logiciel, proposer des améliorations ou simplement le télécharger, rendez-vous sur <a href="https://github.com/aliasaria/scrumblr">le site de développement</a>.
			p Si vous souhaitez installer ce logiciel pour votre propre usage et ainsi gagner en autonomie, nous vous aidons sur :
			p.text-center <a href="http://framacloud.org/cultiver-son-jardin/installation-de-scrumblr/" class="btn btn-success"><span class="glyphicon glyphicon-tree-deciduous"></span> framacloud.org</a></p>