Explorador del catálogo

Explora las películas del videoclub que ya han sido identificadas.

html`${(() => {
  const identified_movies = JSON.parse(
    document.getElementById("identified-movies-data").textContent
  );
  const genres = Array.from(new Set(identified_movies.flatMap(d => d.genre.split(",").map(g => g.trim()).filter(g => g)))).sort();
  const total = identified_movies.length;
  const genreInputWrapper = Inputs.select(genres, { label: "Género(s)", multiple: true, value: [] });
  const genreInput = genreInputWrapper.querySelector("select");
  const searchInputWrapper = Inputs.text({ label: "Buscar", placeholder: "título, director, género..." });
  const searchInput = searchInputWrapper.querySelector("input");
  const tableBody = document.createElement("tbody");
  const shown = document.createElement("span");
  shown.textContent = total;
  shown.className = "catalog-shown-count";

  function renderTable() {
    const selectedOptions = Array.from(genreInput.selectedOptions || []);
    const selectedGenres = selectedOptions.map(o => o.text);
    const q = (searchInput.value || "").toLowerCase();
    const filtered = identified_movies.filter(d => {
      const textMatch = (d.titulo_disponible + " " + d.titulo_videoclub + " " + d.director + " " + d.genre).toLowerCase().includes(q);
      const genreMatch = selectedGenres.length === 0 || selectedGenres.some(g => d.genre.toLowerCase().includes(g.toLowerCase()));
      return textMatch && genreMatch;
    });
    shown.textContent = filtered.length;
    tableBody.innerHTML = "";
    const fragment = document.createDocumentFragment();
    for (const d of filtered) {
      const tr = document.createElement("tr");
      tr.innerHTML = `
        <td>${d.titulo_disponible}</td>
        <td>${d.titulo_videoclub}</td>
        <td>${d.year}</td>
        <td>${d.director}</td>
        <td>${d.genre}</td>
        <td>${d.imdb_url ? `<a href="${d.imdb_url}" target="_blank">IMDb</a>` : ""}</td>
        <td>${d.poster && d.poster !== "noposter.png" ? `<img src="${d.poster}" width="60" alt="poster">` : ""}</td>
      `;
      fragment.appendChild(tr);
    }
    tableBody.appendChild(fragment);
  }

  genreInput.addEventListener("input", renderTable);
  searchInput.addEventListener("input", renderTable);
  renderTable();

  return html`<div class="catalog-layout">
    <div class="catalog-sidebar">
      <h3>Filtros</h3>
      ${genreInputWrapper}
      ${searchInputWrapper}
    </div>
    <div class="catalog-main">
      <table class="table table-striped table-hover catalog-table">
        <thead>
          <tr>
            <th>Título disponible</th>
            <th>Título videoclub</th>
            <th>Año</th>
            <th>Director</th>
            <th>Género</th>
            <th>IMDb</th>
            <th>Poster</th>
          </tr>
        </thead>
        ${tableBody}
      </table>
      <p><strong>Mostrando ${shown} de ${total} películas identificadas.</strong></p>
    </div>
  </div>`;
})()}`