<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
<link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
<link rel="import" href="chrome://bookmarks/edit_dialog.html">
<link rel="import" href="chrome://bookmarks/item.html">
<link rel="import" href="chrome://bookmarks/shared_style.html">
<link rel="import" href="chrome://bookmarks/store_client.html">
<link rel="import" href="chrome://bookmarks/util.html">

<dom-module id="bookmarks-list">
  <template>
    <style include="shared-style">
      :host {
        overflow-y: auto;
        padding: 20px var(--card-padding-side) 20px
            calc(var(--card-padding-side) - var(--splitter-width));
      }

      #bookmarksCard {
        @apply(--shadow-elevation-2dp);
        background-color: #fff;
        margin: 0 auto;
        max-width: var(--card-max-width);
        padding: 8px 0;
      }

      .centered-message {
        align-items: center;
        color: #6e6e6e;
        display: flex;
        font-size: 14px;
        font-weight: 500;
        height: 100%;
        justify-content: center;
      }
    </style>
    <dialog is="cr-action-menu" id="dropdown">
      <button class="dropdown-item" on-tap="onEditTap_">
        [[getEditActionLabel_(menuItem_)]]
      </button>
      <button class="dropdown-item" on-tap="onCopyURLTap_"
          hidden$="[[!menuItem_.url]]">
        $i18n{menuCopyURL}
      </button>
      <button class="dropdown-item" on-tap="onDeleteTap_">
         $i18n{menuDelete}
      </button>
    </dialog>
    <div id="bookmarksCard" hidden$="[[isEmptyList_(displayedList_.length)]]">
      <template is="dom-repeat" items="[[displayedList_]]" as="id">
        <bookmarks-item item-id="[[id]]" draggable="true">
        </bookmarks-item>
      </template>
    </div>
    <div id="message" class="centered-message"
        hidden$="[[!isEmptyList_(displayedList_.length)]]">
      [[emptyListMessage_(searchTerm_)]]
    </div>
    <template is="cr-lazy-render" id="editDialog">
      <bookmarks-edit-dialog></bookmarks-edit-dialog>
    </template>
  </template>
  <script src="chrome://bookmarks/list.js"></script>
</dom-module>