<link rel="import" href="gr-checks-status.html">
<link rel="import" href="gr-checkers-list.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 {
        float:right;
        margin-top: 10px;
      }

      #listOverlay {
        width: 75%;
      }
    </style>

    <template is="dom-if" if="[[_createCheckerCapability]]">
      <gr-button class="configure-button" on-click="_handleConfigureClicked"> Configure </gr-button>
    </template>

    <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)]]">
      <header>
        <h3>Latest checks for Patchset [[revision._number]]</h3>
      </header>

      <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"><!--Checking system--></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="[[_checks]]" 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>