<script>
  import Waterfall from './lib/Waterfall.svelte';
  import MyFooter from './lib/MyFooter.svelte';
  import FileBrowser from './lib/FileBrowser.svelte';
  import Reset from './lib/properties/Reset.svelte'
  import Speed from './lib/properties/Speed_slider.svelte';
  import Play from './lib/properties/Play.svelte';
  import Channels from './lib/properties/Channels.svelte';
  import Channel_to_wav from './lib/properties/Channel_to_wav.svelte'
  import Colormap from './lib/properties/Colormap.svelte';
  import Stop from './lib/properties/Stop.svelte';
  import OpenFiles from './lib/properties/OpenFiles.svelte';
  import { datasetname_store, opened_file_store, data_store, stream_state } from './store';
  $: console.log("DATASTORE:", $data_store);
</script>

<main class="container-md">
  <div class="row">
    <h1>DAS data visualization v0.0</h1>
  </div>
  <div class="row">
    <div id="waterfall" class="col">
      <Waterfall />
    </div>
    <div class="col-4 border rounded" id="properties">
      <!-- Buttons and properties -->
      <div class="col" id="stream_buttons"><Play /><Reset /><Stop /></div>
      <OpenFiles />
      <p>{$opened_file_store}{$datasetname_store}</p>
      <FileBrowser />
      <div class="row"><Speed /></div>
      <div class="row"><Colormap /></div>
      <div class="row"><Channels /></div>
      <div class="row"><Channel_to_wav /></div>
    </div>
  </div>
  <MyFooter />
</main>

<style>
main {
  width: max-content;
}

#stream_buttons {
  padding-top: 5px;
  padding-bottom: 5px;
}

#properties {
  float: left;
}
h1 {
  margin-bottom: 1%;
}
</style>
