ytdl-web/app/views/download.html

<div class="d-flex flex-column align-items-center">
  <h1>Download Video</h1>
  <h2 class="fs-4 text-muted text-center">{{.Meta.Title}}</h2>
  <p style="font-size: 0.85rem">{{.Url}}</p>
  <button
    hx-get="{{.BasePath}}/home"
    hx-trigger="click"
    hx-target="#main-content"
    class="btn btn-secondary btn-sm mt-3"
    style="width: 30rem; max-width: 100%"
  >
    Download Another Video
  </button>
</div>

{{$root := .}} {{range $vidIndex, $video := .Videos}} {{if not (eq $vidIndex
0)}}
<hr class="mt-5" />
{{end}}
<div class="d-flex flex-column flex-lg-row justify-content-center gap-5 mt-5">
  <div class="d-flex justify-content-center">
    <img
      src="{{.Meta.Thumbnail}}"
      alt="{{.Meta.Title}}"
      style="max-height: 25rem; max-width: 100%; margin: 0 auto"
    />
  </div>
  <div class="downloads flex-lg-grow-1">
    {{range $index, $format := $video.Formats}}
    <div style="font-size: smaller">{{$format.Format}}</div>
    <div class="flex-grow-1 d-flex gap-3">
      <a
        class="btn btn-primary flex-grow-1"
        download="{{$root.Meta.ID}}-{{$format.Resolution}}.{{$format.Ext}}"
        P
        href="{{$format.Url}}"
      >
        Download (direct)
      </a>
      <a
        class="btn btn-primary flex-grow-1"
        download="{{$root.Meta.ID}}-{{$format.Resolution}}.{{$format.Ext}}"
        href="{{$root.BasePath}}/download/proxy?url={{queryEscape $root.Url}}&format={{$format.FormatID}}&index={{$vidIndex}}"
      >
        Download (proxied)
      </a>
    </div>
    {{end}}
  </div>
</div>
{{end}}