{% extends "matrixhosting/base.html" %}

{% load static i18n %}

{% block title %} Request Details {% endblock %}

{% block content %} 
  <div class="container"> 
    <div class="row mt-3 mb-4">
      <div class="col-lg-12 mx-auto mb-4">
        <div class="row widget-steps">
          <div class="col-4 step complete">
            <div class="step-name">{%trans "Details" %}</div>
            <div class="progress">
              <div class="progress-bar"></div>
            </div>
            <a href="#" class="step-dot"></a> 
          </div>
          <div class="col-4 step complete">
            <div class="step-name">{%trans "Confirm" %}</div>
            <div class="progress">
              <div class="progress-bar"></div>
            </div>
            <a href="#" class="step-dot"></a> 
          </div>
          <div class="col-4 step complete">
            <div class="step-name">{%trans "Success" %}</div>
            <div class="progress">
              <div class="progress-bar"></div>
            </div>
            <a href="#" class="step-dot"></a> 
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-9 col-lg-7 col-xl-6 mx-auto"> 
        <div class="bg-white text-center shadow-sm rounded p-3 pt-sm-4 pb-sm-5 px-sm-5 mb-4">
          <div class="my-4">
            <p class="text-success text-20 line-height-07"><i class="fas fa-check-circle"></i></p>
            <p class="text-success text-8 font-weight-500 line-height-07">{%trans "Success!" %}</p>
            <p class="lead">{%trans "Order has been successfully added" %}</p>
          </div>
          <p class="text-3 mb-4">{%trans "Your current balance is" %}<span class="text-4 font-weight-500"> {{balance}} CHF. </span>{%trans "See transaction details under" %} <a class="btn-link" href="{% url 'matrix:payments' %}">{%trans "Payments" %}</a>.</p>
          <a href="{% url 'matrix:invoice_download' %}" class="btn btn-white border border-success text-success" role="button"><i class="fas fa-print"></i> {%trans "Download Invoice" %}</a>
        </div>
      </div>
    </div>
  </div>
{% endblock %} 

{% block js_extra %}
{% endblock js_extra %}