<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Vertragsverwaltung Dashboard</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>Übersicht</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">
    </div>
</div>
<div class="wrapper wrapper-content">

    <div class="row">
        <div class="col-lg-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <span class="label label-success float-right">Laufende</span>
                    <h5>Verträge</h5>
                </div>
                <div class="ibox-content sk-loading">
                    <div class="sk-spinner sk-spinner-double-bounce">
                        <div class="sk-double-bounce1"></div>
                        <div class="sk-double-bounce2"></div>
                    </div>
                    <h1 class="no-margins">
                        <span f-id="span-stat-running-contracts">---</span>
                    </h1>
                    <small>Alle Verträge, ausser archivierte. Beinhaltet Kontigent- und Flatrate Verträge.</small>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <span class="label label-danger float-right">Offen</span>
                    <h5>Anzahl offener Verrechnungen</h5>
                </div>
                <div class="ibox-content sk-loading">
                    <div class="sk-spinner sk-spinner-double-bounce">
                        <div class="sk-double-bounce1"></div>
                        <div class="sk-double-bounce2"></div>
                    </div>
                    <h1 class="no-margins">
                        <span f-id="span-stat-appointments-to-charge">---</span>
                    </h1>
                    <small>Bezogen auf stattgefundene Termine</small>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="ibox ">
                <div class="ibox-title">
                    <span class="label label-danger float-right">Offen</span>
                    <h5>Offene Forderungen</h5>
                </div>
                <div class="ibox-content sk-loading">
                    <div class="sk-spinner sk-spinner-double-bounce">
                        <div class="sk-double-bounce1"></div>
                        <div class="sk-double-bounce2"></div>
                    </div>
                    <h1 class="no-margins">
                        €&nbsp;<span f-id="span-stat-open-payments">---</span>
                    </h1>
                    <small>Summe aller offenen Forderungen</small>
                </div>
            </div>
        </div>

    </div>


    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>Vertragsaktivitäten der letzten 30 Tage</h5>
                </div>
                <div class="ibox-content">
                    <div>
                        <canvas data-id="canvas-chart-contract-activity"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>