const cards = [
  {
    id: 1,
    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",
    forWhome:
      "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.",
    fullDescription:
      "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. ",
    people: 10,
  },
  {
    id: 2,
    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",
    forWhome:
      "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.",
    fullDescription:
      "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. ",
    people: 12,
  },
  {
    id: 3,
    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",
    forWhome:
      "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.",
    fullDescription:
      "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. ",
    people: 4,
  },
  {
    id: 4,
    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",
    forWhome:
      "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.",
    fullDescription:
      "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. ",
    people: 8,
  },
  {
    id: 5,
    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",
    forWhome:
      "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.",
    fullDescription:
      "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. ",
    people: 5,
  },
  {
    id: 6,
    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",
    forWhome:
      "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.",
    fullDescription:
      "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. ",
    people: 15,
  },
  {
    id: 7,
    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",
    forWhome:
      "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.",
    fullDescription:
      "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. ",
    people: 20,
  },
  {
    id: 8,
    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",
    forWhome:
      "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Omnis eligendi corporis repudiandae dolore possimus voluptas amet. Nisi iusto illum dignissimos soluta nemo ex temporibus autem.",
    fullDescription:
      "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est placeat ipsa rerum atque, tenetur ad facere? Voluptatibus, soluta pariatur? Excepturi laboriosam quaerat reiciendis ducimus numquam deleniti incidunt id provident inventore. Voluptatum placeat obcaecati suscipit ducimus facere reprehenderit quisquam iure illum maiores explicabo quos et vel sequi architecto, magni, ea ab? Beatae culpa in eos totam voluptatum animi soluta, nostrum officia. Officiis, accusamus est, dolor reiciendis numquam ipsa iusto quam illo vitae explicabo voluptates soluta repellendus dolorum voluptatum quis nam, autem quibusdam harum? Fugit fugiat sint voluptates facilis, magni minima sunt. ",
    people: 7,
  },
];

const navigationItems = document.querySelectorAll(".nav__item");
const url = window.location.pathname;
const width = window.innerWidth;
let subscribe;

console.log(width);

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 fillMainPage() {
  setCards(cards);
}

function setCards(cards) {
  cards.forEach((card, index) => {
    const div = document.createElement("div");
    div.className = "card";
    div.innerHTML = `
    <div class='${
      (width <= 1024 && index % 2 === 0) || (width > 1024 && index % 4 === 0)
        ? "card-inner extreme"
        : "card-inner"
    }'>
      <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
        } <button value=${index} class="more">См. подробнее...</button>
      </p>
      <div class="card-inf">
        <p class="card-inf__item time">${card.time}</p>
        <p class="card-inf__item date">${card.date}</p>
      </div>
    </div>
    <div class="buttow-wrapper">
      <button value=${index} class="subscribe">Записаться</button>
    </div>
  `;

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

  subscribe = [
    ...document.querySelectorAll(".subscribe"),
    ...document.querySelectorAll(".more"),
  ];

  subscribe.forEach((el) => {
    el.addEventListener("click", () => {
      console.log(el.value);
      localStorage.setItem("card", JSON.stringify(cards[el.value]));
      location.href = "about.html";
    });
  });
}