{% extends "base.html" %}

{% block title %}Payment Failed - TexLab{% endblock %}

{% block content %}
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <div class="card border-0 shadow-sm">
        <div class="card-body text-center p-5">
          <div class="mb-4">
            <div class="icon-circle bg-danger mx-auto">
              <i class="fas fa-times fa-2x text-white"></i>
            </div>
          </div>
          
          <h2 class="mb-3">Payment Failed</h2>
          
          <p class="lead text-muted mb-4">
            Unfortunately, your payment could not be processed. Please check your payment details and try again.
          </p>
          
          <div class="alert alert-warning text-start">
            <h5 class="alert-heading">
              <i class="fas fa-exclamation-triangle me-2"></i>
              Possible reasons:
            </h5>
            <ul class="mb-0">
              <li>Insufficient funds in your account</li>
              <li>Incorrect card details</li>
              <li>Card has expired</li>
              <li>Transaction declined by your bank</li>
              <li>Network connectivity issues</li>
            </ul>
          </div>
          
          <div class="card bg-light mb-4">
            <div class="card-body">
              <h5 class="card-title">Need Help?</h5>
              <p class="card-text">
                If you continue to experience issues, our support team is ready to assist you.
              </p>
              <a href="mailto:support@texlab.com" class="btn btn-outline-primary">
                <i class="fas fa-envelope me-2"></i>Contact Support
              </a>
            </div>
          </div>
          
          <div class="d-grid gap-3 d-md-flex justify-content-md-center mt-4">
            <a href="{{ url_for('pricing.pricing') }}" class="btn btn-primary-gradient btn-lg">
              <i class="fas fa-redo me-2"></i>Try Again
            </a>
            <a href="{{ url_for('index') }}" class="btn btn-outline-secondary btn-lg">
              <i class="fas fa-home me-2"></i>Go to Dashboard
            </a>
          </div>
        </div>
      </div>
      
      <div class="text-center mt-4">
        <small class="text-muted">
          <i class="fas fa-lock me-1"></i>
          Secure payment processing powered by SSLCommerce
        </small>
      </div>
    </div>
  </div>
</div>

<style>
  .icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
  }
</style>
{% endblock %}