{{template "header" .}}
<style>
.party-page { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
.party-page h1 { margin: 0 0 8px; }
.party-hero {
  padding: 22px; border-radius: 18px; margin: 16px 0 22px;
  background: linear-gradient(180deg, #141820cc, #0a0c10ee);
  border: 1px solid #ffd36a33;
}
.party-hero .go { min-width: 220px; min-height: 52px; }
.party-skus { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.party-skus a {
  display:block; padding: 14px; border-radius: 14px; text-decoration:none; color:inherit;
  background:#0c1016; border:1px solid #ffd36a33;
}
.party-skus a:hover { border-color:#ffd36a99; }
.party-skus b { color: var(--gold); display:block; }
.room-list { display:flex; flex-direction:column; gap:10px; }
.room-row {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 14px; border-radius:14px; background:#12161c; border:1px solid #ffffff14;
}
</style>
<div class="party-page">
  <p class="kicker">Watch together</p>
  <h1>Same film. Same second.</h1>
  <p class="lead">Any number of people can sign in and sit on one party. The first Pro seat hosts automatically. Everyone else follows. Each avatar uses <b>their own TV</b> or buys a <b>guest key on screen</b> — one TV still unlocks only one account.</p>

  {{if .License.Pro}}
    <div class="party-hero">
      <p class="ok">Pro is on for {{if .User}}{{.User.Username}}{{end}}. Open a film in this room. Others join the same code and stay in sync.</p>
      <form action="/party" method="get" style="display:flex;gap:8px;flex-wrap:wrap;margin-top:12px">
        <input type="text" name="room" id="party-room" value="{{.Query}}" placeholder="Party code (e.g. lounge)" style="flex:1;min-width:180px">
        <a class="btn btn-green" id="party-go" href="/?sort=recent&room={{.Query}}">Pick a film</a>
      </form>
      <p class="meta" style="margin-top:10px">You host as soon as the film plays. Tick <b>I am the remote</b> only if you need to take over from someone else.</p>
    </div>
    <script>
    (function(){
      var inp = document.getElementById('party-room');
      var go = document.getElementById('party-go');
      if (!inp || !go) return;
      function paint() {
        go.href = '/?sort=recent&room=' + encodeURIComponent(inp.value.trim() || 'cinema');
      }
      inp.addEventListener('input', paint);
      paint();
    })();
    </script>
  {{else}}
    <div class="party-hero">
      <p>Watch together is Pro. Each person needs their <b>own TV</b> (activate once on that set) or a <b>guest key</b> bought on this screen.</p>
      {{if .User}}
        <div class="party-skus">
          <a href="/pro"><b>I bought a TV</b>Activate that set — one account per TV</a>
          <a href="/pro/buy"><b>Guest key</b>$7 / mo · $49 / year · $129 lifetime</a>
        </div>
      {{else}}
        <p><a class="btn btn-green" href="/login?next=/party">Sign in</a>
           <a class="btn btn-outline" href="/register?next=/party">Create account</a></p>
      {{end}}
    </div>
  {{end}}

  <h2>Live parties</h2>
  {{if .PartyRooms}}
    <div class="room-list">
      {{range .PartyRooms}}
      <a class="room-row" href="{{if $.Cinema}}/tv/watch/{{.Video}}?room={{.Name}}{{else}}/watch/{{.Video}}?room={{.Name}}{{end}}">
        <span><b>{{.Title}}</b><span class="meta"> room {{.Name}}</span></span>
        <span class="meta">{{.Peers}} watching{{if .Playing}} · playing{{end}}</span>
      </a>
      {{end}}
    </div>
  {{else}}
    <p class="meta">No one is hosting yet. A Pro seat opens a film in a room — the first one there hosts.</p>
  {{end}}
</div>
{{template "footer" .}}