const cards = [
  {
    themes: ["Lorem", "Theme1"],
    title: "Lorem ipsum dolor sit.",
    describe:
      "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
    time: "20:00 - 22:00",
    date: "05 Нояб 2022",
  },
  {
    themes: ["Lorem", "Theme2"],
    title: "Lorem ipsum dolor sit.",
    describe:
      "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
    time: "20:00 - 22:00",
    date: "05 Нояб 2022",
  },
  {
    themes: ["Theme1"],
    title: "Lorem ipsum dolor sit.",
    describe:
      "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
    time: "20:00 - 22:00",
    date: "05 Нояб 2022",
  },
  {
    themes: ["Lorem", "Theme1", "Theme2"],
    title: "Lorem ipsum dolor sit.",
    describe:
      "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, a",
    time: "20:00 - 22:00",
    date: "05 Нояб 2022",
  },
  {
    themes: ["Lorem", "Theme1"],
    title: "Lorem ipsum dolor sit.",
    describe:
      "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
    time: "20:00 - 22:00",
    date: "05 Нояб 2022",
  },
  {
    themes: ["Lorem", "Theme1"],
    title: "Lorem ipsum dolor sit.",
    describe:
      "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
    time: "20:00 - 22:00",
    date: "05 Нояб 2022",
  },
  {
    themes: ["Lorem", "Theme1"],
    title: "Lorem ipsum dolor sit.",
    describe:
      "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
    time: "20:00 - 22:00",
    date: "05 Нояб 2022",
  },
  {
    themes: ["Lorem", "Theme1"],
    title: "Lorem ipsum dolor sit.",
    describe:
      "Lorem ipsum dolor sit amet consectetur adlores quos autem est aut, animi numquam fugiatvoluptatem, vero vel, magni expedita aliquid. Tempore vel quastenetur ipsa at ab?",
    time: "20:00 - 22:00",
    date: "05 Нояб 2022",
  },
];

const navigationItems = document.querySelectorAll(".nav__item");

navigationItems.forEach((item) => {
  item.onclick = (elem) => {
    elem.preventDefault();

    navigationItems.forEach((item2) =>
      item2.classList.remove("nav__item_active")
    );

    !item.classList.contains("nav__item_active") &&
      item.classList.add("nav__item_active");
  };
});

/* function createThemes(card) {
  const ul = document.createElement("ul");
  ul.className = "themes";
  card.themes.forEach((theme) => {
    ul.innerHTML = `<li class="themes__name">Lorem</li>`;
    document.ul.append();
  });
} */

cards.forEach((card, index) => {
  const div = document.createElement("div");
  div.className = "card";
  div.innerHTML = `
    <img class="card__image" src="/images/house.jpg" alt="card-image" />
    <ul class="themes">
      ${card.themes.map((theme) => {
        return `<li class="themes__name">${theme}</li>`;
      })}
    </ul>
    <p class="card__title">${card.title}</p>
    <p class="card__describe">
      ${card.describe}<a href="#" class="more">См. подробнее...</a>
    </p>
    <div class="card-inf">
      <p class="card-inf__item time">${card.time}</p>
      <p class="card-inf__item date">${card.date}</p>
    </div>
    <button class="subscribe">Записаться</button>
  `;

  document.querySelector(".cards").append(div);
});