<!--
    *
    * This page is intended to perform a donate operation against payment backend

-->
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="{{context}}/static/css/default.css" type="text/css">
<script src="https://kit.fontawesome.com/ab15160345.js" crossorigin="anonymous"></script>

<script type="text/javascript" src="{{ context }}/static/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/rpc.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/utils.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/dom.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/ext/modal.js"></script>
<style>
    .caption { font-size:22px; font-weight:bold; text-transform: capitalize;}
    .dialog-frame .dialog {
        display:grid;
        padding:4px;
        display:grid;
        grid-template-columns: 25% auto;
        gap:2px;
    }
    .dialog-frame .title {display:grid; gap:2px; grid-template-columns:auto 32px; 
        min-height:32px;        
        border-top-left-radius: 6px;;
        border-top-right-radius: 6px;;
        color:#4682b4;
        align-items: center;
        padding:4px;
    }
    .dialog-frame .dialog { margin-top:4px;}
    .dialog-frame .dialog .icon { font-size:42px;justify-items:center; display:grid; align-items:center}
    .dialog-frame .dialog .message {
        display:grid;
        align-items:center;
        padding:8px;
        font-size:14px;
        font-weight:normal ;
        color:#000000 ;
    }
    .dialog-frame .fa-exclamation-triangle{color:#ff6500  ;}        
    .dialog-frame .fa-cog {color:gray}
    .dialog-frame .gray {color:#d3d3d3}
    .dialog-frame .steel-blue{color:#4682B4;}
       
</style>

    
    <div class="dialog-frame ">
        <div class=""> 
            <div class="title">
                <div class="bold" style="padding:4px; display:grid; align-items:center;">{{title}}</div>
                {% if type != 'PROGRESS' %}
                    <div class="active" align="center" onclick="jx.modal.close()">
                        <i class="fas fa-times"></i>
                    </div>
                {% else %}
                    <div></div>
                {% endif %}
            </div>
            <div class="dialog">
                <div class="icon">
                    <i class="{{icon|safe}}"></i>
                </div>
                <div class="message">{{message|safe}}</div>
            </div>
        </div>
        <br>
    </div>
