<style>
	.uk-subnav > * > :first-child { font-size:12px; text-transform:none; }
	.uk-subnav > *:not(.uk-first-column){ padding-left: 10px; }
	ul, h1, h2, h3 { margin-bottom:0; }

	#BasePanel {
		background-color:whitesmoke;
	}

	#Menubar {
		border-bottom: 1px solid #999999;
		background-color: #f1f1f1;
	}

	#Toolbar {
		border-bottom: 1px solid #999999;
		background-color: #f1f1f1;
	}

	#Bottombar { 
		border-top: 1px solid #999999;
		padding: 0.25rem 0.5rem;
		background-color: #f1f1f1;
	}
	
	#Splitter {
		width:3px;
		background-color:#999999;
	}
	#Splitter:hover {
		cursor: ew-resize;
	}

	.app-list-item:hover {
		cursor: pointer;
		background-color: rgb(157, 140, 235);
	}
	
	.app-list-item {
		font-weight: bold;
	}
	
	.app-list-item.v-read {
		font-weight: normal;
		background-color: #E3E3E3;
	}
	
	.app-list-item.v-read:hover {
		background-color: #CEFFFE;
	}
	
	.app-content-container {
		max-width: 720px;
		margin: 0 auto;
	}

	.d-invalid-block, .d-valid-block { display:none; }
	.switch-validity.v-valid > .d-valid-block { display: block; }
	.switch-validity.v-invalid > .d-invalid-block { display: block; }
</style>

