<!DOCTYPE html>
<!--
Copyright (c) 2013 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="/core/analysis/analysis_sub_view.html">
<link rel="import" href="/core/analysis/single_event_sub_view.html">
<link rel="import" href="/core/analysis/related_events.html">

<polymer-element name="tr-c-a-single-thread-slice-sub-view"
    extends="tr-c-a-sub-view">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: row;
    }
    #events {
      display: flex;
      flex-direction: column;
    }

    </style>
    <tr-c-a-single-event-sub-view id="content"></tr-c-a-single-event-sub-view>
    <div id="events">
      <tr-c-a-related-events id="relatedEvents">
      </tr-c-a-related-events>
    </div>
  </template>

  <script>
  'use strict';

  Polymer({
    get selection() {
      return this.$.content.selection;
    },

    set selection(selection) {
      this.$.content.selection = selection;
      this.$.relatedEvents.addRelatedEvents(selection);
      if (this.$.relatedEvents.hasRelatedEvents())
        this.$.relatedEvents.style.display = '';
      else
        this.$.relatedEvents.style.display = 'none';
    }
  });
  </script>
</polymer-element>