<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">

      {/*Main 3 column grid */}
      <div className="flex flex-col lg:flex-row gap-4">
        {/*Left column */}
        <div className="flex-1">
          <section aria-labelledby="section-1-title">
            {/*<h2 className="sr-only" id="section-1-title">Section title</h2>*/}
            <div className="rounded-lg bg-white h-full overflow-hidden shadow">
              <div className="p-2 bg-black h-full flex align-middle">
                {
                  renderPlayer(currentItem)
                }
              </div>
            </div>
          </section>
        </div>

        {/*Right column */}
        <div
          className={classNames(
            'lg:w-72  bg-slate-300',
            { ' ': props.showFullPlaylist },
            { 'h-96 lg:h-auto flex flex-shrink-0': !props.showFullPlaylist }
          )}>
          <section
            aria-labelledby="section-2-title"
            className="flex-grow-1 h-full w-full flex flex-col overflow-scroll remove-scrollbar"
          >
            {/*
            <h2 className="flex-shrink-0 sr-only" id="section-2-title">
              Section title
            </h2>
            */}
            <div
              className={classNames(
                'flex-grow-1  rounded-lg shadow ',
                { 'lg:h-0': props.showFullPlaylist },
                { 'h-0': !props.showFullPlaylist },
              )}>
              <div className="p-2 bg-slate-300">
                {
                  props.items.map((item,index) =>  (
                    <div
                      key={`${item.youtubeId}${index}`} onClick={() => doItemAction(item)}>
                      <PlayListItemRenderer
                        item={item}
                        selected={!!item?.youtubeId && (item?.youtubeId === currentItem?.youtubeId)} />
                    </div>)
                  )
                }
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>