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

<link rel="import" href="chrome://apps/shared_style.html">
<link rel="import" href="chrome://apps/shared_vars.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">

<dom-module id="app-management-item">
  <template>
    <style include="app-management-shared-css cr-icons">
      :host {
        align-items: center;
        border-top: var(--card-separator);
        color: var(--primary-text-color);
        display: flex;
        flex-direction: row;
        font-weight: 400;
        height: 64px;
      }

      #app-title {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      #app-icon {
        height: 32px;
        margin-inline-end: 20px;
        margin-inline-start: 24px;
        width: 32px;
      }

      .subpage-arrow {
        margin-inline-end: 8px;
        padding: 12px;
      }
    </style>
    <img id="app-icon" src="[[iconUrlFromId_(app)]]">
    <div id="app-title">[[app.title]]</div>
    <paper-icon-button-light class="subpage-arrow" actionable>
      <button></button>
    </paper-icon-button-light>
  </template>
 <script src="chrome://apps/item.js"></script>
</dom-module>