<mk-drive-selector>
	<div class="body">
		<header>
			<h1>%i18n:mobile.tags.mk-drive-selector.select-file%<span class="count" v-if="files.length > 0">({ files.length })</span></h1>
			<button class="close" @click="cancel">%fa:times%</button>
			<button v-if="opts.multiple" class="ok" @click="ok">%fa:check%</button>
		</header>
		<mk-drive ref="browser" select-file={ true } multiple={ opts.multiple }/>
	</div>
	<style lang="stylus" scoped>
		:scope
			display block
			position fixed
			z-index 2048
			top 0
			left 0
			width 100%
			height 100%
			padding 8px
			background rgba(0, 0, 0, 0.2)

			> .body
				width 100%
				height 100%
				background #fff

				> header
					border-bottom solid 1px #eee

					> h1
						margin 0
						padding 0
						text-align center
						line-height 42px
						font-size 1em
						font-weight normal

						> .count
							margin-left 4px
							opacity 0.5

					> .close
						position absolute
						top 0
						left 0
						line-height 42px
						width 42px

					> .ok
						position absolute
						top 0
						right 0
						line-height 42px
						width 42px

				> mk-drive
					height calc(100% - 42px)
					overflow scroll
					-webkit-overflow-scrolling touch

	</style>
	<script lang="typescript">
		this.files = [];

		this.on('mount', () => {
			this.$refs.browser.on('change-selection', files => {
				this.update({
					files: files
				});
			});

			this.$refs.browser.on('selected', file => {
				this.$emit('selected', file);
				this.$destroy();
			});
		});

		this.cancel = () => {
			this.$emit('canceled');
			this.$destroy();
		};

		this.ok = () => {
			this.$emit('selected', this.files);
			this.$destroy();
		};
	</script>
</mk-drive-selector>
