<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/paper-styles.html">

<dom-module id="viewer-bookmark" attributes="bookmark">
  <link rel="import" type="css" href="viewer-bookmark.css">
  <template>
    <div id="item" on-click="onClick">
      <span>{{bookmark.title}}</span>
      <paper-ripple></paper-ripple>
    </div>
    <div class="sub-bookmark">
      <!-- The sub-bookmarks will only be created after the parent bookmark has
        finished initializing and childDepth is available. -->
      <template is="dom-repeat" items="{{bookmark.children}}">
        <viewer-bookmark bookmark="{{item}}" depth="{{childDepth}}">
        </viewer-bookmark>
      </template>
    </div>
  </template>
</dom-module>
<script src="viewer-bookmark.js"></script>
