Fix: live preview blocks right-side preview buttons

Bug: when user clicked Preview in the left 'Analiza pesmi' panel, it
loaded an inline <video> below it. The video element grew to 400px and,
combined with the sticky positioning of the left card and grid layout,
caused the right column (jobs list) preview/download buttons to become
unclickable — the video element was effectively layering over them.

Fix: replace inline preview with the same modal that the right-side
Preview buttons use. Removes the layout conflict entirely:

- Live panel Preview button now opens the centered modal
- Removed inline #live-video element
- Removed liveVideo references from JS (resetLive)
- Job cards now have data-id and data-title attributes so the modal can
  pull title for display

Both left-side (live) and right-side (jobs list) preview now use the
same clean modal experience.

templates/index.html

@@ -449,7 +449,6 @@
           <button class="small" id="live-download" style="display: none;">⬇ Download</button>
           <button class="small ghost" id="live-preview" style="display: none;">▶ Preview</button>
         </div>
-        <video id="live-video" class="hidden" controls style="margin-top: 12px; max-height: 400px; width: 100%; border-radius: 8px; background: black;"></video>
       </div>
     </section>
 
@@ -636,7 +635,6 @@
     const liveBadge = $("#live-badge");
     const liveSpinner = $("#live-spinner");
     const liveResult = $("#live-result");
-    const liveVideo = $("#live-video");
     const liveDownloadBtn = $("#live-download");
     const livePreviewBtn = $("#live-preview");
 
@@ -672,9 +670,12 @@
       livePreviewBtn.style.display = "inline-block";
       liveDownloadBtn.onclick = () => window.open(`/api/download/${jobId}`);
       livePreviewBtn.onclick = () => {
-        liveVideo.src = `/api/preview/${jobId}`;
-        liveVideo.classList.remove("hidden");
-        liveVideo.play();
+        // Uporabi modal namesto inline video, da ne pokvari layout-a in
+        // ne blokira gumbov na desni strani (jobs list).
+        // Izvleci title iz job-a v jobs listu če obstaja
+        const jobCard = document.querySelector(`.job[data-id="${jobId}"]`);
+        const title = jobCard?.dataset.title || "";
+        previewJob(jobId, title);
       };
     }
 
@@ -696,8 +697,6 @@
       liveResult.classList.add("hidden");
       liveDownloadBtn.style.display = "none";
       livePreviewBtn.style.display = "none";
-      liveVideo.classList.add("hidden");
-      liveVideo.src = "";
     }
 
     // Stage label mapping (server step → friendly slo + percent estimate)
@@ -907,12 +906,14 @@
       const el = document.createElement("div");
       el.className = "job";
       el.id = `job-${job.id}`;
+      el.dataset.id = job.id;
 
       const title = job.source_type === "youtube"
         ? (job.youtube_url || "YouTube")
         : (job.parsed_artist && job.parsed_title 
             ? `${job.parsed_artist} — ${job.parsed_title}` 
             : (job.filename || job.id));
+      el.dataset.title = title;
 
       const sizeStr = job.output_size_mb ? `${job.output_size_mb} MB` :
                       job.size_mb ? `${job.size_mb} MB` : "";