{{ block title }}Expert – Bargaining Phase{{ endblock }}
{{ block style }}
{% if round_number == 2 %}
    <strong>Practice Round</strong>
{% else %}
    Round <strong>{{ display_round }}</strong> of <strong>{{ display_total }}</strong>
{% endif %}
<style>
  .appraiser-container {
    background: #ffffff;
    border-radius: 8px;
    padding: 24px;
    max-width: 780px;
    margin: 0 auto;
    font-family: sans-serif;
    color: #1a1a1a;
  }

  .appraiser-header {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4a6cf7;
    background: #eef1fe;
    border: 1px solid #c7d0fc;
    border-radius: 20px;
    display: inline-block;
    padding: 3px 12px;
    margin-bottom: 12px;
  }

  .appraiser-subtitle {
    font-size: 0.88rem;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
  }

  .reveal-notice {
    background: #fffbeb;
    border: 1px solid #fbbf24;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 0.85rem;
    color: #92400e;
    margin-bottom: 24px;
    line-height: 1.55;
  }

  .signal-card {
    background: #f0f4ff;
    border: 1.5px solid #c5d3f7;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 20px;
  }

  .signal-card-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4a6cf7;
    margin-bottom: 10px;
  }

  .signal-list {
    font-family: monospace;
    font-size: 1rem;
    color: #1a1a1a;
    word-break: break-all;
    line-height: 1.7;
  }

  .constraint-banner {
    background: #f0f4ff;
    border: 1.5px solid #4a6cf7;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.88rem;
    color: #1a3a6b;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
  }

  .constraint-banner span { color: #4a6cf7; }

  .section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 10px;
  }

  .btn-submit {
    width: 100%;
    padding: 13px;
    background: #4a6cf7;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 12px;
  }

  .btn-submit:hover { background: #3558e8; }
</style>
{{ endblock }}

{{ block content }}
<div class="appraiser-container">

  <div class="appraiser-header">expert</div>

  <p class="appraiser-subtitle">
   The buyer and seller are bargaining.
  </p>

  <div class="reveal-notice">

Reminder: <br>
(1) Only the buyer can invite you for an appraisal. You are paid by the buyer for the appraisal; only if you are invited. <br>
(2) You are paired with the same buyer for all 20 rounds.<br>
(3) If invited, your appraisal will be revealed to both the buyer and the seller, and you will be informed. If not invited, your appraisal will not be revealed to the buyer and seller, and you will be informed that you were not be invited. <br>
(4) The range you observe always contains the true value, but you may report any number between 100 and 400. <br>

  </div>

  <!-- Signal range as number list -->
  <div class="signal-card">
    <div class="signal-card-label">Your Range</div>
    <div class="signal-list" id="signal-list-display">—</div>
  </div>

  <!-- Constraint notice -->
  <div class="constraint-banner">
    ⚠ Your appraisal must be a number between <span>100</span> and <span>400</span>
  </div>

  <!-- Valuation input -->
  <div class="section-label"></div>
  {{ formfields }}

  <button class="btn-submit" type="button" onclick="document.querySelector('form').submit()">
    Submit
  </button>

</div>
{{ endblock }}

{{ block scripts }}
<script>
  const sigLow  = {{ sig_low }};
  const sigHigh = {{ sig_high }};

  const nums = [];
  for (let i = sigLow; i <= sigHigh; i++) nums.push(i);
  document.getElementById('signal-list-display').textContent = '{ ' + nums.join(', ') + ' }';
</script>
{{ endblock }}