<!DOCTYPE html>
<html ng-app>
  <head>
    <title>Elfeed Web</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css"/>
    <link rel="stylesheet" href="elfeed.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/URI.js/1.7.2/URI.min.js"></script>
    <script src="elfeed.js"></script>
  </head>
  <body>

    <div class="row">
      <div class="twelve columns centered panel radius">
        <h4>Emacs Elfeed</h4>
      </div>
    </div>

    <div class="row panel" ng-controller="SearchCtrl">

      <div class="large-5 columns">
        <div>

          <form ng-submit="update(true)">
            <input id="query" type="text"
                   ng-model="query" ng-change="update()"/>
          </form>
          <button class="button small" ng-click="markAllRead()">
            Mark All As Read
          </button>

          <ul class="no-bullet">
            <li class="entry" ng-repeat="entry in entries">
              <img class="favicon" src="{{entry.favicon}}">
              <span class="feed-title">
                {{entry.feed.title}}
              </span>
              <time class="secondary label">
                {{entry.dateString}}
              </time>
              <a class="title" href="#" ng-click="show(entry)">
                <span class="{{entry.classes}}">{{entry.title}}</span>
              </a>
            </li>
            <span class="no-results" ng-show="!entries.length">
              No results.
            </span>
          </ul>
        </div>
      </div>

      <div class="large-7 columns">
        <div class="row" ng-show="selected && selected.content">
          <div class="twelve columns">
            <h4 class="subheader">
              <a href="{{selected.link}}" target="_blank">
                {{selected.title}}
              </a>
            </h4>
            <iframe class="twelve columns panel"
                    sandbox src="/elfeed/content/{{selected.content}}">
            </iframe>
          </div>
        </div>
      </div>

    </div>

  </body>
</html>
