.modallayer#modal-editor-image
	.modallayer-content
		
		.columns
			.column
				h3 Insert Image

			.column.is-narrow.editor-modal-load(v-bind:class="{ 'is-active': isLoading }")
				span {{ isLoadingText }}
				i
					
			.column.is-narrow
				.control.is-grouped
					p.control
						a.button.is-dark.is-outlined(v-on:click="newFolder")
							span.icon.is-small: i.fa.fa-folder
							span New Folder
					.control.has-addons
						a.button.is-info.is-outlined#btn-editor-uploadimage(v-on:click="uploadImage")
							span.icon.is-small: i.fa.fa-upload
							span Upload Image
							label
								input(type="file", multiple)
						a.button.is-info.is-outlined(v-on:click="fetchFromUrl")
							span.icon.is-small: i.fa.fa-download
							span Fetch from URL
			.column.is-narrow
				.control.is-grouped
					p.control
						a.button.is-warning.is-outlined(v-on:click="cancel") Cancel
					p.control
						a.button.is-primary.is-outlined(v-on:click="insertImage") Insert Image

		.columns
			.column.is-one-quarter(style={'max-width':'350px'})
				.box.editor-modal-folderlist
					aside.menu
						p.menu-label
							| Folders
						ul.menu-list
							li(v-for="fld in folders")
								a(v-on:click="selectFolder(fld)", v-bind:class="{ 'is-active': currentFolder === fld }")
									span.icon.is-small: i.fa.fa-folder
									span /{{ fld }}
				.box.editor-modal-imagealign
					.control.is-grouped
						.control
							span Alignment
						.control.has-addons
							a.button.is-primary(title="Left", v-on:click="selectAlignment('left')", v-bind:class="{ 'is-outlined': currentAlign !== 'left' }")
								span.icon.is-small: i.fa.fa-align-left
							a.button.is-primary(title="Center", v-on:click="selectAlignment('center')", v-bind:class="{ 'is-outlined': currentAlign !== 'center' }")
								span.icon.is-small: i.fa.fa-align-center
							a.button.is-primary(title="Right", v-on:click="selectAlignment('right')", v-bind:class="{ 'is-outlined': currentAlign !== 'right' }")
								span.icon.is-small: i.fa.fa-align-right
						.control
							a.button.is-primary(title="Page Logo", v-on:click="selectAlignment('logo')", v-bind:class="{ 'is-outlined': currentAlign !== 'logo' }")
								span.icon.is-small: i.fa.fa-external-link-square
			.column.editor-modal-imagechoices
				figure(v-for="img in images", v-bind:class="{ 'is-active': currentImage === img.uid }", v-on:click="selectImage(img.uid)")
					img(v-bind:src="'/uploads/t/' + img.uid + '.png'")
					span: strong {{ img.basename }}
					span {{ img.filesize | filesize }}
				em(v-show="images.length < 1") This folder is empty.

	.modal(v-bind:class="{ 'is-active': newFolderShow }")
		.modal-background
		.modal-container
			.modal-content
				.card.is-fullwidth
					header.card-header
						p.card-header-title New Folder
					.card-content
						.content
							label.label Enter the new folder name:
							p.control
								input.input#txt-editor-newfoldername(type='text', placeholder='folder name', v-model='newFolderName', v-on:keyup.enter="newFolderCreate", v-on:keyup.esc="newFolderDiscard")
								span.help.is-danger(v-show="newFolderError") This folder name is invalid!
					footer.card-footer
						a.card-footer-item(v-on:click="newFolderDiscard") Discard
						a.card-footer-item(v-on:click="newFolderCreate") Create

	.modal(v-bind:class="{ 'is-active': fetchFromUrlShow }")
		.modal-background
		.modal-container
			.modal-content
				.card.is-fullwidth
					header.card-header
						p.card-header-title Fetch Image from URL
					.card-content
						.content
							label.label Enter full URL path to the image:
							p.control
								input.input(type='text', placeholder='http://www.example.com/some-image.png', v-model='fetchFromUrlURL')
								span.help.is-danger.is-hidden This URL path is invalid!
					footer.card-footer
						a.card-footer-item(v-on:click="fetchFromUrlDiscard") Discard
						a.card-footer-item(v-on:click="fetchFromUrlFetch") Fetch