{% extends 'base.html' %}
{% block title %}User guide – {{ app_brand }}{% endblock %}
{% block content %}
<div class="page" style="max-width:720px;">
  <div class="page-header">
    <div class="page-title">📘 USER GUIDE</div>
    <div class="page-subtitle">{{ app_brand }} — {{ app_tagline }}</div>
  </div>

  <div class="card" style="margin-bottom:1.25rem;">
    <div class="card-title">👤 Signing in</div>
    <ul style="color:var(--muted2); font-size:0.92rem; line-height:1.75; margin-left:1.2rem;">
      <li>Choose <strong>your name</strong> from the team list (no password).</li>
      <li>Optional <strong>Remember me</strong> ties this browser/network to your name for next time.</li>
      <li>If someone else uses the same phone or computer, tap the <strong>DIS IPL 2026</strong> logo (top left) to return here and pick their name.</li>
    </ul>
  </div>

  <div class="card" style="margin-bottom:1.25rem;">
    <div class="card-title">🎯 Submitting predictions</div>
    <ul style="color:var(--muted2); font-size:0.92rem; line-height:1.75; margin-left:1.2rem;">
      <li><strong>When</strong>: Predictions are allowed only on the <strong>scheduled match day</strong>, until the <strong>listed start time</strong> (then they lock automatically).</li>
      <li><strong>Where</strong>: Use <strong>Home</strong> for today’s fixtures, or <strong>Matches</strong> for the full schedule. Open a match to predict.</li>
      <li><strong>Winner</strong>: Pick which team will win.</li>
      <li><strong>Man of the Match</strong> (required): After you pick the winner, choose a player from <strong>that team’s squad</strong> only. You get a bonus if correct and a small penalty if wrong.</li>
      <li><strong>Bid</strong>: Stake <strong>{{ points_config.min_bid }}</strong>–<strong>{{ points_config.max_bid }}</strong> points (capped by your balance and the app maximum). Quick buttons use % of your allowed max.</li>
      <li><strong>One pick per match</strong>: You can <strong>edit</strong> your prediction until the window closes (same match day, before start).</li>
      <li><strong>See everyone’s picks</strong>: Open <strong>Pool</strong> in the top nav — all teammates’ winner, MOTM, and stakes are shown match by match (full transparency).</li>
    </ul>
  </div>

  <div class="card" style="margin-bottom:1.25rem;">
    <div class="card-title">📊 Scoring</div>
    <ul style="color:var(--muted2); font-size:0.92rem; line-height:1.75; margin-left:1.2rem;">
      <li><strong>Starting balance</strong>: {{ points_config.initial }} points when you join.</li>
      <li><strong>Correct winner</strong>: you gain points equal to your <strong>bid</strong> (net <span class="mono text-green">+bid</span>).</li>
      <li><strong>Wrong winner</strong>: you lose points equal to your <strong>bid</strong> (net <span class="mono text-red">−bid</span>).</li>
      <li><strong>Correct MOTM</strong>: <span class="mono text-green">+{{ points_config.correct_motm }}</span> bonus points (on top of winner win/loss).</li>
      <li><strong>Wrong MOTM</strong>: <span class="mono text-red">−{{ points_config.wrong_motm|abs }}</span> points (your pick is compared to the official Man of the Match).</li>
      <li><strong>Abandoned match</strong>: your bid on that match is <strong>refunded</strong> (no winner/MOTM scoring).</li>
      <li><strong>No prediction</strong>: no automatic point loss — you simply miss that match for points.</li>
    </ul>
  </div>

  <div class="card" style="margin-bottom:1.25rem;">
    <div class="card-title">🏆 Leaderboard &amp; form</div>
    <ul style="color:var(--muted2); font-size:0.92rem; line-height:1.75; margin-left:1.2rem;">
      <li>Ranks use <strong>total points</strong> (starting balance plus all settled match outcomes).</li>
      <li><strong>Last 5</strong> dots on the board: <span class="text-green">green</span> = correct winner, <span class="text-red">red</span> = wrong, <span style="color:var(--muted2);">white</span> = no pick for that finished match.</li>
      <li><strong>Streak</strong> shows your best run of correct winner calls.</li>
    </ul>
  </div>

  <div class="card" style="margin-bottom:1.25rem;">
    <div class="card-title">📈 Analytics &amp; history</div>
    <ul style="color:var(--muted2); font-size:0.92rem; line-height:1.75; margin-left:1.2rem;">
      <li><strong>Analytics</strong>: Pool-wide stats, popular picks, MOTM leaders, and your personal numbers.</li>
      <li><strong>My stats</strong>: Full prediction and points history.</li>
    </ul>
  </div>

  <p style="text-align:center; color:var(--muted); font-size:0.9rem; margin-top:0.25rem;">
    🚀 <strong>Compete, strategize, and climb the leaderboard!</strong>
  </p>
</div>
{% endblock %}