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

<link rel="import" href="chrome://downloads/browser_proxy.html">
<link rel="import" href="chrome://downloads/constants.html">
<link rel="import" href="chrome://downloads/i18n_setup.html">
<link rel="import" href="chrome://downloads/icon_loader.html">
<link rel="import" href="chrome://downloads/icons.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/action_link.html">
<link rel="import" href="chrome://resources/html/action_link_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_row_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.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-progress/paper-progress.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

<dom-module id="downloads-item">
  <template>
    <style include="action-link cr-hidden-style cr-icons paper-button-style">
      :host {
        display: flex;
        flex-direction: column;
        outline: none;
      }

      paper-button {
        font-weight: 500;
        margin: 0;
        min-width: auto;
      }

      #date {
        font-size: 0.875rem;
        font-weight: 400;
        letter-spacing: .25px;
        margin: 21px auto 6px;
        padding-bottom: 4px;
        padding-top: 8px;
        width: var(--downloads-card-width);
      }

      #date:empty {
        display: none;
      }

      #content {
        border-radius: var(--cr-card-border-radius);
        display: flex;
        flex: none;
        margin: 6px auto;
        min-height: 103px;
        position: relative;
        width: var(--downloads-card-width);
      }

      #content.is-active {
        @apply --cr-card-elevation;
      }

      :host-context(html:not([dark])) #content.is-active {
        background-color: var(--cr-card-background-color);
      }

      #content:not(.is-active) {
        background: rgba(255, 255, 255, .6);
        border: 1px var(--google-grey-300) solid;
      }

      :host-context([dark]) #content:not(.is-active) {
        background: none;  /* override */
        border-color: var(--google-grey-800);
      }

      #details {
        border-inline-start: 1px #d8d8d8 solid;
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;  /* This allows #url to ellide correctly. */
        padding-bottom: 12px;
        padding-inline-end: 16px;
        padding-inline-start: var(--downloads-card-margin);
        padding-top: 16px;
      }

      :host-context([dark]) #details {
        border-color: rgba(var(--google-grey-800-rgb), .8);
      }

      #content:not(.is-active) #details {
        color: rgba(27, 27, 27, .6);
      }

      :host-context([dark]) #content:not(.is-active) #details {
        color: rgba(var(--google-grey-500-rgb), .6);
      }

      #content:not(.is-active) #name {
        text-decoration: line-through;
      }

      :host-context([dark]) #content:not(.is-active) :-webkit-any(#name, #tag) {
        color: var(--google-grey-500);
      }

      .icon-wrapper {
        align-self: center;
        flex: none;
        justify-content: center;
        margin: 0 24px;
      }

      .icon,
      #file-icon-wrapper {
        height: 32px;
        width: 32px;
      }

      #file-icon-wrapper {
        overflow: hidden;  /* Reduces file icon flicker on initial load. */
      }

      #content:-webkit-any(.show-progress, .dangerous) #file-icon-wrapper {
        /* TODO(dbeam): animate from top-aligned to centered when items finish?
         */
        align-self: flex-start;
        padding-top: 16px;
      }

      #content:not(.is-active) .icon {
        -webkit-filter: grayscale(100%);
        opacity: .5;
      }

      #file-icon-wrapper iron-icon[icon='cr:insert-drive-file'] {
        color: var(--paper-grey-400);
      }

      #file-icon-wrapper iron-icon[icon='cr:warning'],
      .dangerous #description {
        color: var(--google-red-700);
      }

      :host-context([dark]) #file-icon-wrapper iron-icon[icon='cr:warning'],
      :host-context([dark]) .dangerous #description {
        color: var(--google-red-refresh-300);
      }

      #name,
      #file-link,
      #url {
        max-width: 100%;
      }

      #name,
      #file-link {
        font-weight: 500;
        word-break: break-all;
      }

      :host-context(html:not([dark])) .is-active
          :-webkit-any(#name, #file-link, #show) {
        color: var(--google-blue-600);
      }

      #name {
        margin-inline-end: 12px;  /* Only really affects #tag. */
      }

      #tag {
        color: #5a5a5a;
        font-weight: 500;
      }

      #url {
        color: inherit;
        margin-top: 6px;
        min-height: 0;
        overflow: hidden;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .is-active #url {
        color: var(--cr-secondary-text-color);
      }

      #progress,
      #description:not(:empty),
      .controls {
        margin-top: 16px;
      }

      .is-active #description {
        color: #616161;
      }

      #progress {
        /* TODO(dbeam): border-radius on container and progress bar. */
        --paper-progress-active-color: var(--google-blue-600);
        --paper-progress-container-color: rgb(223, 222, 223);
        width: auto;
      }

      :host-context([dark]) #progress {
        --paper-progress-active-color: var(--google-blue-300);
        --paper-progress-container-color: var(--google-grey-800);
      }

      #show {
        margin: .7em 0;
      }

      #controlled-by {
        margin-inline-start: 8px;
      }

      #controlled-by,
      #controlled-by a {
        color: #5a5a5a;
      }

      .is-active #controlled-by {
        color: #333;
      }

      .is-active #controlled-by a {
        color: var(--google-blue-600);
      }

      #remove-wrapper {
        align-self: flex-start;
        margin: 0;
      }

      #remove-wrapper > paper-icon-button-light {
        --cr-icon-size: 16px;
        color: var(--google-grey-refresh-700);
        height: 32px;
        margin-inline-end: 8px;
        margin-inline-start: 0;
        margin-top: 8px;
        width: 32px;
      }

      :host-context([dark]) #remove-wrapper > paper-icon-button-light {
        color: var(--google-grey-500);
      }

      #incognito {
        bottom: 20px;
        content: -webkit-image-set(
            url(chrome://downloads/1x/incognito_marker.png) 1x,
            url(chrome://downloads/2x/incognito_marker.png) 2x);
        position: absolute;
        right: 16px;
      }

      :host-context([dir='rtl']) #incognito {
        left: 16px;
        right: initial;
      }

      #pauseOrResume,
      #dangerous .action-button {
        margin-inline-end: 8px;
      }
    </style>

    <h3 id="date">[[computeDate_(data.hideDate,
                                 data.sinceString,
                                 data.dateString)]]</h3>

    <div id="content" on-dragstart="onDragStart_"
        class$="[[computeClass_(isActive_, isDangerous_, showProgress_)]]"
        focus-row-container>
      <div id="file-icon-wrapper" class="icon-wrapper">
        <img class="icon" id="file-icon" alt="" hidden="[[!useFileIcon_]]">
        <iron-icon class="icon" icon$="[[computeIcon_(
            isDangerous_, data.dangerType, useFileIcon_)]]"
            hidden="[[useFileIcon_]]"></iron-icon>
      </div>

      <div id="details">
        <div id="title-area"><!--
          Can't have any line breaks.
          --><a is="action-link" id="file-link" href="[[data.url]]"
              on-click="onFileLinkTap_" focus-row-control
              focus-type="fileLink"
              hidden="[[!completelyOnDisk_]]">[[data.fileName]]</a><!--
          Before #name.
          --><span id="name"
              hidden="[[completelyOnDisk_]]">[[data.fileName]]</span>
          <span id="tag">[[computeTag_(data.state,
                                       data.lastReasonText,
                                       data.fileExternallyRemoved)]]</span>
        </div>

        <a id="url" target="_blank" focus-row-control
            focus-type="url">[[chopUrl_(data.url)]]</a>

        <div id="description">[[computeDescription_(
          data.state,
          data.dangerType,
          data.fileName,
          data.progressStatusText)]]</div>

        <template is="dom-if" if="[[showProgress_]]">
          <paper-progress id="progress"
              indeterminate="[[isIndeterminate_(data.percent)]]"
              value="[[data.percent]]"></paper-progress>
        </template>

        <div id="safe" class="controls" hidden="[[isDangerous_]]">
          <a is="action-link" id="show" on-click="onShowTap_"
              hidden="[[!completelyOnDisk_]]" focus-row-control
              focus-type="show">$i18n{controlShowInFolder}</a>
          <template is="dom-if" if="[[data.retry]]">
            <paper-button class="action-button" on-click="onRetryTap_"
                focus-row-control focus-type="retry">
              $i18n{controlRetry}
            </paper-button>
          </template>
          <template is="dom-if" if="[[pauseOrResumeText_]]">
            <paper-button on-click="onPauseOrResumeTap_" id="pauseOrResume"
                focus-row-control focus-type="pauseOrResume">
              [[pauseOrResumeText_]]
            </paper-button>
          </template>
          <template is="dom-if" if="[[showCancel_]]">
            <paper-button on-click="onCancelTap_" focus-row-control
                focus-type="cancel">
              $i18n{controlCancel}
            </paper-button>
          </template>
          <span id="controlled-by"><!-- Text populated dynamically. --></span>
        </div>

        <template is="dom-if" if="[[isDangerous_]]">
          <div id="dangerous" class="controls">
            <!-- Dangerous file types (e.g. .exe, .jar). -->
            <template is="dom-if" if="[[!isMalware_]]">
              <paper-button on-click="onDiscardDangerousTap_"
                  class="action-button" focus-row-control
                  focus-type="discard">$i18n{dangerDiscard}</paper-button>
              <paper-button on-click="onSaveDangerousTap_" focus-row-control
                  focus-type="save">
                $i18n{dangerSave}</paper-button>
            </template>

            <!-- Things that safe browsing has determined to be dangerous. -->
            <template is="dom-if" if="[[isMalware_]]">
              <paper-button on-click="onDiscardDangerousTap_"
                  class="action-button" focus-row-control focus-type="discard">
                $i18n{controlRemoveFromList}</paper-button>
              <paper-button on-click="onSaveDangerousTap_" focus-row-control
                  focus-type="save">
                $i18n{dangerRestore}</paper-button>
            </template>
          </div>
        </template>
      </div>

      <div id="remove-wrapper" class="icon-wrapper ">
        <paper-icon-button-light class="icon-clear"
            style$="[[computeRemoveStyle_(isDangerous_, showCancel_)]]">
          <button id="remove"
              title="$i18n{controlRemoveFromList}"
              aria-label$="[[controlRemoveFromListAriaLabel_]]"
              on-click="onRemoveTap_" focus-row-control focus-type="remove">
          </button>
        </paper-icon-button-light>
      </div>

      <div id="incognito" title="$i18n{inIncognito}" hidden="[[!data.otr]]">
      </div>
    </div>

  </template>
  <script src="chrome://downloads/item.js"></script>
</dom-module>