<script>
  import Button from "./ui/Button.svelte";
  import Stepper from "./ui/Stepper.svelte";
  export let deviceLog;
  let buttonText = "Run";
</script>

<div class="table-wrapper">
  <!-- Tablo başlıkları -->
  <div class="table table-head">
    <div class="table-row">
      <div class="table-head-item">Name</div>
      <div class="table-head-item">Type</div>
      <div class="table-head-item">Manufacturer</div>
      <div class="table-head-item">Serial Number</div>
      <div class="table-head-item">Model</div>
      <div class="table-head-item">Version</div>
      <div class="table-head-item">IP Address</div>
    </div>
    <div class="divider"></div>
  </div>

  <!-- Cihaz bilgileri -->
  <div class="table table-body">
    {#each $deviceLog as log}
      {#if log.sensor_value != undefined}
        <div>{log.sensor_value}</div>
        <div>{log.battery_life}</div>
      {:else}
        <div>door switch</div>
        <div><Button {buttonText} /></div>
        <br>
        <div><Stepper /></div>
        <br>
      {/if}
    {/each}
    <div class="divider"></div>
  </div>
</div>

<style>
  .table-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    flex-direction: column;
    background-color: white;
    width: 95%;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
  }
  .table {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .table-head-item {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 5px 10px 10px 10px;
    color: #535151;
    font-size: 16px;
  }
  .table-row {
    display: flex;
    width: 100%;
    text-decoration: none;
    color: inherit;
  }
  .table-head {
    font-size: 15px;
  }
  .divider {
    width: 100%;
    background-color: #f2f2f2;
    height: 1px;
  }
  /* Link bileşeni üzerinde cursor:pointer stilini uygulama */
  :global(.svelte-routing-link) {
    display: flex;
    width: 100%;
    text-decoration: none;
    color: inherit;
  }
  :global(.svelte-routing-link:hover) {
    cursor: pointer;
    display: flex;
    width: 100%;
    text-decoration: none;
    color: inherit;
    background-color: #f3f3f3;
  }
</style>
