{% extends "global/Page.html" %}

{% block content %}

<style>
  *, *::before, *::after { box-sizing: border-box; }

  body, .otree-body {
    /* background: #f5f3ff !important; */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  }

  /* ── TOP BAR ── */
  .neg-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e1245;
    color: #fff;
    padding: 14px 24px;
    border-radius: 14px;
    margin-bottom: 22px;
    box-shadow: 0 4px 16px rgba(30,18,69,.18);
  }
  .neg-header .title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .01em;
  }

  /* ── CENTER WRAPPER ── */
  .page-center {
    max-width: 600px;
    margin: 0 auto;
  }

  /* ── CARDS ── */
  .card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 15px rgba(30,18,69,.07);
    padding: 20px 22px;
    margin-bottom: 18px;
  }
  .card-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
  }

  /* ── DEAL CARD ── */
  .deal-card {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #fff;
    border-radius: 12px;
    padding: 28px 28px;
    margin-bottom: 18px;
    box-shadow: 0 4px 16px rgba(124,58,237,.25);
    text-align: center;
  }
  .deal-card .deal-heading {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
    margin-bottom: 18px;
  }
  .deal-text {
    font-size: 16px;
    color: rgba(255,255,255,.9);
    line-height: 1.7;
  }
  .deal-text strong {
    color: #fff;
    font-weight: 700;
  }
  .deal-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,.2);
    margin: 18px 0;
  }

  /* ── OUTCOME BADGE ── */
  .outcome-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 18px;
    font-size: 15px;
    font-weight: 600;
  }
  .outcome-badge.success {
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    color: #166534;
  }
  .outcome-badge.failure {
    background: #fff1f2;
    border: 1.5px solid #fca5a5;
    color: #991b1b;
  }
  .outcome-badge .outcome-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
  }
  .outcome-badge .outcome-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .outcome-badge .outcome-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    opacity: .65;
  }

  /* ── SUBMIT ── */
  .submit-area {
    text-align: center;
    margin-top: 8px;
  }
  .btn-submit {
    background: #1e1245;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 36px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s, transform .1s;
    box-shadow: 0 2px 8px rgba(30,18,69,.2);
  }
  .btn-submit:hover { background: #0f172a; transform: translateY(-1px); }
  .btn-submit:active { transform: translateY(0); }
</style>

<!-- ══ TOP BAR ══ -->
<div class="neg-header">
  <div class="title">Trade Deal</div>
</div>

<div class="page-center">

  <!-- Deal Summary -->
  <div class="deal-card">
    <div class="deal-heading">Binding Agreement — Countries 1 &amp; 2</div>
      <p class="deal-text">
        {% if c1_exports %}
          Country 1 will sell
          {% for item in c1_exports %}
            <strong>{{ item.qty }} {{ item.unit_word }}</strong> of <strong>{{ item.good }}</strong>{{ item.sep }}
          {% endfor %}
          to Country 2
        {% else %}
          Country 1 will not sell anything to Country 2
        {% endif %}
      </p>
      <hr class="deal-divider">
      <p class="deal-text">
        {% if c2_exports %}
          Country 2 will sell
          {% for item in c2_exports %}
            <strong>{{ item.qty }} {{ item.unit_word }}</strong> of <strong>{{ item.good }}</strong>{{ item.sep }}
          {% endfor %}
          to Country 1
        {% else %}
          Country 2 will not sell anything to Country 1
        {% endif %}
      </p>
  </div>

  <!-- Outcome -->
  {% if both_benefit %}
  <div class="outcome-badge success">
    <span class="outcome-icon">✅</span>
    <div class="outcome-text">
      <span class="outcome-label">Outcome</span>
      Both countries benefited from trade.
    </div>
  </div>
  {% else %}
  <div class="outcome-badge failure">
    <span class="outcome-icon">❌</span>
    <div class="outcome-text">
      <span class="outcome-label">Outcome</span>
      Trade was not mutually beneficial.
    </div>
  </div>
  {% endif %}

  <!-- Submit -->
  <div class="submit-area">
    <button class="btn-submit">Continue</button>
  </div>

</div>

{% endblock %}