<link rel="import" href="/local/custom_ui/floorplan/ha-floorplan.html" async>

<dom-module id="ha-panel-clock">

  <template>
    <style include="ha-style">
      .container {
        height: 100%;
        vertical-align: top;
        position: relative;
      }
      [hidden] {
        display: none !important;
      }
    </style>

    <app-toolbar hidden$='{{!showHeader}}'>
      <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
      <div main-title>[[panel.title]]</div>
    </app-toolbar>


    <div class="container">
      <ha-floorplan hass=[[hass]] config=[[panel.config]] is-panel></ha-floorplan>
    </div>

    </app-header-layout>
  </template>

</dom-module>

<script>
  Polymer({
    is: 'ha-panel-clock',

    properties: {
      hass: {
        type: Object,
      },
      narrow: {
        type: Boolean,
        value: false,
      },
      showMenu: {
        type: Boolean,
        value: true,
      },
      showHeader: {
        type: Boolean,
        value: false,
      },
      panel: {
        type: Object,
      }
    },
  });

</script>