template.haml

%html{:lang => "en"}
  %head
    %meta{:charset => "utf-8"}
    %meta{:name => "viewport", :content => "width=device-width, initial-scale=1.0, viewport-fit=cover"}
    %title Hey, Cochrane... 🤔

    %link{:rel => "stylesheet", :href => "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css", :integrity => "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm", :crossorigin => "anonymous"}
    %link{:href => "https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Geist:wght@400;500&family=Nunito:wght@700&display=swap", :rel => "stylesheet"}
    %link{:rel => "stylesheet", :href => "style.css"}

  %body
    .container
      %a{:href => "https://github.com/henryaj/heycochrane", :class => "github-corner", :"aria-label" => "View source on Github"}
        <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

      .row.header
        .col-12.center-block.pt-4
          %h1.display-1
            Hey, Cochrane...
            🤔
          %p
            Digestible summaries of
            %a{:href => "http://cochrane.org"} Cochrane reviews
            – which are as close to medical "truth" as exists.

      .row.mb-4
        .col-12
          .search-box
            %input#search-input.form-control{:type => "text", :placeholder => "Search questions... (e.g., 'vitamin', 'cancer', 'exercise')"}
          .mt-2.d-flex.justify-content-between.align-items-center
            %span#result-count.text-muted
            .sort-options
              %label.mr-2 Sort by:
              %select#sort-select.form-control.form-control-sm{:style => "width: auto; display: inline-block;"}
                %option{:value => "default"} Default
                %option{:value => "latest"} Latest
                %option{:value => "interest"} Most Interesting

      .row.mb-3#tag-filter-section
        .col-12
          %div#tag-buttons

      #summaries-container

      #scroll-sentinel

      #loading-indicator{:style => "display: none;"}
        .spinner
        %p Loading more reviews...

      #end-of-results{:style => "display: none;"}
        %p All reviews loaded

      .footer
        .row
          .col-12
            %p.text-muted
              Definitely not to be construed as medical advice • Not affiliated with Cochrane • by
              %a{:href => "http://henrystanley.com"} Henry Stanley

    / Scroll to top button
    %button#scroll-to-top.scroll-to-top{"aria-label" => "Scroll to top"}
      %svg{:width => "24", :height => "24", :viewBox => "0 0 24 24", :fill => "none", :stroke => "currentColor", :"stroke-width" => "2"}
        %polyline{:points => "18 15 12 9 6 15"}

    %script{:src => "https://code.jquery.com/jquery-3.2.1.slim.min.js", :integrity => "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN", :crossorigin => "anonymous"}
    %script{:src => "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js", :integrity => "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl", :crossorigin => "anonymous" }

    :javascript
      const allSummaries = #{summaries_json};
      const tagMetadata = #{tag_metadata_json};

      // State
      const ITEMS_PER_LOAD = 20;
      let filteredSummaries = allSummaries;
      let selectedTags = [];
      let currentSort = 'default';
      let displayedCount = 0;
      let isLoading = false;
      let allItemsLoaded = false;

      // Utility functions
      function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
      }

      function formatDate(dateStr) {
        if (!dateStr) return '';
        const date = new Date(dateStr);
        const months = ['January', 'February', 'March', 'April', 'May', 'June',
                        'July', 'August', 'September', 'October', 'November', 'December'];
        const day = date.getDate();
        const month = months[date.getMonth()];
        const year = date.getFullYear();
        return `${day} ${month} ${year}`;
      }

      // Render a single summary card
      function renderSummary(s) {
        const tagBadges = (s.tags || []).map(tag => {
          const meta = tagMetadata[tag] || { name: tag };
          return `<span class="badge badge-light tag-badge mr-1" title="${escapeHtml(meta.description || '')}" onclick="toggleTagFilter('${tag}')">${escapeHtml(meta.name)}</span>`;
        }).join('');

        const dateHtml = s.date ? `<div class="summary-date">${formatDate(s.date)}</div>` : '';

        return `
          <div class="row summary-item">
            <div class="col-md-9 col-sm-12">
              <div>
                <h2>${escapeHtml(s.question)}</h2>
              </div>
            </div>
            <div class="col-md-3 col-sm-12">
              <h3>
                <a href="${escapeHtml(s.url)}">${escapeHtml(s.answer)}</a>
              </h3>
              ${dateHtml}
            </div>
            <div class="col-md-9 col-sm-12">
              <p>${escapeHtml(s.notes)}</p>
              <div class="tags-container">${tagBadges}</div>
            </div>
          </div>
        `;
      }

      // Infinite scroll functions
      function renderInitialItems() {
        const container = document.getElementById('summaries-container');
        container.innerHTML = '';
        displayedCount = 0;
        allItemsLoaded = false;
        document.getElementById('end-of-results').style.display = 'none';
        loadMoreItems();
        updateResultCount();
      }

      function loadMoreItems() {
        if (isLoading || allItemsLoaded) return;

        const remaining = filteredSummaries.length - displayedCount;
        if (remaining <= 0) {
          allItemsLoaded = true;
          showEndOfResults();
          return;
        }

        isLoading = true;
        showLoadingIndicator();

        // Small delay for smoother UX
        setTimeout(() => {
          const container = document.getElementById('summaries-container');
          const itemsToLoad = Math.min(ITEMS_PER_LOAD, remaining);
          const newItems = filteredSummaries.slice(displayedCount, displayedCount + itemsToLoad);

          newItems.forEach(s => {
            container.insertAdjacentHTML('beforeend', renderSummary(s));
          });

          displayedCount += itemsToLoad;
          isLoading = false;
          hideLoadingIndicator();

          if (displayedCount >= filteredSummaries.length) {
            allItemsLoaded = true;
            showEndOfResults();
          }
        }, 100);
      }

      function showLoadingIndicator() {
        document.getElementById('loading-indicator').style.display = 'block';
        document.getElementById('end-of-results').style.display = 'none';
      }

      function hideLoadingIndicator() {
        document.getElementById('loading-indicator').style.display = 'none';
      }

      function showEndOfResults() {
        document.getElementById('loading-indicator').style.display = 'none';
        if (filteredSummaries.length > ITEMS_PER_LOAD) {
          document.getElementById('end-of-results').style.display = 'block';
        }
      }

      function initInfiniteScroll() {
        const sentinel = document.getElementById('scroll-sentinel');
        const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting && !isLoading && !allItemsLoaded) {
              loadMoreItems();
            }
          });
        }, {
          rootMargin: '200px',
          threshold: 0
        });
        observer.observe(sentinel);
      }

      // Result count
      function updateResultCount() {
        const countEl = document.getElementById('result-count');
        const searchInput = document.getElementById('search-input');
        if (searchInput.value.trim() || selectedTags.length > 0) {
          countEl.textContent = `Found ${filteredSummaries.length} results`;
        } else {
          countEl.textContent = `${allSummaries.length} Cochrane reviews`;
        }
      }

      // Filter and sort
      function applyFilters() {
        const query = document.getElementById('search-input').value.toLowerCase().trim();
        let results = allSummaries;

        if (query) {
          results = results.filter(s =>
            s.question.toLowerCase().includes(query) ||
            (s.notes && s.notes.toLowerCase().includes(query)) ||
            s.answer.toLowerCase().includes(query)
          );
        }

        if (selectedTags.length > 0) {
          results = results.filter(s =>
            selectedTags.every(tag => (s.tags || []).includes(tag))
          );
        }

        if (currentSort === 'interest') {
          results = [...results].sort((a, b) => (b.interest || 0) - (a.interest || 0));
        } else if (currentSort === 'latest') {
          results = [...results].sort((a, b) => {
            if (!a.date && !b.date) return 0;
            if (!a.date) return 1;
            if (!b.date) return -1;
            return new Date(b.date) - new Date(a.date);
          });
        }

        filteredSummaries = results;
        renderInitialItems();
      }

      function toggleTagFilter(tag) {
        if (selectedTags.includes(tag)) {
          selectedTags = [];
        } else {
          selectedTags = [tag];
        }
        renderTagButtons();
        applyFilters();
      }

      function renderTagButtons() {
        const container = document.getElementById('tag-buttons');
        const usedTags = new Set();

        allSummaries.forEach(s => {
          (s.tags || []).forEach(tag => usedTags.add(tag));
        });

        const sortedTags = Array.from(usedTags).sort((a, b) => {
          const nameA = (tagMetadata[a] || { name: a }).name.toLowerCase();
          const nameB = (tagMetadata[b] || { name: b }).name.toLowerCase();
          return nameA.localeCompare(nameB);
        });

        let html = '';
        sortedTags.forEach(tag => {
          const meta = tagMetadata[tag] || { name: tag };
          const isSelected = selectedTags.includes(tag);
          const btnClass = isSelected ? 'tag-filter-btn-selected' : 'tag-filter-btn';
          const tooltip = meta.description ? `<span class="tag-tooltip">${escapeHtml(meta.description)}</span>` : '';
          html += `<span class="badge ${btnClass} mr-1 mb-1" style="cursor: pointer;" onclick="toggleTagFilter('${tag}')">${escapeHtml(meta.name)}${tooltip}</span>`;
        });

        container.innerHTML = html;
      }

      // Scroll to top
      function initScrollToTop() {
        const button = document.getElementById('scroll-to-top');

        window.addEventListener('scroll', () => {
          if (window.scrollY > 500) {
            button.classList.add('visible');
          } else {
            button.classList.remove('visible');
          }
        }, { passive: true });

        button?.addEventListener('click', () => {
          window.scrollTo({ top: 0, behavior: 'smooth' });
        });
      }

      // Event listeners
      let searchTimeout;
      document.getElementById('search-input').addEventListener('input', function(e) {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => applyFilters(), 200);
      });

      document.getElementById('sort-select').addEventListener('change', function(e) {
        currentSort = e.target.value;
        applyFilters();
      });

      // Initialize
      renderTagButtons();
      initInfiniteScroll();
      initScrollToTop();
      renderInitialItems();