<div class="page-content-wrapper">
    <div class="page-content all">
        <div class="row">
            <div class="col-md-12">
                <!-- BEGIN EXAMPLE TABLE PORTLET-->


                <div class="portlet box blue">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-cogs"></i>Appointments
                        </div>

                    </div>
                    <div class="portlet-body" style="padding: 15px;">
                        <div id='loading'>loading...</div>
                        <div id='appointments'></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<style>
    #appointments {
        max-width: 1100px;
        margin: 40px auto;
    }
    #loading {
         display: none;
         position: absolute;
         top: 10px;
         right: 10px;
     }
</style>

<script src="{$path}/_assets/custom/appointments.js" type="text/javascript"></script>


