<script lang="ts">
    import { onMount } from "svelte";
import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte"  ;
  import { writable } from 'svelte/store';
import RowPropiedad from "../Componentes/RowPropiedad.svelte";
    import type { PropiedadDto } from "../types";

let propiedades = writable<PropiedadDto[]>([]);
let email = localStorage.getItem("email");
let token = sessionStorage.getItem("token");

let fallo: boolean = $state(false);

onMount(async ()=> {
  try {
    const responce = await fetch("http://localhost:5007/api/propiedades/Propietario", {
      method: "GET",
      headers: {
        'Auth': String(token),
        'Email' : String(email),
        'Content-Type' : "application/json"
      },
    });
    if (responce.ok){
      const json = await responce.json();
      propiedades.set(json);
      return;
    }
    
    if (!responce.ok){
      fallo = true;
    } 
  } catch (e){
    console.error(e);
  }
});

</script>

<NavBarAutocompletable/>
<div class="container table-responsive">
  <table class="table-responsive table table-striped">
    <thead>
      <tr>
        <th>#</th>
        <th>ubicacion</th>
        <th>Letra</th>
        <th>Piso</th>
        <th>Tipo</th>
      </tr>
    </thead>
    <tbody>
    {#each $propiedades as propiedad}
      {@debug propiedad}
    	<RowPropiedad id={propiedad.id} ubicacion={propiedad.ubicacion} letra={propiedad.letra} piso={propiedad.piso} tipo={propiedad.tipo}/>
    {/each}
    </tbody>
  </table>
</div>
{#if fallo}
<div class="container alert alert-danger">Fallo al intentar Obtener la lista de propiedades</div>
{/if}
