<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Terminübersicht (Liste)</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="index.html">Home</a>
            </li>
            <li class="breadcrumb-item">
                <a>Termine</a>
            </li>
            <li class="breadcrumb-item active">
                <strong>Liste</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>Termine</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-appointment-data-table"></div>
                <div class="row">
                    <div class="col-lg-12">
                        <button type="button"
                                class="btn btn-primary"
                                data-id="btnEditPriceFactor">
                            Abrechnungsfaktor bearbeiten
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal fade"
     data-id="modal-price-factor-form"
     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">Abrechnungsfaktor bearbeiten</h4>
            </div>
            <div class="modal-body">
                <section data-id="section-pricefactor-form"
                         style="display: none">
                    <form data-id="formAppointmentPriceFactor">
                        <p>Bitte geben Sie den Abrechnungsfaktor für die ausgewählten Termine ein</p>
                        <div class="form-group">
                            <input type="number"
                                   class="form-control form-control-lg"
                                   data-id="inputPriceFactor"
                                   value="1"
                                   min="0"
                                   required
                                   step="0.01" />
                        </div>
                    </form>
                </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="btnSavePriceFactor"
                        class="btn btn-primary">Speichern</button>
            </div>
        </div>
    </div>
</div>