<dom-module id="gr-checks-item">
  <template>
    <style>
      :host {
        border-top: 1px solid var(--border-color);
      }

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

      td {
        padding: 1px 32px 1px 0;
        white-space: nowrap;
      }

      a.log {
        margin-right: 16px;
        display: inline-block;
      }
      .nav-icon {
        cursor: pointer;
      }
      .duration {
        text-align: center;
      }
    </style>
    <td>
      <template is="dom-if" if="[[check.message]]">
          <iron-icon class="nav-icon expand-message" on-click="_toggleMessageShown"
            icon="[[_computeExpandIcon(showCheckMessage)]]">
          </iron-icon>
      </template>
    </td>
    <td>[[check.checker_name]]</td>
    <td>[[_requiredForMerge]]</td>
    <td>
      <gr-checks-status show-text status="[[check.state]]" downgrade-failure-to-warning="[[false]]"></gr-checks-status>
    </td>
    <td>
      <gr-date-formatter
        has-tooltip
        show-date-and-time
        date-str="[[_startTime]]">
      </gr-date-formatter>
    </td>
    <td class="duration">[[_duration]]</td>
    <td>
      <a href$="[[check.url]]" target="_blank" class="log">
        <gr-button link no-uppercase disabled="[[!check.url]]">
          Details
        </gr-button>
      </a>
    </td>
    <td>
      <gr-button
        link
        no-uppercase
        on-click="_handleReRunClicked">
        Re-run
      </gr-button>
    </td>
    <td>[[check.checker_description]]</td>
  </template>
  <script src="gr-checks-item.js"></script>
</dom-module>