<turbo-stream action="replace" targets="#home-recommended-video-playlist">
    <template><div id="home-recommended-video-playlist">
  <div class="video-playlist-initial d-flex flex-column justify-content-center align-items-center gap-4">
    
        <div class="col-xl-8 col-lg-10 col-12 pb-5">
    <div class="position-relative d-flex w-full" style="
      background: linear-gradient(135deg, #1e1e1e, #2c2c2c);
      aspect-ratio: 16/9;
        border-radius: 20px;
    ">
    <div id="videoPlayer92" class="video-player-iframe position-absolute top-0 start-0 w-100 h-100">
      <div style="position: relative; padding-top: 56.25%; " class="cursor-pointer" data-controller="free-video-card"
           data-free-video-card-video-id-value="92">
        <iframe
                id="iframe92"
                src="https://customer-hqsxsu60sej54ilh.cloudflarestream.com/5c8cd35678e76f8fc98777dbccc48ac9/iframe?preload=true"
                style="border: #0d6efd; border-radius: 20px; position: absolute; top: 0; left: 0; height: 100%; width: 100%; "
                allow="accelerometer; gyroscope; encrypted-media; picture-in-picture;"
                allowfullscreen
        ></iframe>
      </div>
    </div>
    <div
        class="position-absolute top-0 start-0 w-100 h-100"
        style="
        background: url('https://imagedelivery.net/Erat9NrLUQmyxD408cllYg/4e4a35cd-5ad3-40fd-fb3f-99d0fcfb8300/public') center center / cover no-repeat;
        filter: brightness(0.21);  /* or use rgba overlay instead */
        border-radius: 20px;
                pointer-events: none;
      ">
    </div>
    <div>
        <div class="blocker position-absolute bottom-0 start-0 end-0 w-100 h-25" style="
            background: transparent;
            pointer-events: auto;

        "></div>
    </div>
    <div style="pointer-events: none" class="video-buttons position-absolute top-50 start-50 translate-middle text-center d-flex flex-column align-items-center gap-2 col-md-6 col-sm-8 col-10">
      <button class="btn btn-outline-light btn-sizing w-100 rounded-pill px-4 py-2 text-uppercase mb-2" onclick="playPreview(92)">
        <img
          src="/assets/images/play_button-ZgAgMAv.svg"
          alt="Play"
          class="me-1 me-sm-2"
        />
        Spustiť ukážku (2 minút)
      </button>
      <a
        href="/login"
        data-turbo="false"
        class="btn btn-primary btn-sizing w-100 rounded-pill py-2 px-4 glow-green"
        data-turbo="false"
        style="pointer-events: auto"
      >
        Odomknúť všetky — 
        <span class="">
    6,99 €
  </span> 
      </a>
    </div>
  </div>

  <div class="pt-3 pb-2 d-flex mt-2 flex-wrap gap-2">

        <span class="badge bg-primary text-black px-3 py-2 rounded-pill text-uppercase small">
          JEDEL BYCH
        </span>

    </div>
  <div
    class="pb-3 pb-1 text-white d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
        <h3 class="fw-bold mb-1 text-start">
      Šmolki 13K: 5 rokov dozadu som vykrádal záhrady, tak čo sa tu budem hrať na chrumkavého. | JEDEL BYCH 30
    </h3>
    <div class="small text-white-50 d-flex align-items-center gap-3">
      <div
        class="small text-white-50 d-flex align-items-center gap-2 text-decoration-none"
      >
        <img src="/assets/images/like_white-Uhk-fnB.svg" alt="Likes" />
        0
      </div>
      <div
        class="small text-white-50 d-flex align-items-center gap-2 text-decoration-none"
      >
        <img src="/assets/images/comment-NBS7ShY.svg" alt="Comments" />
        0
      </div>
    </div>
  </div>
</div>

    
        <div class="col-xl-8 col-lg-10 col-12 pb-5">
    <div class="position-relative d-flex w-full" style="
      background: linear-gradient(135deg, #1e1e1e, #2c2c2c);
      aspect-ratio: 16/9;
        border-radius: 20px;
    ">
    <div id="videoPlayer91" class="video-player-iframe position-absolute top-0 start-0 w-100 h-100">
      <div style="position: relative; padding-top: 56.25%; " class="cursor-pointer" data-controller="free-video-card"
           data-free-video-card-video-id-value="91">
        <iframe
                id="iframe91"
                src="https://customer-hqsxsu60sej54ilh.cloudflarestream.com/2f3cbd4ae69485b284c2c16e93008ad5/iframe?preload=true"
                style="border: #0d6efd; border-radius: 20px; position: absolute; top: 0; left: 0; height: 100%; width: 100%; "
                allow="accelerometer; gyroscope; encrypted-media; picture-in-picture;"
                allowfullscreen
        ></iframe>
      </div>
    </div>
    <div
        class="position-absolute top-0 start-0 w-100 h-100"
        style="
        background: url('https://imagedelivery.net/Erat9NrLUQmyxD408cllYg/6000a55a-5328-4fcd-46dc-b1c028eb6f00/public') center center / cover no-repeat;
        filter: brightness(0.21);  /* or use rgba overlay instead */
        border-radius: 20px;
                pointer-events: none;
      ">
    </div>
    <div>
        <div class="blocker position-absolute bottom-0 start-0 end-0 w-100 h-25" style="
            background: transparent;
            pointer-events: auto;

        "></div>
    </div>
    <div style="pointer-events: none" class="video-buttons position-absolute top-50 start-50 translate-middle text-center d-flex flex-column align-items-center gap-2 col-md-6 col-sm-8 col-10">
      <button class="btn btn-outline-light btn-sizing w-100 rounded-pill px-4 py-2 text-uppercase mb-2" onclick="playPreview(91)">
        <img
          src="/assets/images/play_button-ZgAgMAv.svg"
          alt="Play"
          class="me-1 me-sm-2"
        />
        Spustiť ukážku (2 minút)
      </button>
      <a
        href="/login"
        data-turbo="false"
        class="btn btn-primary btn-sizing w-100 rounded-pill py-2 px-4 glow-green"
        data-turbo="false"
        style="pointer-events: auto"
      >
        Odomknúť všetky — 
        <span class="">
    6,99 €
  </span> 
      </a>
    </div>
  </div>

  <div class="pt-3 pb-2 d-flex mt-2 flex-wrap gap-2">

        <span class="badge bg-primary text-black px-3 py-2 rounded-pill text-uppercase small">
          STRÝC LIFE
        </span>

    </div>
  <div
    class="pb-3 pb-1 text-white d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
        <h3 class="fw-bold mb-1 text-start">
      Bratislava nezaostáva za svetom! Čo najlepšie chutí v jedinom celoročnom street food parku našej metropoly? | STRÝC LIFE
    </h3>
    <div class="small text-white-50 d-flex align-items-center gap-3">
      <div
        class="small text-white-50 d-flex align-items-center gap-2 text-decoration-none"
      >
        <img src="/assets/images/like_white-Uhk-fnB.svg" alt="Likes" />
        0
      </div>
      <div
        class="small text-white-50 d-flex align-items-center gap-2 text-decoration-none"
      >
        <img src="/assets/images/comment-NBS7ShY.svg" alt="Comments" />
        0
      </div>
    </div>
  </div>
</div>

    
        <div class="col-xl-8 col-lg-10 col-12 pb-5">
    <div class="position-relative d-flex w-full" style="
      background: linear-gradient(135deg, #1e1e1e, #2c2c2c);
      aspect-ratio: 16/9;
        border-radius: 20px;
    ">
    <div id="videoPlayer90" class="video-player-iframe position-absolute top-0 start-0 w-100 h-100">
      <div style="position: relative; padding-top: 56.25%; " class="cursor-pointer" data-controller="free-video-card"
           data-free-video-card-video-id-value="90">
        <iframe
                id="iframe90"
                src="https://customer-hqsxsu60sej54ilh.cloudflarestream.com/3de28d0ffe12e8b6f96c6bd30f68aac0/iframe?preload=true"
                style="border: #0d6efd; border-radius: 20px; position: absolute; top: 0; left: 0; height: 100%; width: 100%; "
                allow="accelerometer; gyroscope; encrypted-media; picture-in-picture;"
                allowfullscreen
        ></iframe>
      </div>
    </div>
    <div
        class="position-absolute top-0 start-0 w-100 h-100"
        style="
        background: url('https://imagedelivery.net/Erat9NrLUQmyxD408cllYg/7144b455-0926-46c1-8c58-baab7db04800/public') center center / cover no-repeat;
        filter: brightness(0.21);  /* or use rgba overlay instead */
        border-radius: 20px;
                pointer-events: none;
      ">
    </div>
    <div>
        <div class="blocker position-absolute bottom-0 start-0 end-0 w-100 h-25" style="
            background: transparent;
            pointer-events: auto;

        "></div>
    </div>
    <div style="pointer-events: none" class="video-buttons position-absolute top-50 start-50 translate-middle text-center d-flex flex-column align-items-center gap-2 col-md-6 col-sm-8 col-10">
      <button class="btn btn-outline-light btn-sizing w-100 rounded-pill px-4 py-2 text-uppercase mb-2" onclick="playPreview(90)">
        <img
          src="/assets/images/play_button-ZgAgMAv.svg"
          alt="Play"
          class="me-1 me-sm-2"
        />
        Spustiť ukážku (2 minút)
      </button>
      <a
        href="/login"
        data-turbo="false"
        class="btn btn-primary btn-sizing w-100 rounded-pill py-2 px-4 glow-green"
        data-turbo="false"
        style="pointer-events: auto"
      >
        Odomknúť všetky — 
        <span class="">
    6,99 €
  </span> 
      </a>
    </div>
  </div>

  <div class="pt-3 pb-2 d-flex mt-2 flex-wrap gap-2">

        <span class="badge bg-primary text-black px-3 py-2 rounded-pill text-uppercase small">
          JEDEL BYCH
        </span>

    </div>
  <div
    class="pb-3 pb-1 text-white d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
        <h3 class="fw-bold mb-1 text-start">
      Bekim Aziri: Najviac ma serie, že nemôžem ísť nikam s dcérou sám kvôli môjmu postihnutiu. | JEDEL BYCH 29
    </h3>
    <div class="small text-white-50 d-flex align-items-center gap-3">
      <div
        class="small text-white-50 d-flex align-items-center gap-2 text-decoration-none"
      >
        <img src="/assets/images/like_white-Uhk-fnB.svg" alt="Likes" />
        0
      </div>
      <div
        class="small text-white-50 d-flex align-items-center gap-2 text-decoration-none"
      >
        <img src="/assets/images/comment-NBS7ShY.svg" alt="Comments" />
        0
      </div>
    </div>
  </div>
</div>

      </div>

  <div id="home-video-playlist-dynamic" class="d-flex flex-column justify-content-center align-items-center gap-4"></div>
</div></template>
</turbo-stream>