<link rel="import" href="gr-create-checkers-dialog.html">

<!-- Expects core to import these functionalities
     gr-list-view/gr-list-view.html
     styles/gr-form-styles.html
     /gr-icons/gr-icons.html
     /iron-input/iron-input.html -->

<dom-module id="gr-checkers-list">
  <template>
    <style include="shared-styles"></style>
    <style include="gr-table-styles"></style>
    <style>
      iron-icon {
        cursor: pointer;
      }
      #filter {
        font-size: var(--font-size-normal);
        max-width: 25em;
      }
      #filter:focus {
        outline: none;
      }
      #topContainer {
        align-items: center;
        display: flex;
        height: 3rem;
        justify-content: space-between;
        margin: 0 1em;
      }
      #createNewContainer:not(.show) {
        display: none;
      }
      a {
        color: var(--primary-text-color);
        text-decoration: none;
      }
      nav {
        align-items: center;
        display: flex;
        height: 3rem;
        justify-content: flex-end;
        margin-right: 20px;
      }
      nav,
      iron-icon {
        color: var(--deemphasized-text-color);
      }
      .nav-iron-icon {
        height: 1.85rem;
        margin-left: 16px;
        width: 1.85rem;
      }
      .nav-buttons:hover {
        text-decoration: underline;
        cursor: pointer;
      }
    </style>


    <div id="topContainer">
      <div>
        <label>Filter:</label>
        <iron-input
            type="text"
            bind-value="{{_filter}}">
          <input
              is="iron-input"
              type="text"
              id="filter"
              bind-value="{{_filter}}">
        </iron-input>
      </div>
      <div id="createNewContainer"
          class$="[[_computeCreateClass(_createNewCapability)]]">
        <gr-button primary link id="createNew" on-tap="_handleCreateClicked">
          Create New
        </gr-button>
      </div>
    </div>

    <table id="list" class="genericList">
      <tr class="headerRow">
        <th class="name topHeader">Checker Name</th>
        <th class="name topHeader">Repository</th>
        <th class="name topHeader">Status</th>
        <th class="name topHeader">Required</th>
        <th class="topHeader description">Checker Description</th>
        <th class="name topHeader"> Edit </th>
      </tr>
      <tbody class$="[[computeLoadingClass(_loading)]]">
        <template is="dom-repeat" items="[[_visibleCheckers]]">
          <tr class="table">
            <td class="name">
              <a>[[item.name]]</a>
            </td>
            <td class="name">[[item.repository]]</td>
            <td class="name">[[item.status]]</td>
            <td class="name">[[_computeBlocking(item)]]</td>
            <td class="description">[[item.description]]</td>
            <td on-tap="_handleEditIconClicked">
              <iron-icon icon="gr-icons:edit"></iron-icon>
            </td>
          </tr>
        </template>
      </tbody>
    </table>

    <nav>
      <template is="dom-if" if="[[_showPrevButton]]">
        <a class="nav-buttons" id="prevArrow"
          on-tap="_handlePrevClicked">
          <iron-icon class="nav-iron-icon" icon="gr-icons:chevron-left"></iron-icon>
        </a>
      </template>
      <template is="dom-if" if="[[_showNextButton]]">
        <a class="nav-buttons" id="nextArrow"
          on-tap="_handleNextClicked">
          <iron-icon icon="gr-icons:chevron-right"></iron-icon>
        </a>
      </template>
    </nav>

    <gr-overlay id="createOverlay" with-backdrop>
      <gr-dialog
          id="createDialog"
          confirm-label="Create"
          on-confirm="_handleCreateConfirm"
          on-cancel="_handleCreateCancel">
        <div class="header" slot="header">
          Create Checkers
        </div>
        <div slot="main">
          <gr-create-checkers-dialog
            id="createNewModal"
            plugin-rest-api="[[pluginRestApi]]">
          </gr-create-checkers-dialog>
        </div>
      </gr-dialog>
    </gr-overlay>
    <gr-overlay id="editOverlay" with-backdrop>
      <gr-dialog
          id="editDialog"
          confirm-label="Save"
          on-confirm="_handleEditConfirm"
          on-cancel="_handleEditCancel">
        <div class="header" slot="header">
          Edit Checker
        </div>
        <div slot="main">
          <gr-create-checkers-dialog
              checker="[[checker]]"
              plugin-rest-api="[[pluginRestApi]]"
              on-cancel="_handleEditCancel"
              id="editModal">
          </gr-create-checkers-dialog>
        </div>
      </gr-dialog>
    </gr-overlay>
      <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
  </template>
  <script src="gr-checkers-list.js"></script>
</dom-module>