<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Offene Forderungen</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="index.html">Home</a>
            </li>
            <li class="breadcrumb-item">
                <a>Vertragsverwaltung</a>
            </li>
            <li class="breadcrumb-item active">
                <strong>Forderungen</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">
    </div>
</div>
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>Verträge</h5>
                </div>
            </div>
            <div class="ibox-content sk-loading" style="min-height: 200px">
                <div class="sk-spinner sk-spinner-double-bounce">
                    <div class="sk-double-bounce1"></div>
                    <div class="sk-double-bounce2"></div>
                </div>
                <div f-id="container-contract-data-table"></div>
                <div class="row">
                    <div class="col-lg-12">
                        <button type="button"
                                class="btn btn-primary"
                                data-id="btnMarkAsPaid">
                            Ausgewählte Verträge als bezahlt markieren
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal inmodal fade"
     data-id="modal-confirm-single-mark-payed"
     tabindex="-1"
     role="dialog"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button"
                        class="close"
                        data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">Vertrag als bezahlt markieren</h4>
            </div>
            <div class="modal-body">
                <section data-id="section-single-mark-payed-confirmation"
                         style="display: none">
                    <h5>Vertrag auf "bezahlt" setzen</h5>
                    <p>
                        Möchten Sie den Vertrag wirklich als "bezahlt" markieren?
                    </p>
                </section>
                <section data-id="section-loader"
                         style="display: none">
                    <div style="height: 200px; padding-top: 70px">
                        <div class="sk-spinner sk-spinner-double-bounce">
                            <div class="sk-double-bounce1"></div>
                            <div class="sk-double-bounce2"></div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-white"
                        data-dismiss="modal">Abbrechen</button>
                <button type="button"
                        data-id="btnMarkPayed"
                        class="btn btn-danger">Ja, Vertrag wurde bezahlt</button>
            </div>
        </div>
    </div>
</div>


<div class="modal inmodal fade"
     data-id="modal-confirm-multiple-mark-payed"
     tabindex="-1"
     role="dialog"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button"
                        class="close"
                        data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">Verträge als bezahlt markieren</h4>
            </div>
            <div class="modal-body">
                <section data-id="section-multiple-mark-payed-confirmation"
                         style="display: none">
                    <h5>Verträge auf "bezahlt" setzen</h5>
                    <p>
                        Möchten Sie die ausgewählten Verträge wirklich als "bezahlt" markieren?
                    </p>
                </section>
                <section data-id="section-loader"
                         style="display: none">
                    <div style="height: 200px; padding-top: 70px">
                        <div class="sk-spinner sk-spinner-double-bounce">
                            <div class="sk-double-bounce1"></div>
                            <div class="sk-double-bounce2"></div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-white"
                        data-dismiss="modal">Abbrechen</button>
                <button type="button"
                        data-id="btnMarkPayed"
                        class="btn btn-danger">Ja, Verträge wurde bezahlt</button>
            </div>
        </div>
    </div>
</div>