<script>
  export let deviceLog;
</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>
      {/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-body-item {
      width: calc(100% / 7);
      display: flex;
      justify-content: start;
      padding: 5px 10px 10px 10px;
    }
    .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>
