{% extends 'base.html' %}
{% block title %}Payment — Yatra Booking{% endblock %}
{% block topbar_title %}Payment Result{% endblock %}

{% block content %}
<div style="max-width:560px;margin:0 auto;text-align:center;">
  <div style="background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2.2rem 1.6rem;box-shadow:0 4px 16px rgba(13,42,102,.06);">
    <div style="font-size:3rem;margin-bottom:.6rem;">{% if success %}✅{% else %}❌{% endif %}</div>
    <h2 style="font-size:1.25rem;margin-bottom:.5rem;">{{ title }}</h2>

    {% if booking %}
      <p style="color:var(--muted);font-size:.9rem;margin-bottom:1rem;">
        Booking <b>{{ booking.booking_code }}</b>
        {% if payment %} · Rs. {{ payment.amount }} via eSewa
          {% if payment.ref_id %} · Ref <b>{{ payment.ref_id }}</b>{% endif %}
        {% endif %}
      </p>
      {% if success %}
      <p style="background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0;border-radius:10px;padding:.7rem;font-size:.85rem;margin-bottom:1.2rem;">
        Your seats are confirmed. Show your booking code when boarding.
      </p>
      {% endif %}
    {% endif %}

    {% if detail %}
      <p style="color:var(--muted);font-size:.85rem;margin-bottom:1.2rem;">{{ detail }}</p>
    {% endif %}

    <a href="/my-bookings/"
       style="display:inline-block;background:var(--primary);color:#fff;text-decoration:none;border-radius:10px;padding:.75rem 1.4rem;font-weight:700;font-size:.9rem;">
      Go to My Bookings
    </a>
  </div>
</div>
{% endblock %}