<link rel="import" href="gr-checks-status.html">
<link rel="import" href="gr-checkers-list.html">
<link rel="import" href="gr-checks-item.html">

<dom-module id="gr-checks-view">
  <template>
    <style>
      :host {
        display: block;
        width: 100%;
        overflow: auto;
      }

      table {
        width: 100%;
      }

      gr-checks-item {
        display: table-row;
      }

      .headerRow {
        border-bottom: 1px solid #ddd;
      }

      .topHeader {
        padding-right: 32px;
        padding-bottom: 4px;
        text-align: left;
        white-space: nowrap;
      }

      th.topHeader:last-child {
        width: 100%;
      }

      h2 {
        font-size: 1.17em;
        font-weight: 500;
      }

      h3 {
        flex: 1;
        font-size: 1.17em;
        font-weight: 500;
        margin-bottom: 1.5rem;
      }

      header {
        display: flex;
        margin: 1rem 1rem 0;
      }

      table {
        margin-bottom: 16px;
      }

      th:first-child {
        padding-left: 1rem;
      }

      .no-content {
        min-height: 106px;
        padding: 24px 0;
        text-align: center;
      }

      /* Add max-width 1px to check-message make sure content doesn't
         expand beyond the table width */
      .check-message {
        padding-left: 1rem;
        background: var(--table-subheader-background-color);
        max-width: 1px;
      }

      .message {
        white-space: pre-wrap;
        word-wrap: break-word;
      }

      .message-heading {
        font-weight: bold;
        margin-top: 1em;
      }

      .check-message-heading {
        padding-left: 1em;
      }

      .configure-button-container {
        text-align: right;
        flex: 1;
      }

      .filter {
        margin-left: 10px;
      }

      #listOverlay {
        width: 75%;
      }

      .container {
        display: flex;
        width: 100%;
      }
    </style>

    <header>
      <div class="container">
        <template is="dom-if" if="[[_patchSetDropdownItems.length]]">
          <gr-dropdown-list
            class="patch-set-dropdown"
            items="[[_patchSetDropdownItems]]"
            on-value-change="_handlePatchSetChanged"
            value="[[_currentPatchSet]]">
          </gr-dropdown-list>
        </template>
        <template is="dom-if" if="[[_hasResults(_status)]]">
          <div class="filter">
            <span> Filter By: </span>
            <gr-dropdown-list
              class="check-state-filter"
              items="[[_statuses]]"
              on-value-change="_handleStatusFilterChanged"
              value="[[_currentStatus]]">
            </gr-dropdown-list>
          </div>
        </template>
        <template is="dom-if" if="[[_createCheckerCapability]]">
          <div class="configure-button-container">
            <gr-button on-click="_handleConfigureClicked"> Configure </gr-button>
          </div>
        </template>
      </div>
    </header>

    <template is="dom-if" if="[[_isLoading(_status)]]">
      <div class="no-content">
        <p>Loading...</p>
      </div>
    </template>

    <template is="dom-if" if="[[_isEmpty(_status)]]">
      <div class="no-content">
        <h2>No checks ran for this code review</h2>
        <p>Configure checkers to view the results here.</p>
      </div>
    </template>

    <template is="dom-if" if="[[_isNotConfigured(_status)]]">
      <div class="no-content">
        <h2>Code review checks not configured</h2>
        <p>Configure checkers to view the results here.</p>
      </div>
    </template>

    <template is="dom-if" if="[[_hasResults(_status)]]">
      <table>
        <thead>
          <tr class="headerRow">
            <th class="topHeader"></th>
            <th class="topHeader">Name</th>
            <th class="topHeader">For submit</th>
            <th class="topHeader">Status</th>
            <th class="topHeader">Started</th>
            <th class="topHeader">Duration</th>
            <th class="topHeader"><!-- actions --></th>
            <th class="topHeader"><!-- re-run --></th>
            <th class="topHeader">Description</th>
          </tr>
        </thead>
        <tbody>
          <template is="dom-repeat" items="[[_visibleChecks]]" as="check">
              <tr>
                <gr-checks-item on-retry-check="_handleRetryCheck" on-toggle-check-message="_toggleCheckMessage"
                  check="[[check]]">
                </gr-checks-item>
              </tr>
              <template is="dom-if" if="[[check.showCheckMessage]]">
                <tr>
                  <td colspan="10" class="check-message-heading">
                    <span class="message-heading">
                      Message
                    </span>
                  </td>
                </tr>
                <tr>
                  <td colspan="10" class="check-message">
                    <span class="message"> [[check.message]] </span>
                  </td>
                </tr>
              </template>
          </template>
        </tbody>
      </table>
    </template>

    <gr-checkers-list on-resize="_handleCheckersListResize" plugin-rest-api="[[pluginRestApi]]"></gr-checkers-list>

  </template>
  <script src="gr-checks-view.js"></script>
</dom-module>