<div id="ovlPayment">
    <div class="dialogHeader">
        <div class="dialogIcon">
            {{#if model.error}}
            {{icon 'error'}}
            {{/if}}
        </div>
        <h2 class="dialogTitle">
            {{#if model.error}}
            {{translate 'invoicePaymentErrorTitle'}}
            {{else}}
            {{translate 'paymentRequestTitle'}}
            {{/if}}
        </h2>
        <div class="buttonContainer">
        </div>
    </div>

    <div class="dialogBody">
        <div class="dialogBlock invoiceContainer">
            {{#if model.error}}
            {{#if validationErrorMessage}}
            <p>{{validationErrorMessage}}</p>
            {{else}}
            <p>{{model.errorMessage}}</p>
            {{/if}}
            {{else}}
            <table>
                <tr>
                    <td>
                        {{#if referenceNumber}}
                        {{translate 'idinvoice'}}:
                        {{/if}}
                    </td>
                    <td>
                        {{#if referenceNumber}}
                        {{referenceNumber}}
                        {{/if}}
                    </td>
                </tr>
                
                {{#if model.invoice.Printed}}
                <tr>
                    <td>{{translate 'invoiceNumber'}}:</td>
                    <td>{{model.invoice.Number}}</td>
                </tr>
                {{/if}}
                <tr>
                    <td>{{translate 'payableDue'}}:</td>
                    <td>{{dateFormat model.invoice.PayableDue}}</td>
                </tr>
                <tr>
                    <td>{{translate 'text'}}:</td>
                    <td><b>{{model.invoice.Text}}</b></td>
                </tr>
            </table>
            <br/>
            <h4>{{translate 'invoiceDetail'}}</h4>
            <div class="editControl"></div>
            <table>
                {{#each oir in model.invoice.OpenInvoiceReceipt}}
                {{#each oip in oir.OpenInvoicePostings}}
                <tr>
                    <td>{{oip.Text}}</td>
                    <td class="right">{{currencyFormat oip.Betrag}}</td>
                </tr>
                {{/each}}
                {{/each}}
                <tr>
                    <td><b>{{translate 'totalAmount'}}</b></td>
                    <td class="right"><b>{{currencyFormat model.invoice.TotalAmount}}</b></td>
                </tr>
            </table>
            <p>{{translate 'amountInCurrency'}}</p>
            <br/>
            <div class="editControl"></div>

            <h4>{{translate 'kindOfPayment'}}</h4>
            <ul class="noBullets noIndent">
                {{#each pm in model.payment}}
                <li>{{radio-button value=pm.IdOpa checkedValue=model.selectedPaymentId name=pm.Name id=pm.IdOpa}}<label for="{{pm.IdOpa}}">{{{pm.Description}}}</label></li>
                {{/each}}
            </ul>
            {{/if}}
        </div>
    </div>
    <div class="dialogFooter">
        <div class="buttonContainer">
            {{#if model.error}}
            <button type="button" class="textButton" {{action 'closeDialog'}}>
                {{icon 'close'}}
                <div>{{translate 'close'}}</div>
            </button>
            {{else}}
            <button type="button" class="textButton" {{action 'closeDialog'}}>
                {{icon 'close'}}
                <div>{{translate 'cancel'}}</div>
            </button>
            
            <button type="button" class="textButton" {{action 'setPayment'}}>
                {{#if isWorking}}
                {{icon 'loadingAnimation'}}
                {{else}}
                {{icon 'invoice'}}
                {{/if}}
                <div>{{model.selectedPayment.TextActionPayInvoice}}</div>
            </button>

            {{#if model.selectedPayment.IsCreditCardPayment}}
            <form style="display: inline;" id="postfinancePaymentForm" action="{{paymentUrl}}" method="post">
                {{#each kv in model.fields}}
                <input type="hidden" name="{{kv.Key}}" value="{{kv.Value}}" />
                {{/each}}
            </form>
            {{/if}}

            {{/if}}
        </div>
    </div>

</div>