<div id="BasePanel" class="uk-text-small switch-validity v-invalid" style="height:100%;">
	<div class="d-invalid-block" style="height:100%;">
		<div style="display:flex; justify-content:center; align-items:center; height:100%;">
			<div class="uk-card uk-card-default uk-border-rounded uk-text-center">
				<div class="uk-card-media-top uk-padding uk-border-rounded uk-tile-primary">
					<h1>RSS Desk</h1>
				</div>
				<div class="uk-card-body uk-padding-small">
					<button data-js="btnFileOpen" class="uk-button uk-button-primary">open file...</button>
					<button data-js="btnFileNew" class="uk-button uk-button-secondary">new file...</button>
				</div>
			</div>
		</div>
	</div>
	<div class="d-valid-block" style="height:100%;">
		<div style="display:flex; flex-direction:column; height:100%;">		
			
			<!-- # -->
			<div id="Menubar" style="padding:.5rem">
				<ul class="uk-subnav" uk-margin>
					<li>
						<a href="#">File</a>
						<div data-js="dropdownFile" uk-dropdown="mode: click" style="padding:.5rem">
							<ul class="uk-nav uk-dropdown-nav">
								<li><a href="#" data-js="btnFileOpen">Open</a></li>
								<li><a href="#" data-js="btnFileClose">Close</a></li>
								<li class="uk-nav-divider"></li>
								<li><a href="#" data-js="btnFileQuit">Quit</a></li>
							</ul>
						</div>
					</li>
					<li><a href="#ModalManageRSS" uk-toggle>Manage</a></li>
					<li>
						<a href="#">Help</a>
						<div data-js="dropdownHelp" uk-dropdown="mode: click" style="padding:.5rem">
							<ul class="uk-nav uk-dropdown-nav">
								<li><a href="#ModalAbout" uk-toggle>About</a></li>
								<li><a href="#ModalCredits" uk-toggle>Credits</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		
			<!-- # -->
			<div id="Toolbar" style="display:flex; justify-content:space-between; padding:.5rem;">
				<ul class="uk-iconnav">
					<li><button data-js="btnPlus" uk-icon="icon:plus;ratio:2;"></button></li>
					<li><button data-js="btnRefresh" uk-icon="icon:refresh;ratio:2;"></button></li>
				</ul>
				<div style="flex:1;margin-left:.5rem">
					<select data-js="selRssLocation" class="uk-select"></select>
				</div>
			</div>
		
			<!-- # -->
			<div id="Form" style="display:none">
				Form
			</div>
		
			<!-- # -->
			<div id="Center" style="flex:1; display:flex; overflow:hidden;">
				<div id="Sidebar" style="width:320px; padding:.5rem; overflow-y:scroll;"></div>
				<div id="Splitter"></div>
				<div id="Content" style="flex:3; overflow-y:scroll;"></div>
			</div>
		
			<!-- # -->
			<div id="Bottombar">
				RSS Desk
			</div>
		</div>
	</div>

	<div id="ModalManageRSS" uk-modal>
		<div class="uk-modal-dialog uk-modal-body">
			<h2 class="uk-modal-title">Manage RSS</h2>
			<p>
				<select data-js="selManageRss" class="uk-select" multiple size="8"></select>
			</p>
			<p class="uk-text-right">
				<button data-js="btnDeleteRSS" class="uk-button uk-button-default" type="button">delete</button>
				<button class="uk-button uk-button-default uk-modal-close" type="button">close</button>
			</p>
		</div>
	</div>

	<div id="ModalAbout" uk-modal>
		<div class="uk-modal-dialog uk-modal-body">
			<h2 class="uk-modal-title">About</h2>
			<p>
				Simple RSS Reader
			</p>
			<p class="uk-text-center">
				<button class="uk-button uk-button-default uk-modal-close" type="button">close</button>
			</p>
		</div>
	</div>

	<div id="ModalCredits" uk-modal>
		<div class="uk-modal-dialog uk-modal-body">
			<h2 class="uk-modal-title">Credits</h2>
			<ul>
				<li>
					<a href="https://github.com/webview/webview">Webview/Webview</a>
				</li>
			</ul>
			<p class="uk-text-center">
				<button class="uk-button uk-button-default uk-modal-close" type="button">close</button>
			</p>
		</div>
	</div>

	<script type="tmpl-x-mustache" data-js="itemListTemplate">
		{{#items}}
			<div data-id="{{id}}" class="app-list-item {{#read}}v-read{{/read}} uk-card uk-card-default uk-card-body uk-padding-small uk-margin-small-bottom">
				{{title}}
			</div>
		{{/items}}
	</script>
	
	<script type="tmpl-x-mustache" data-js="refreshListTemplate">
		<div data-js="refreshItem" class="uk-card uk-card-default uk-card-body uk-padding-small uk-margin-small-bottom uk-text-center">
			<a href="#">refresh entries</a>
		</div>
	</script>

	<script type="tmpl-x-mustache" data-js="itemContentTemplate">
		<div class="uk-padding-small">
			<div class="uk-margin-bottom uk-text-center">
				<div class="uk-text-small">{{rss.title}}</div>
				<div class="uk-text-lead" data-js="titleBox">{{title}}</div>
				<div class="uk-text-small">{{pubDate}}</div>
			</div>
			<div class="app-content-container">
				{{#hasEmbededFrame}}
				<div data-js="descriptionImageBox" class="uk-card uk-card-default uk-card-body uk-padding-small uk-margin-small-bottom" style="display:table; margin:0 auto;">
					<iframe style="width:600px; height:450px;" src="{{embededFrameSrc}}"></iframe>
				</div>
				{{/hasEmbededFrame}}
				
				{{^hasEmbededFrame}}
				{{#hasImage}}
				<div data-js="descriptionImageBox" class="uk-card uk-card-default uk-card-body uk-padding-small uk-margin-small-bottom" style="display:table; margin:0 auto;">
					<img src="{{imgSrc}}" style="width:600px" />
				</div>
				{{/hasImage}}
				{{/hasEmbededFrame}}
				
				<div class="uk-margin-small-bottom uk-text-center">
					<a data-js="link" href="{{link}}" target="_blank">{{link}}</a>
				</div>
				<div data-js="descriptionTextBox" class="uk-margin-small-bottom">{{{descHtml}}}</div>
				
				<hr />

				<div class="uk-text-small uk-text-center">
					<div>{{feed.copyright}}</div>
					<div>{{feed.lastBuildDate}}</div>
				</div>
			</div>
		</div>
	</script>
</div>

<script>
{
	document.body.style.height = '100%'
	document.body.style.minWidth = '320px'
	document.documentElement.style.height = '100%'
	
	window.addEventListener('error', (event) => {
		binapp.console('log', `${event.type}: ${event.message}`)
	});

	let _state = {
		rssDesk: null
	}

	const basePanel = $('#BasePanel')
	const selRssLocation = $('#Toolbar [data-js=selRssLocation]')
	const selManageRss = $('#ModalManageRSS [data-js=selManageRss]')
	const itemListTemplate = basePanel.find("[data-js=itemListTemplate]").detach().text()
	const refreshListTemplate = basePanel.find("[data-js=refreshListTemplate]").detach().text()
	const itemContentTemplate = basePanel.find("[data-js=itemContentTemplate]").detach().text()
	
	const splitter = {
		target: document.getElementById("Sidebar"),
		splitter: document.getElementById("Splitter"),
		init: function() {
			let mpos, tw, min=200, max=500
			let self = this
			
			let resize = function(e) {
				const cw = parseInt(self.target.style.width)
				const dx = e.x - mpos;
				
				mpos = e.x;
				tw = cw + dx
				
				if (tw < min || tw > max) {
					tw = tw < min ? min : (tw > max ? max : tw)
					document.removeEventListener("mousemove", resize, false);
				}
				
				self.target.style.width = tw + "px";
			}
			
			this.splitter.addEventListener("mousedown", function(e){
				mpos = e.x;
				document.addEventListener("mousemove", resize, false);
			}, false);
			
			document.addEventListener("mouseup", function(){
				document.removeEventListener("mousemove", resize, false);
			}, false);
		}
	}

	const getUnixTimestamp = function() { return parseInt(new Date().getTime() / 1000) }

	const reapplyBasePanel = function() {
		console.log("Reapply base panel")
		
		let [r, a] =  _state.rssDesk ? ['v-invalid', 'v-valid'] : ['v-valid', 'v-invalid'] 
		basePanel.removeClass(r).addClass(a)
		
		if (_state.rssDesk) {
			reapplySelManageRss()
			reapplySelRssLocation()

			if (_state.rssDesk.countRSS() > 0) {
				_state.rssDesk.openRSS(0, function(rss) {
					renderList(rss)
				})
			}
		}
	}
	
	const reapplySelManageRss = function() {
		selManageRss.empty()
		
		_state.rssDesk.forEachRSS(function(rssEntry, idx){
			selManageRss.append(`<option value="${idx}">${rssEntry.url}</option>`)
		})
	}

	const reapplySelRssLocation = function() {
		selRssLocation.empty()
		
		if (_state.rssDesk.countRSS() > 0) {
			_state.rssDesk.forEachRSS(function(rssEntry, i){
				selRssLocation.append(`<option value="${i}">${rssEntry.url}</option>`)
			})
		}
	}

	const renderContent = function(id) {
		let rss = _state.rssDesk.getActive().xml$
		let itemModel = FeedParser.parseItemById(rss, id)
		
		$('#Content').html(Mustache.render(itemContentTemplate, itemModel))
		$('#Bottombar').text(itemModel.feed.category)
		$('#Content [data-js=link]').click(function(ev){
			if (binapp.mode != 'http') { 
				ev.preventDefault()
				binapp.http('openurl', [$(this).attr('href')])
			}
		})
		
		_state.rssDesk.readLink(itemModel.link)
		$(`#Sidebar [data-id="${id}"]`).addClass('v-read')
	}

	const renderList = function() {
		let xml$ = _state.rssDesk.getActive().xml$
		let itemsCount = FeedParser.countItem(xml$)
		let tmplData = {
			items: Array.apply(0, Array(itemsCount)).map(function(_, index){
				let item = FeedParser.parseItemByIndex(xml$, index)
				let link = item.link
				
				return {
					title: item.title,
					id: item.id,
					read: _state.rssDesk.isLinkRead(link)
				}
			}),
		}

		$('#Sidebar').html(Mustache.render(itemListTemplate, tmplData))
		$('#Sidebar [data-id]').click(function(ev) {
			let id = $(this).data('id')
			
			renderContent(id)
		})
	}

	selRssLocation.on('change', function(){
		let sel = $(this)
		_state.rssDesk.openRSS(sel.val(), function(rss) {
			renderList()
		})	
	})

	$('[data-js=btnPlus]').click(function(){
		UIkit.modal.prompt('RSS url:', '').then(function(url){
			if (url) {
				_state.rssDesk.addRSS(url, function() {
					let idx = _state.rssDesk.getIndex(url)
					_state.rssDesk.openRSS(idx, function(rss) {
						renderList(rss)
					})

					reapplySelRssLocation()
					reapplySelManageRss()
					selRssLocation.val(idx)
				})
			}
		})
	})
	
	$('[data-js=btnRefresh]').click(function(){
		_state.rssDesk.refreshActive(function(rss) {
			renderList(rss)
		})
	})

	$('[data-js=btnFileOpen]').click(function(ev){
		ev.preventDefault()
		UIkit.dropdown($('[data-js=dropdownFile]')[0]).hide(false)

		binapp.dialog('file', ['']).then(function(filename){
			if (filename) {
				_state.rssDesk = new RSSDesk(filename)
				_state.rssDesk.init(function() {
					reapplyBasePanel()
				})
			}
		})
	})
	
	$('[data-js=btnFileNew]').on('click', function(ev) {
		ev.preventDefault()
		binapp.dialog('save', ['.db']).then(function(filename) {
			_state.rssDesk = new RSSDesk(filename)
			_state.rssDesk.init(function() {
				reapplyBasePanel()
			})
		})
	})

	$('[data-js=btnFileClose]').click(function(ev){
		ev.preventDefault()
		_state.rssDesk.close()
		_state.rssDesk = null
		basePanel.removeClass('v-valid').addClass('v-invalid')
		UIkit.dropdown($('[data-js=dropdownFile]')[0]).hide(false)
	})
	
	$('[data-js=btnFileQuit]').click(function(ev){
		ev.preventDefault()
		binapp.console('quit', '')
	})

	$('#ModalAbout,#ModalCredits').on('beforeshow', function(){
		UIkit.dropdown($('[data-js=dropdownHelp]')[0]).hide(false)
	})

	$('#ModalManageRSS [data-js=btnDeleteRSS]').click(function(){
		let selectedIndexes = selManageRss.val()

		console.log('deleting urls', selectedIndexes)

		if (selectedIndexes) {
			_state.rssDesk.deleteRSS(selectedIndexes, function(activeDeleted) {
				reapplySelRssLocation()
				reapplySelManageRss()
				
				if (activeDeleted) {
					if (selRssLocation.val() != null) {
						_state.openRSS(selRssLocation.val())
					}
					else {
						$('#Sidebar').html('')
						$('#Content').html('')	
					}
				}
			})
		}
	})
	
	$(document).on('rssdesk.active_changed', function(){
		let item = $(Mustache.render(refreshListTemplate))
		
		item.find('a').click(function(ev){
			ev.preventDefault()
			renderList()
			$('#Sidebar [data-js=refreshItem]').remove()
		})
		
		$('#Sidebar').prepend(item)
		$('#Sidebar').append(item.clone(true))
	})
	
	splitter.init()
}
//# sourceURL=http://dynamic/partial/base.htm
</script>
