<turbo-stream action="update" target="component_content"><template><div data-controller="copy preview">
  <div class="flex flex-col gap-4 border-b pb-4">
    <div class="flex items-center justify-between">
      <h2 class="text-lg font-semibold">Instructor Page</h2>
      
      <div class="flex items-center gap-2">
          <div class="join h-8">
            <a class="join-item btn btn-sm w-10 flex items-center justify-center  tooltip tooltip-bottom" data-turbo-stream="true" data-tip="Desktop View" href="/templates/instructor_page/preview?version=default">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                <line x1="8" y1="21" x2="16" y2="21"></line>
                <line x1="12" y1="17" x2="12" y2="21"></line>
              </svg>
</a>            <a class="join-item btn btn-sm w-10 flex items-center justify-center btn-active tooltip tooltip-bottom" data-turbo-stream="true" data-tip="Mobile View" href="/templates/instructor_page/preview?mobile_view=true&amp;version=default">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
                <line x1="12" y1="18" x2="12" y2="18.01"></line>
              </svg>
</a>          </div>

          <button class="btn btn-sm" onclick="window.payment_modal.showModal()">
            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="m8 18 8-12M3 6h18M3 12h18M3 18h18"/>
            </svg>
            View Code
          </button>
        
      </div>
    </div>

      <div class="flex items-center gap-4">
          <div class="flex items-center gap-2">
            <span class="text-sm text-base-content/60">Version:</span>
            <form data-turbo-stream="true" action="/templates/instructor_page/preview" accept-charset="UTF-8" method="get">
              <select class="select select-sm select-bordered w-40" onchange="this.form.requestSubmit()" name="version" id="version"><option selected="selected" value="default">Default</option></select>
              <input value="false" autocomplete="off" type="hidden" name="show_code" id="show_code" />
              <input value="true" autocomplete="off" type="hidden" name="mobile_view" id="mobile_view" />
</form>          </div>

          <div class="flex items-center gap-2">
            <span class="text-sm text-base-content/60">Theme:</span>
            <select class="select select-sm select-bordered w-40"
                    data-preview-target="themeSelect"
                    data-action="change->preview#changeTheme">
                <option value="light" selected>Light</option>
                <option value="dark" >Dark</option>
                <option value="cupcake" >Cupcake</option>
                <option value="bumblebee" >Bumblebee</option>
                <option value="emerald" >Emerald</option>
                <option value="corporate" >Corporate</option>
                <option value="synthwave" >Synthwave</option>
                <option value="retro" >Retro</option>
                <option value="cyberpunk" >Cyberpunk</option>
                <option value="valentine" >Valentine</option>
                <option value="halloween" >Halloween</option>
                <option value="garden" >Garden</option>
                <option value="forest" >Forest</option>
                <option value="aqua" >Aqua</option>
                <option value="lofi" >Lofi</option>
                <option value="pastel" >Pastel</option>
                <option value="fantasy" >Fantasy</option>
                <option value="wireframe" >Wireframe</option>
                <option value="black" >Black</option>
                <option value="luxury" >Luxury</option>
                <option value="dracula" >Dracula</option>
                <option value="cmyk" >Cmyk</option>
                <option value="autumn" >Autumn</option>
                <option value="business" >Business</option>
                <option value="acid" >Acid</option>
                <option value="lemonade" >Lemonade</option>
                <option value="night" >Night</option>
                <option value="coffee" >Coffee</option>
                <option value="winter" >Winter</option>
                <option value="dim" >Dim</option>
                <option value="nord" >Nord</option>
                <option value="sunset" >Sunset</option>
                <option value="caramellatte" >Caramellatte</option>
                <option value="abyss" >Abyss</option>
                <option value="silk" >Silk</option>
            </select>
          </div>
      </div>
  </div>

  <div class="preview-section ">
  <div class="hidden flex justify-center px-4 mt-8">
    <div class="mockup-browser border border-base-300 w-full max-w-[960px]">
      <div class="mockup-browser-toolbar flex items-center">
        <div class="flex-1">
          <div class="input">https://your-app.com/</div>
        </div>
        <div class="flex gap-2">
          <button 
            data-action="click->preview#toggleFullscreen"
            class="btn btn-ghost btn-sm gap-2 hover:bg-base-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="size-4" data-preview-target="expandIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" class="size-4 hidden" data-preview-target="collapseIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
            </svg>
            <span class="text-xs">Full screen</span>
          </button>
        </div>
      </div>
      <div class="border-t border-base-300 h-[480px] relative overflow-y-auto" data-preview-target="previewContent">
        <iframe 
          src="/templates/instructor_page/iframe_preview?mobile_view=false&amp;theme=light&amp;version=default"
          class="w-full h-full border-none"
          data-preview-target="desktopFrame"
          style="height: 100%;">
        </iframe>
      </div>
    </div>
  </div>

  <div class=" flex justify-center px-4 mt-8">
    <div class="mockup-phone relative">
      <div class="mockup-phone-camera z-10"></div>
      <div class="mockup-phone-display">
        <div class="h-full overflow-hidden flex flex-col">
          <div class="h-8 px-6 flex justify-between items-center bg-neutral">
            <div class="text-[13px] font-medium text-white">
              04:01
            </div>
            <div class="flex items-center gap-1">
              <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: white">
                <rect x="2" y="7" width="16" height="10" rx="2" ry="2"/>
                <line x1="20" y1="11" x2="20" y2="13"/>
              </svg>
              <div class="text-[13px] font-medium text-white">100%</div>
            </div>
          </div>
          <iframe 
            src="/templates/instructor_page/iframe_preview?mobile_view=true&amp;theme=light&amp;version=default"
            class="w-full flex-1 border-none"
            data-preview-target="mobileFrame">
          </iframe>
        </div>
      </div>
    </div>
  </div>
</div>

 
</div> </template></turbo-stream>