<!DOCTYPE html>
<!--
Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="/tracing/base/utils.html">
<link rel="import" href="/tracing/ui/base/dom_helpers.html">

<polymer-element name="tr-ui-b-table-header-cell"
    on-tap="onTap_">
  <template>
  <style>
    :host {
      -webkit-user-select: none;
      display: flex;
    }

    span {
      flex: 0 1 auto;
    }

    side-element {
      -webkit-user-select: none;
      flex: 1 0 auto;
      padding-left: 4px;
      vertical-align: top;
      font-size: 15px;
      font-family: sans-serif;
      display: inline;
      line-height: 85%;
    }
  </style>

    <span id="title"></span><side-element id="side"></side-element>
  </template>

  <script>
  'use strict';

  Polymer({
    created: function() {
      this.tapCallback_ = undefined;
      this.cellTitle_ = '';
    },

    set cellTitle(value) {
      this.cellTitle_ = value;

      var titleNode =
          tr.ui.b.asHTMLOrTextNode(this.cellTitle_, this.ownerDocument);

      this.$.title.innerText = '';
      this.$.title.appendChild(titleNode);
    },

    get cellTitle() {
      return this.cellTitle_;
    },

    clearSideContent: function() {
      this.$.side.textContent = '';
    },

    set sideContent(content) {
      this.$.side.textContent = content;
    },

    get sideContent() {
      return this.$.side.textContent;
    },

    set tapCallback(callback) {
      this.style.cursor = 'pointer';
      this.tapCallback_ = callback;
    },

    get tapCallback() {
      return this.tapCallback_;
    },

    onTap_: function() {
      if (this.tapCallback_)
        this.tapCallback_();
    }
  });
</script>
</polymer-element>