---
### ALL PAGES ###
layout: themes/[ site.theme.id ]/frontend/core/cover

### PAGE CONFIG ###
---

<!-- Confirmation Section -->
<section class="col-12 col-md-10 col-lg-8 col-xl-6 mw-md">
  <div class="card border-0 shadow-lg">
    <div class="card-body p-3 p-md-5">
      <!-- Success Icon -->
      <div class="text-center mb-5">
        <div class="bg-success avatar avatar-xl rounded-circle d-inline-flex align-items-center justify-content-center mb-3">
          {% uj_icon "check", "fs-2 text-light" %}
        </div>
        <h1 class="h2 mb-3">Thank you for your purchase!</h1>
        <p class="text-muted">Your order has been successfully processed.</p>
      </div>

      <!-- Order summary -->
      <div class="mb-5">
        <h4 class="fw-bold mb-3">Order summary</h4>

        <div class="d-flex justify-content-between mb-3 wm-binding-skeleton" data-wm-bind="@show confirmation">
          <span class="text-muted">Order Number:</span>
          <span class="fw-semibold" data-wm-bind="@text confirmation.order.id">Loading...</span>
        </div>

        <hr>

        <div class="mb-0 wm-binding-skeleton" data-wm-bind="@show confirmation">
          <h6 class="fw-semibold mb-2" data-wm-bind="@text confirmation.order.productName">Loading...</h6>
          <div class="d-flex justify-content-between">
            <span class="text-muted">Total Paid:</span>
            <span class="fw-bold fs-5" data-wm-bind="@text confirmation.order.total">$--</span>
          </div>
        </div>

        <div data-wm-bind="@show confirmation.subscription.show" hidden>
          <hr>
          <div class="alert alert-info mb-0">
            <p class="mb-0 small" data-wm-bind="@text confirmation.subscription.infoText"></p>
          </div>
        </div>
      </div>

      <!-- Next Steps -->
      <div class="mb-4">
        <h5 class="mb-3">What's Next?</h5>
        <div class="mb-0">
          <div class="d-flex mb-2">
            <div class="text-success me-3">{% uj_icon "check-circle" %}</div>
            <div>Check your email for the order confirmation and receipt</div>
          </div>
          <div class="d-flex mb-2">
            <div class="text-success me-3">{% uj_icon "check-circle" %}</div>
            <div>Access your purchase from your <a href="/account">account dashboard</a></div>
          </div>
          <div class="d-flex mb-2">
            <div class="text-success me-3">{% uj_icon "check-circle" %}</div>
            <div>If you have any questions, <a href="/contact">contact our support team</a></div>
          </div>
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
        <a href="/account" class="btn btn-adaptive btn-lg w-100 w-sm-auto">
          {% uj_icon "user", "me-2" %}
          Go to dashboard
        </a>
        <a href="/" class="btn btn-outline-adaptive btn-lg w-100 w-sm-auto">
          {% uj_icon "home", "me-2" %}
          Back to home
        </a>
      </div>

      <!-- Support Section -->
      <div class="text-center mt-5 pt-4 border-top">
        <h5 class="mb-3">Need help?</h5>
        <p class="text-muted mb-2">Our support team is here to assist you</p>
        <div class="d-flex flex-column flex-sm-row justify-content-center gap-3">
          <a href="/contact" class="text-decoration-none link-primary">
            {% uj_icon "envelope", "me-2" %}
            <span>Email us</span>
          </a>
          <a href="/contact" class="text-decoration-none link-primary">
            {% uj_icon "comments", "me-2" %}
            <span>Live chat</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

{{ content | uj_content_format }}