<commit_before><link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="mg-icons.html">
<link rel="import" href="mg-balloon.html">
<link rel="import" href="mg-menu.html">
<link rel="import" href="mg-item.html">
<link rel="import" href="mg-image.html">


<dom-module id="mg-items">
  <template strip-whitespace>
    <style>
      :host {
        @apply --layout-horizontal;
      }

      #new-item {
        margin-left: 25px;
        width: 100px;
        padding:0;
        height:40px;
        box-shadow: 1px 1px 2px var(--app-shadow-color);
        --paper-button: {
          font-family: 'Mitr', sans-serif;
          font-size: 16px;
          background-color: tomato;
          color: white;
        }
      }

      #new-item-balloon {
        display: none;
        z-index: 10;
        margin: 0;
      }

      .items-container {
        @apply(--layout-vertical);
        padding: 20px;
        height: 100%;
      }

      .item {
        width:100px;
        text-decoration: none;
        padding: 0;
        margin: 5px;
        border-radius: 5px;
        @apply(--layout-vertical);
        box-shadow: 1px 1px 2px var(--app-shadow-color);
        background-color: white;
        overflow: hidden;
        border: 2px solid white;
      }

      .item.iron-selected {
        border: 2px solid tomato;
      }

      .item-thumbnail {
        display: block;
        width: 100px;
        height: 100px;
      }

      .icon-thumbnail {
        --iron-icon-width:15px;
        --iron-icon-height:15px;
        --iron-icon-fill-color: black;
        position: absolute;
        z-index:2;
        top: 5px;
        left: 5px;
      }

      .icon-thumbnail-shadow {
        --iron-icon-width:15px;
        --iron-icon-height:15px;
        --iron-icon-stroke-color: white;
        position: absolute;
        z-index:1;
        top: 5px;
        left: 5px;
      }

      #editor {
        margin-left: 20px
      }

      a {
        text-decoration: none;
      }

    </style>

    <div class="vertical layout" style="min-width:150px;height:100vh; border-right:1px dashed tomato">

      <paper-button id="new-item" on-tap="_openNewItemMenu">
        <iron-icon icon="add"></iron-icon> สร้าง
      </paper-button>

      <iron-selector class="items-container" attr-for-selected="name" selected="[[itemId]]">
        <dom-repeat items="[[itemList]]" mutable-data>
      <template>
      <paper-button name="[[item.key]]" class="item" on-click="_onThumbClick">
        <iron-icon class="icon-thumbnail" icon="[[_iconForRole(item.role)]]"></iron-icon>
        <iron-icon class="icon-thumbnail-shadow" icon="[[_iconForRole(item.role)]]"></iron-icon>
        <iron-image class="item-thumbnail" src="[[item.thumbnail]]" sizing="cover"></iron-image>
          [[item.name]]
      </paper-button>
      </template>
        </dom-repeat>
      </iron-selector>

    </div>


    <mg-balloon id="new-item-balloon" no-overlap vertical-align="top" dynamic-align horizontal-align="auto">
      <mg-menu selected-item="{{newItemSelected}}" menu="[[newMenu]]"></mg-menu>
    </mg-balloon>

    <mg-item
      id="editor"
      me="[[me]]"
      item-id="{{itemId}}"
      items={{items}}<commit_msg>Let items use item-image.<commit_after><link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="mg-icons.html">
<link rel="import" href="mg-balloon.html">
<link rel="import" href="mg-menu.html">
<link rel="import" href="mg-item.html">
<link rel="import" href="mg-image.html">
<link rel="import" href="mg-item-image.html">


<dom-module id="mg-items">
  <template strip-whitespace>
    <style>
      :host {
        @apply --layout-horizontal;
      }

      #new-item {
        margin-left: 25px;
        width: 100px;
        padding:0;
        height:40px;
        box-shadow: 1px 1px 2px var(--app-shadow-color);
        --paper-button: {
          font-family: 'Mitr', sans-serif;
          font-size: 16px;
          background-color: tomato;
          color: white;
        }
      }

      #new-item-balloon {
        display: none;
        z-index: 10;
        margin: 0;
      }

      .items-container {
        @apply(--layout-vertical);
        padding: 20px;
        height: 100%;
      }

      .item {
        width: 100px;
        height: 130px;
        margin-bottom: 5px;
      }

      /*
      .iron-selected > * {
        border: 2px solid red;
      }
      */

      .item-thumbnail {
        display: block;
        width: 100px;
        height: 100px;
      }

      .icon-thumbnail {
        --iron-icon-width:15px;
        --iron-icon-height:15px;
        --iron-icon-fill-color: black;
        position: absolute;
        z-index:2;
        top: 5px;
        left: 5px;
      }

      .icon-thumbnail-shadow {
        --iron-icon-width:15px;
        --iron-icon-height:15px;
        --iron-icon-stroke-color: white;
        position: absolute;
        z-index:1;
        top: 5px;
        left: 5px;
      }

      #editor {
        margin-left: 20px
      }

      a {
        text-decoration: none;
      }

    </style>

    <div class="vertical layout" style="min-width:150px;height:100vh; border-right:1px dashed tomato">

      <paper-button id="new-item" on-tap="_openNewItemMenu">
        <iron-icon icon="add"></iron-icon> สร้าง
      </paper-button>

      <iron-selector class="items-container" attr-for-selected="name" selected="[[itemId]]">
      <template is="dom-repeat" items="[[itemList]]" mutable-data>
        <mg-item-image
          name="[[item.key]]"
          label="[[item.name]]"
          role="[[item.role]]"
          src="[[item.thumbnail]]"
          class="item"
          on-click="_onThumbClick"
        ></mg-item-image>
          <!--
        <paper-button name="[[item.key]]" class="item" on-click="_onThumbClick">
          <iron-icon class="icon-thumbnail" icon="[[_iconForRole(item.role)]]"></iron-icon>
          <iron-icon class="icon-thumbnail-shadow" icon="[[_iconForRole(item.role)]]"></iron-icon>
          <iron-image class="item-thumbnail" src="[[item.thumbnail]]" sizing="cover"></iron-image>
            [[item.name]]
        </paper-button>
      -->
      </template>
      </iron-selector>

    </div>


    <mg-balloon id="new-item-balloon" no-overlap vertical-align="top" dynamic-align horizontal-align="auto">
      <mg-menu selected-item="{{newItemSelected}}" menu="[[newMenu]]"></mg-menu>
    </mg-balloon>

    <mg-item
      id="editor"
      me="[[me]]"
      item-id="{{itemId}}"
      items={{items}}
{'fraction_non_alphanumeric': 0.1743256066151552, 'fraction_numerical': 0.016131218652568793, 'mean_word_length': 2.1815437688658905, 'pattern_counts': {'":': 0, '<': 85, '<?xml version=': 0, '>': 84, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3677583', 'n_tokens_mistral': 2555, 'n_tokens_neox': 2403, 'n_words': 395}