<template>
  <div class="card">
    <img>
    <p class="country-location"></p>
    <p></p>
    <p></p>
  </div>
</template>
<section>
</section>

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.card {
  flex: 0 1 400px;
  border: 2px solid red;
  margin: 10px;
  padding: 10px;
  text-align: center;
}
img {
  width: 60%;
  aspect-ratio: 1;
  object-fit: cover;
}
.country-location {
  text-transform: uppercase;
  font-weight: bold;
}

const template = document.querySelector("template");
const section = document.querySelector("section");

async function getData() {
  try {
    const response = await fetch(
      "https://dl.dropboxusercontent.com/scl/fi/ta0b5mzbtumb5j2v7qp4r/properties.csv?rlkey=upol759f9pei5yp4ljcfrmvck&dl=0"
    );
    if (!response.ok) {
      throw new Error(`Response status: ${response.status}`);
    }

    const tsv = await response.text();
    display(tsv);
  } catch (error) {
    alert(error.message);
  }
}

function display(tsv) {
  const rows = tsv.split("\n");
  let cells, clone, image, p, type;

  rows.forEach((r,index) => {
    if (index > 0 && index < r.length) {        // first row is heading, last row is empty
      cells = r.split("\t");
      clone = template.content.cloneNode(true);
      image = clone.querySelector("img");
      image.src = cells[5];
      p = clone.querySelectorAll("p");
      p[0].textContent = cells[0] + " " + cells[1];
      p[1].textContent = cells[2];
      p[2].textContent = cells[3] + "€";
      type = cells[4];                    // pays / maison / appartement (not displayed)
      section.appendChild(clone);
    }
  });
}

getData();