// Client-side render functions
    window.clientRender = {
      renderStorageSpot(position, bottle, readOnly = false) {
        
        const bottleClass = bottle ? 
          (bottle.type === 'red' ? 'bg-red-200' : 
           bottle.type === 'white' ? 'bg-yellow-100' :
           bottle.type === 'champagne' ? 'bg-amber-100' :
           bottle.type === 'sparkling' ? 'bg-amber-100' :
           'bg-pink-200') : '';

        return `
          <div
            class="storage-spot relative w-26 h-24 border border-gray-300 rounded-lg shadow-sm flex justify-center ${bottle ? bottleClass : 'bg-white hover:bg-gray-50'}"
            data-position="${position}"
          >
            ${bottle ? `
              <div
                class="bottle w-full h-full absolute inset-0 p-2"
                data-bottle-id="${bottle.id}"
                draggable="${!readOnly}"
                onclick="${!readOnly ? `editWineDetails('${bottle.id}')` : ''}"
                
                style="cursor: pointer"
              >
                <div class="w-full">
                  <div class="text-sm font-medium line-clamp-2 break-words">${bottle.full_wine_name}</div>
                  ${bottle.vintage ? `<div class="text-sm text-gray-600 mt-0.5">${bottle.vintage}</div>` : ''}
                </div>

                <div class="w-full text-xs flex">
                  ${bottle.average_retail_price_usd > 0 ? '<div class="mr-1">$'+bottle.average_retail_price_usd+'</div>' : ''}
                  ${getCountryFlag(bottle.country, 'w-4 h-4')}
                </div>
                
              </div>
            ` : !readOnly ? `
              <button 
                class="add-bottle w-full h-full absolute inset-0 flex items-center justify-center text-gray-400 hover:text-gray-600 text-2xl"
                onclick="showBulkUpload()"
              >
                +
              </button>
            ` : ''}
          </div>
        `.trim();
      },

      renderStandardRack(bottles, config, readOnly = false) {
        return `
          <div class="mb-8">
            <div class="flex justify-between items-center mb-4">
              <h3 class="text-lg font-semibold">Standard Storage</h3>
            </div>
            <div class="grid gap-4 grid-cols-2 lg:grid-cols-4">
              ${Array.from({ length: config.slots }).map((_, index) => {
                const position = `standard-${config.slots - index}`; // Count down instead of up
                return this.renderStorageSpot(position, bottles.find(b => b.position === position), readOnly);
              }).join('')}
            </div>
          </div>
        `.trim();
      },

      renderDiamondRack(bottles, config, readOnly = false) {
        return `
          <div class="mb-8">
            <div class="flex justify-between items-center mb-4">
              <h3 class="text-lg font-semibold">Secondary Storage</h3>
            </div>
            <div class="grid gap-4 grid-cols-2 lg:grid-cols-4">
              ${Array.from({ length: config.slots }).map((_, index) => {
                const position = `diamond-${config.slots - index}`; // Count down instead of up
                return this.renderStorageSpot(position, bottles.find(b => b.position === position), readOnly);
              }).join('')}
            </div>
          </div>
        `.trim();
      },

      renderBulkStorage(bottles, config, readOnly = false) {
        return `
          <div class="mb-8">
            <div class="flex justify-between items-center mb-4">
              <h3 class="text-lg font-semibold">Bulk Storage</h3>
            </div>
            <div class="grid gap-4 grid-cols-2 lg:grid-cols-4">
              ${Array.from({ length: config.slots }).map((_, index) => {
                const position = `bulk-${config.slots - index}`; // Count down instead of up
                return this.renderStorageSpot(position, bottles.find(b => b.position === position), readOnly);
              }).join('')}
            </div>
          </div>
        `.trim();
      },

      sortAndAggregateStats(type, bottles){
        const objStats = bottles
          .filter(b => b[type] != null && b[type] !== '')
          .reduce((acc, bottle) => {
            const obj = bottle[type].toString();
            acc[obj] = (acc[obj] || 0) + 1;
            return acc;
          }, {});

        const sortedObjStats = Object.entries(objStats)
          .map(([value, count]) => ({ value, count }))
          .sort((a, b) => b.count - a.count);

        return sortedObjStats;
      },

      renderSidebar(bottles, originalBottles = window.winecellar.bottles) {
        const ITEMS_TO_SHOW = 5; // Number of items to show before "Show more"

        const statsArray = [
          { type:'Total', count: originalBottles.length }, 
          { type:'Red', count: originalBottles.filter(b => b.type.toLowerCase() === 'red').length },
          { type:'White', count: originalBottles.filter(b => b.type.toLowerCase() === 'white').length}, 
          { type:'Champagne', count: originalBottles.filter(b => b.type.toLowerCase() === 'champagne').length},
          { type:'Sparkling', count: originalBottles.filter(b => b.type.toLowerCase() === 'sparkling').length},
          { type:'Rose', count: originalBottles.filter(b => b.type.toLowerCase() === 'rose').length}
        ].sort((a, b) => b.count - a.count);

        const sortedRegionStats = this.sortAndAggregateStats('region', originalBottles);
        const sortedCountryStats = this.sortAndAggregateStats('country', originalBottles);
        const sortedVintageStats = this.sortAndAggregateStats('vintage', originalBottles);
        //const sortedGrapeStats = this.sortAndAggregateStats('grape_variety', originalBottles);
        
        // grape variety requires different handling due to mix blend
        const grapeStats = originalBottles.reduce((acc, bottle) => {
          if (!bottle.grape_variety) return acc;
          
          // First split only on commas
          const grapes = bottle.grape_variety
            .split(',')
            .map(g => g.trim().toLowerCase())
            // Split on specific connectors while preserving complete variety names
            .map(g => g.replace(/s+(and|with|&)s+/g, ','))
            .join(',')
            .split(',')
            .map(g => g.trim())
            .filter(g => g && g.length > 1) // Filter out empty strings and single characters
            // Filter out common joining words if they appear alone
            .filter(g => !['and', 'with', '&'].includes(g));
            
          // Count each variety separately
          grapes.forEach(grape => {
            acc[grape] = (acc[grape] || 0) + 1;
          });
          
          return acc;
        }, {});

        const sortedGrapeStats = Object.entries(grapeStats)
          .map(([grape, count]) => ({ grape, count }))
          .sort((a, b) => b.count - a.count);

        //render more button
        const renderExpandableSection = (items, sectionType, itemRenderer) => {
          const isExpanded = window.sidebarState[`${sectionType}Expanded`];
          const visibleItems = isExpanded ? items : items.slice(0, ITEMS_TO_SHOW);
          const hasMore = items.length > ITEMS_TO_SHOW;

          return `
            <div>
              ${visibleItems.map(itemRenderer).join('')}
              ${hasMore ? `
                <button 
                  onclick="loadMoreSidebarSectionContent('${sectionType}Expanded')"
                  class="w-full text-sm text-gray-500 hover:text-gray-700 pt-2"
                >
                  ${isExpanded ? 'Show less' : `Show ${items.length - ITEMS_TO_SHOW} more`}
                </button>
              ` : ''}
            </div>
          `;
        };

        return `
          <div class="lg:w-64 bg-white p-6 shadow-sm rounded-lg h-fit space-y-6">
            
            <div>
              <h3 class="font-semibold">Categories</h3>
              <hr class="h-1 my-3 bg-gray-100 border-0 rounded dark:bg-gray-700">
                ${statsArray[0].count > 0 ? statsArray.map(({ type, count }) => count > 0 ? `
                  <button 
                    onclick="handleFilterClick('type', '${type}')"
                    class="flex justify-between items-center w-full px-1 hover:bg-gray-100 rounded ${
                      window.winecellar.filter.type === 'type' && 
                      window.winecellar.filter.value === type.toLowerCase() 
                        ? 'bg-gray-100' 
                        : ''
                    }"
                  >
                    <span class="text-gray-600">${type}</span>
                    <span class="font-medium">${count}</span>
                  </button>
                ` : '').join('') : '<div class="text-gray-500 text-sm">Cellar is empty</div>'}
            </div>

            <div>
              <h3 class="font-semibold">Variety</h3>
              <hr class="h-1 my-3 bg-gray-100 border-0 rounded dark:bg-gray-700">
                ${sortedGrapeStats.length > 0 
                  ? renderExpandableSection(
                      sortedGrapeStats,
                      'varieties',
                      item => `
                      <button 
                        onclick="handleFilterClick('grape', '${item.grape}')"
                        class="flex justify-between items-center w-full px-1 hover:bg-gray-100 rounded ${
                          window.winecellar.filter.type === 'grape' && 
                          window.winecellar.filter.value === item.grape.toLowerCase() 
                            ? 'bg-gray-100' 
                            : ''
                        }"
                      >
                        <span class="text-gray-600">${item.grape}</span>
                        <span class="font-medium">${item.count}</span>
                      </button>
                    `)
                  : '<div class="text-gray-500 text-sm">Variety data not available</div>'
                }
            </div>

            <div>
              <h3 class="font-semibold">Region</h3>
              <hr class="h-1 my-3 bg-gray-100 border-0 rounded dark:bg-gray-700">
                ${sortedRegionStats.length > 0 
                  ? renderExpandableSection(
                      sortedRegionStats,
                      'regions',
                      item => ` 
                      <button 
                        onclick="handleFilterClick('region', '${item.value}')"
                        class="flex justify-between items-center w-full px-1 hover:bg-gray-100 rounded ${
                          window.winecellar.filter.type === 'region' && 
                          window.winecellar.filter.value === item.value.toLowerCase() 
                            ? 'bg-gray-100' 
                            : ''
                        }"
                      >
                        <span class="text-gray-600">${item.value}</span>
                        <span class="font-medium">${item.count}</span>
                      </button>
                    `)
                  : '<div class="text-gray-500 text-sm">Region data not available</div>'
                }
            </div>

            <div>
              <h3 class="font-semibold">Country</h3>
              <hr class="h-1 my-3 bg-gray-100 border-0 rounded dark:bg-gray-700">
                ${sortedCountryStats.length > 0 
                  ? renderExpandableSection(
                      sortedCountryStats,
                      'countries',
                      item => `<button 
                        onclick="handleFilterClick('country', '${item.value}')"
                        class="flex justify-between items-center w-full px-1 hover:bg-gray-100 rounded ${
                          window.winecellar.filter.type === 'country' && 
                          window.winecellar.filter.value === item.value.toLowerCase() 
                            ? 'bg-gray-100' 
                            : ''
                        }"
                      >
                        <span class="text-gray-600">${item.value}</span>
                        <span class="font-medium">${item.count}</span>
                      </button>
                    `)
                  : '<div class="text-gray-500 text-sm">Country data not available</div>'
                }
            </div>

            <div>
              <h3 class="font-semibold">Vintages</h3>
              <hr class="h-1 my-3 bg-gray-100 border-0 rounded dark:bg-gray-700">
                ${sortedVintageStats.length > 0 
                  ? renderExpandableSection(
                      sortedVintageStats,
                      'vintages',
                      item => `
                        <button 
                          onclick="handleFilterClick('vintage', '${item.value}')"
                          class="flex justify-between items-center w-full px-1 hover:bg-gray-100 rounded ${
                            window.winecellar.filter.type === 'vintage' && 
                            window.winecellar.filter.value === item.vintage 
                              ? 'bg-gray-100' 
                              : ''
                          }"
                        >
                          <span class="text-gray-600">${item.value}</span>
                          <span class="font-medium">${item.count}</span>
                        </button>
                      `)
                  : '<div class="text-gray-500 text-sm">No vintage wines</div>'
                }
            </div>
          </div>
        `.trim();
      },

      renderWineCellar(bottles, config, settings, readOnly = false) {
        return `
          <div class="flex flex-col mt-6 min-h-screen">

            <div class="md:mb-4" id="explain">
              <img class="w-14 h-14" style="float:left;margin-right:14px" src="https://static.scanbills.com/winekitty/favicon.svg" /> 
              <div class="text-lg md:text-xl">Winekitty is a wine cellar app. Upload your wine list or label and our AI model will figure out the rest. No manual entry. No sign ups. No social. Just wine. </div>
              <hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
            </div>

            <div class="lg:flex-1 lg:flex gap-8">
              <div class="wine-cellar lg:flex-1">
                <div class="lg:flex justify-between items-center mb-6">
                  <div class="lg:flex items-center gap-4 mb-4 lg:mb-0">
                    <h1 id="cellar-title" class="text-2xl font-bold" onclick="${!readOnly ? 'editTitle()' : ''}">${settings.title}</h1>
                  </div>
                  
                    <div class="flex gap-2">
                      ${share < 1 ? `
                        <button 
                          onclick="showBulkUpload()"
                          class="text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"
                        >
                          Upload wine list
                        </button>
                       <button 
                          onclick="shareWineCellar()"
                          class="text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800"
                        >
                          Share
                        </button>
                      ` : ''}

                      <!-- Mobile Filter Button - visible only on mobile -->
                      <button 
                        onclick="toggleMobileSidebar()"
                        class="md:hidden text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800"
                        aria-label="Show filters"
                      >
                        Filter
                      </button>
                    </div>
                  
                </div>
                ${this.renderStandardRack(bottles, config.standard, readOnly)}
                ${this.renderDiamondRack(bottles, config.diamond, readOnly)}
                ${this.renderBulkStorage(bottles, config.bulk, readOnly)}
              </div>
              
              <div id="sidebar-container" 
                class="transform transition-transform duration-300 md:transform-none
                md:relative md:translate-x-0 fixed top-0 right-0 h-full w-80 
                translate-x-full bg-white md:bg-transparent md:w-64 z-40">
                ${this.renderSidebar(bottles)}
              </div>
              
            </div>
            
              <div id="footer" class="text-sm pt-2 border-t-2 border-gray-300 mt-8 pb-6 flex justify-left">
                <p class="mr-4 text-gray-600"><a href="mailto:hi@winekitty.com">hi@winekitty.com</a></p>
                  ${share < 1 ? `
                    <a href="#" 
                      onclick="resetConfig()"
                      class="border-b-2 border-red-600 text-red-700"
                    >
                      Reset Wine Cellar
                    </a>
                  ` : ''}
              </div>
          </div>
        `.trim();
      }
    };