<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Vertragsarchiv</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>Vertragsarchiv</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>Archivierte 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="btnReactivateContracts">
                            Ausgewählte Verträge reaktivieren
                        </button>
                        <button type="button"
                                class="btn btn-danger pull-right"
                                data-id="btnDeleteContracts">
                            Ausgewählte Verträge löschen
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal inmodal fade"
     data-id="modal-confirm-single-reactivation"
     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 reaktivieren</h4>
            </div>
            <div class="modal-body">
                <section data-id="section-single-reactivation-confirmation"
                         style="display: none">
                    <h5>Vertrag aus dem Archiv reaktivieren?</h5>
                    <p>
                        Möchten Sie den Vertrag wirklich reaktivieren?
                    </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="btnReactivate"
                        class="btn btn-danger">Ja, reaktivieren</button>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal fade"
     data-id="modal-confirm-multiple-reactivation"
     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 reaktivieren</h4>
            </div>
            <div class="modal-body">
                <section data-id="section-single-reactivation-confirmation"
                         style="display: none">
                    <h5>Verträge aus dem Archiv reaktivieren?</h5>
                    <p>
                        Möchten Sie die ausgewählten Verträge wirklich reaktivieren?
                    </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="btnReactivate"
                        class="btn btn-danger">Ja, reaktivieren</button>
            </div>
        </div>
    </div>
</div>


<div class="modal inmodal fade"
     data-id="modal-confirm-single-delete"
     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 löschen</h4>
            </div>
            <div class="modal-body">
                <section data-id="section-single-delete-confirmation"
                         style="display: none">
                    <h5>Vertrag unwiderruflich löschen?</h5>
                    <div class="alert alert-danger">
                        <p>
                            Möchten Sie den Vertrag wirklich löschen? Dieser Vorgang kann nicht rückgängig gemacht werden.
                        </p>
                        <p>
                            Alle zugewiesenen Verrechnungen werden bei der Löschung des Vertrages zurückgesetzt.
                        </p>
                    </div>
                </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="btnDeleteContract"
                        class="btn btn-danger">Ja, löschen</button>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal fade"
     data-id="modal-confirm-multiple-delete"
     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 löschen</h4>
            </div>
            <div class="modal-body">
                <section data-id="section-single-delete-confirmation"
                         style="display: none">
                    <h5>Verträge unwiderruflich löschen?</h5>
                    <div class="alert alert-danger">
                        <p>
                            Möchten Sie die ausgewählten Verträge wirklich löschen? Dieser Vorgang kann nicht rückgängig gemacht werden.
                        </p>
                        <p>
                            Alle zugewiesenen Verrechnungen werden bei der Löschung der Verträge zurückgesetzt.
                        </p>
                    </div>
                </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="btnDeleteContract"
                        class="btn btn-danger">Ja, löschen</button>
            </div>
        </div>
    </div>
</div>