<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="browser_service.html">
<link rel="import" href="constants.html">
<link rel="import" href="searched_label.html">
<link rel="import" href="shared_style.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_row_behavior.html">
<link rel="import" href="chrome://resources/html/icon.html">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">

<!-- Lazy loaded: paper-icon-button-light. -->

<dom-module id="history-item">
  <template>
    <style include="shared-style cr-icons">
      :host {
        display: block;
        outline: none;
        pointer-events: none;
      }

      #main-container {
        position: relative;
      }

      :host([is-card-end]) #main-container {
        margin-bottom: var(--card-padding-between);
      }

      :host([is-card-start][is-card-end]) #main-container {
        border-radius: var(--cr-card-border-radius);
      }

      #date-accessed {
        display: none;
      }

      :host([is-card-start]) #date-accessed {
        display: block;
        font-size: 123%;
        font-weight: 400;
        letter-spacing: .25px;
        padding-bottom: 4px;
        padding-top: 8px;
      }

      #item-container {
        align-items: center;
        display: flex;
        min-height: var(--item-height);
        padding-inline-start: 10px;
        pointer-events: auto;
      }

      :host([is-card-start]) #item-container {
        padding-top: var(--card-first-last-item-padding);
      }

      :host([is-card-end]) #item-container {
        padding-bottom: var(--card-first-last-item-padding);
      }

      #title-and-domain {
        align-items: center;
        display: flex;
        flex: 1;
        height: var(--item-height);
        overflow: hidden;
      }

      #checkbox {
        margin: 12px;
      }

      /* #checkbox[unresolved] styling is necessary since cr-checkbox is being
         lazy-loaded. */
      #checkbox[unresolved] {
        border: 2px solid var(--cr-secondary-text-color);
        border-radius: 2px;
        content: '';
        display: block;
        height: 12px;
        width: 12px;
      }

      #time-accessed {
        color: var(--history-item-time-color);
        margin-inline-start: 6px;
        min-width: 96px;
      }

      #domain {
        color: var(--cr-secondary-text-color);
        flex-shrink: 0;
        margin-inline-start: 16px;
      }

      #menu-button-container {
        margin-inline-end: 12px;
      }

      #star-container {
        margin-inline-end: 4px;
        margin-inline-start: 12px;
        width: 32px;
      }

      #bookmark-star-container {
        color: var(--interactive-color);
        height: 32px;
        width: 32px;
      }

      #bookmark-star-container iron-icon {
        height: 16px;
        width: 16px;
      }

      #time-gap-separator {
        border-inline-start: 1px solid #888;
        height: 15px;
        margin-inline-start: 77px;
      }

      :host-context([dark]) #time-gap-separator {
        border-color: var(--google-grey-refresh-500);
      }

      #background-clip {
        /* Prevent artifacts when zoomed by overlapping the next item. */
        bottom: -0.4px;
        clip: rect(auto 999px auto -5px); /* Clip the top and bottom edges. */
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
      }

      :host([is-card-end]) #background-clip {
        bottom: 0;
        clip: rect(auto 999px 500px -5px); /* Clip the top edge. */
      }

      #background {
        @apply --cr-card-elevation;
        background: var(--cr-card-background-color);
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
      }

      :host(:not([is-card-start])) #background {
        top: -5px; /* Draw the box shadow up the full edge of the background. */
      }

      :host([is-card-start]) #background {
        border-radius: var(--cr-card-border-radius) var(--cr-card-border-radius) 0 0;
      }

      :host([is-card-end]) #background {
        border-radius: 0 0 var(--cr-card-border-radius) var(--cr-card-border-radius);
      }

      :host([is-card-start][is-card-end]) #background {
        border-radius: var(--cr-card-border-radius);
      }
    </style>

    <div id="main-container">
      <div id="background-clip">
        <div id="background"></div>
      </div>
      <div id="date-accessed" class="card-title">
        [[cardTitle_(numberOfItems, item.dateRelativeDay, searchTerm)]]
      </div>
      <div id="item-container" focus-row-container
          on-mousedown="onItemMousedown_"
          on-click="onItemClick_">
        <cr-checkbox id="checkbox" checked="[[selected]]" unresolved
            focus-row-control focus-type="cr-checkbox"
            on-mousedown="onCheckboxClick_" on-keydown="onCheckboxClick_"
            on-change="onCheckboxChange_" class="no-label"
            hidden="[[selectionNotAllowed_]]"
            disabled="[[selectionNotAllowed_]]"
            aria-label$="[[getEntrySummary_(item)]]"></cr-checkbox>
        <span id="time-accessed">
          [[item.readableTimestamp]]
        </span>
        <div id="title-and-domain">
          <a href="[[item.url]]" id="link" class="website-link"
              focus-row-control focus-type="link"
              title="[[item.title]]" on-click="onLinkClick_"
              on-contextmenu="onLinkRightClick_">
            <div class="website-icon" id="icon"></div>
            <history-searched-label class="website-title" title="[[item.title]]"
                search-term="[[searchTerm]]"></history-searched-label>
          </a>
          <span id="domain">[[item.domain]]</span>
        </div>
        <div id="star-container">
          <template is="dom-if" if="[[item.starred]]" notify-dom-change>
            <paper-icon-button-light id="bookmark-star-container">
              <button id="bookmark-star" focus-row-control focus-type="star"
                  title="$i18n{removeBookmark}" on-click="onRemoveBookmarkTap_">
                <iron-icon icon="cr:star"></iron-icon>
              </button>
            </paper-icon-button-light>
          </template>
        </div>
        <paper-icon-button-light id="menu-button-container"
            class="more-vert-button">
          <button id="menu-button" focus-row-control focus-type="cr-menu-button"
              title="$i18n{actionMenuDescription}" on-click="onMenuButtonTap_"
              aria-haspopup="menu">
            <div></div>
            <div></div>
            <div></div>
          </button>
        </paper-icon-button-light>
      </div>
      <div id="time-gap-separator" hidden="[[!hasTimeGap]]"></div>
    </div>
  </template>
  <script src="history_item.js"></script>
</dom-module>