<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
  <h3 style="margin:0;font-size:16px;color:var(--head)">{{ t.scenario_drawer_title }}</h3>
  <button onclick="document.getElementById('scenario-drawer').classList.remove('open')"
    style="background:none;border:none;color:var(--txt-3);cursor:pointer;font-size:18px">&times;</button>
</div>
{% if scenarios %}
  {% for s in scenarios %}
  <div class="scenario-item" data-id="{{ s.id }}">
    <div style="display:flex;justify-content:space-between;align-items:center">
      <div class="scenario-item__name">{{ s.name }}</div>
      <div style="display:flex;gap:6px">
        {% if s.is_default %}<span style="font-size:10px;color:var(--gn,#10B981)">{{ t.scenario_badge_default }}</span>{% endif %}
        <a href="{{ url_for('planner.index', scenario=s.id) }}" style="color:var(--bl,#3B82F6);font-size:11px;text-decoration:none">{{ t.scenario_btn_load }}</a>
        <button hx-delete="{{ url_for('planner.delete_scenario', scenario_id=s.id) }}"
                hx-target="#scenario-drawer" hx-swap="innerHTML"
                hx-confirm="Delete this scenario?"
                style="background:none;border:none;color:#EF4444;cursor:pointer;font-size:11px;padding:0">{{ t.scenario_btn_delete }}</button>
      </div>
    </div>
    {% if s.location %}<div class="scenario-item__meta">{{ s.location }}</div>{% endif %}
    <div class="scenario-item__meta">{{ t.scenario_updated }} {{ s.updated_at[:10] if s.updated_at else s.created_at[:10] }}</div>
  </div>
  {% endfor %}
{% else %}
  <p style="color:var(--txt-3,#64748B);font-size:13px">{{ t.scenario_empty }}</p>
{% endif %}
