{{ block title }}Round {{ round_number }} — AI Recommendation (PA){{ endblock }}
{{ block content }}

<div class="container mt-3" style="max-width: 860px;">

  <div class="alert alert-primary d-flex align-items-center">
    <span class="me-2">📋</span>
    <div>
      <strong>Purchasing Analyst — Round {{ round_number }}</strong>
      Review the AI system's recommendation, then submit your own supplier choice.
    </div>
  </div>

  <!-- AI Recommendation Box -->
  <div class="card border-0 shadow-sm mb-4">
    <div class="card-header fw-semibold" style="background:#1a1a2e; color:#fff;">
      🤖 AI Recommendation System
    </div>
    <div class="card-body p-4">

      <div class="text-center mb-4">
        <p class="text-muted mb-1">Based on its analysis, the AI system recommends:</p>
        <div class="display-5 fw-bold text-primary">Supplier {{ ai_recommendation }}</div>
      </div>

      {% if is_high %}
      <!-- HIGH TRANSPARENCY: round-specific rationale + weights + score table -->

      {% if round_explanation %}
      <div class="alert alert-light border mb-4">
        <strong>Why this round:</strong> {{ round_explanation }}
      </div>
      {% endif %}

      <hr>
      <h6 class="fw-semibold mb-3">AI Evaluation Criteria &amp; Weights</h6>
      <div class="row mb-3 text-center">
        <div class="col-4">
          <div class="border rounded p-2">
            <div class="fw-bold">Cost</div>
            <div class="text-primary fs-5">30%</div>
          </div>
        </div>
        <div class="col-4">
          <div class="border rounded p-2">
            <div class="fw-bold">Delivery</div>
            <div class="text-primary fs-5">40%</div>
          </div>
        </div>
        <div class="col-4">
          <div class="border rounded p-2">
            <div class="fw-bold">Innovation</div>
            <div class="text-primary fs-5">30%</div>
          </div>
        </div>
      </div>

      <h6 class="fw-semibold mb-2">Supplier Score Comparison (Purchasing Criteria)</h6>
      <div class="table-responsive mb-3">
        <table class="table table-bordered table-hover text-center table-sm">
          <thead class="table-dark">
            <tr>
              <th>Supplier</th>
              <th>Cost <small class="fw-normal">(w=0.30)</small></th>
              <th>Delivery <small class="fw-normal">(w=0.40)</small></th>
              <th>Innovation <small class="fw-normal">(w=0.30)</small></th>
              <th>Weighted Score</th>
            </tr>
          </thead>
          <tbody>
            {% for row in score_rows %}
            <tr {% if row.supplier == ai_recommendation %}class="table-warning fw-semibold"{% endif %}>
              <td class="fw-bold">
                {{ row.supplier }}
                {% if row.supplier == ai_recommendation %}
                  <span class="badge bg-warning text-dark ms-1">AI ✓</span>
                {% endif %}
              </td>
              <td>{{ row.cost }}</td>
              <td>{{ row.delivery }}</td>
              <td>{{ row.innovation }}</td>
              <td>{{ row.pa_total }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      {% else %}
      <!-- LOW TRANSPARENCY: recommendation only -->
      <div class="alert alert-light border text-center mb-0">
        <span class="text-muted">
          The AI system has analysed all six suppliers and recommends
          <strong>Supplier {{ ai_recommendation }}</strong>.
        </span>
      </div>
      {% endif %}
    </div>
  </div>

  <!-- PA Decision Form -->
  <div class="card border-0 shadow-sm mb-4">
    <div class="card-header fw-semibold bg-primary text-white">Your Recommendation</div>
    <div class="card-body p-4">
      <p class="text-muted mb-3">
        Based on the AI recommendation and your own assessment, which supplier
        do you recommend to the Sustainability Analyst?
      </p>
      {{ formfields }}
      <div class="text-end mt-3">{{ next_button }}</div>
    </div>
  </div>

</div>
{{ endblock }}