<!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="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.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><h2>Loading...</h2></li>
          </ul>
        </div>
      </nav>
      <section role="main">
        <h2>Loading...</h2>
      </section>
      <aside role="complementary">
        <h2>Setting</h2>
        <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">
      <h2>Keyboard shortcuts</h2>
      <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>
