<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon_32.ico')}}"/>
		<script>
			URLS = {{ {'feeds': url_for('feeds', _external=True), 'entries': url_for('category_entries', _external=True)}|tojson|safe }};
			THEMES = {{ {
        'bright': url_for('static', filename='css/theme_bright.scss.css'),
        'dark': url_for('static', filename='css/theme_dark.scss.css')
      }|tojson|safe }};
		</script>
		<script src="{{ url_for('static', filename='js/jquery-2.0.3.min.js') }}" type="text/javascript" charset="utf-8"></script>
		<script src="{{ url_for('static', filename='js/master.js') }}" type="text/javascript" charset="utf-8"></script>
		<script src="{{ url_for('static', filename='js/prefixfree.min.js') }}" type="text/javascript" charset="utf-8"></script>
		<script src="{{ url_for('static', filename='js/moment-with-langs.min.js') }}" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" media="all"
          href="{{ url_for('static', filename='css/animation.scss.css') }}">
		<link rel="stylesheet" type="text/css" media="all"
          href="{{ url_for('static', filename='css/master.scss.css') }}">
		<style type="text/css" class="theme">
			@import url({{
        url_for('static', filename='css/theme_bright.scss.css')
      }});
		</style>
		<title>Earth Reader</title>
	</head>
	<body>
		<header class="site-header">
			<span role="button" class="off-canvas-menu"></span>
			<h1>Earth Reader</h1>
			<span role="button" class="off-canvas-side"></span>
		</header>
		<div class="wrapper">
			<nav role="navigation">
				<ul class="persistent">
					<li data-filter="" class="all"><span role="button">All</span></li>
					<li data-filter="starred=true" class="starred"><span role="button">Starred</span></li>
					<li data-filter="read=false" class="unread"><span role="button">Unread</span></li>
					<li class="header closed">Add Feed/Category</li>
					<li class="fold">
						<div class="form">
							<h2>Add Feed</h2>
							<form action="/feeds/" class="addFeed" data-after="makeFeedList">
								<input type="url" name="url" placeholder="URL"/>
								<input type="submit" value="Add"/>
							</form>
						</div>
						<div class="form">
							<h2>Add Category</h2>
							<form action="/" class="addCategory" data-after="makeFeedList">
								<input type="text" name="title" placeholder="title"/>
								<input type="submit" value="Add"/>
							</form>
						</div>
					</li>
				</ul>
				<div class="feedlist">
					<div class="allfeed header" role="link">All</div>
					<ul class="allfeed folder">
						<li> <h1>Loading...</h1> </li>
					</ul>
				</div>
			</nav>
			<section role="main">
				<h1>Loading...</h1>
			</section>
			<aside role="complementary">
				<h1>Setting</h1>
				<ul>
					<li data-action="remove-this"><span role="button">Remove</span></li>
					<li data-action="toggle-star"><span role="button">Star</span></li>
					<li data-action="mark-unread"><span role="button">Mark as unread</span></li>
					<li data-action="change-theme" data-theme-name="dark"><span role="button">Dark theme</span></li>
					<li data-action="change-theme" data-theme-name="bright"><span role="button">Bright theme</span></li>
				</ul>
			</aside>
		</div>
		<div id="manual">
			<h1>Keyboard shortcuts</h1>
			<div class="shortcuts">
				<p><kbd>j</kbd> Older entry</p>
				<p><kbd>k</kbd> Newer entry</p>
				<p><kbd>J</kbd> Select next feed</p>
				<p><kbd>K</kbd> Select previous feed</p>
				<p><kbd>X</kbd> toggle folding category</p>
				<p><kbd>v</kbd> Open entry in new tab</p>
                <p><kbd>&crarr;</kbd>/<kbd>o</kbd> Toggle collapse current entry</p>
				<p><kbd>r</kbd> Refresh current feed</p>
				<p><kbd>s</kbd> Star/Unstar</p>
				<p><kbd>u</kbd>/<kbd>m</kbd> Mark as unread</p>
				<p><kbd>?</kbd> Show this help message</p>
			</div>
		</div>
	</body>
</html>
