<!-- MAIN CONTENT -->
<div id="content">

    <div class="row">
        <big-breadcrumbs items="['Home', 'Calendar']" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></big-breadcrumbs>
        <div smart-include="app/layout/partials/sub-header.tpl.html"></div>
    </div>
    <!-- widget grid -->
    <section id="widget-grid" widget-grid>
        <!-- row -->
        <div class="row" ng-controller="CalendarCtrl" >


            <div class="col-sm-12 col-md-12 col-lg-3">
                <!-- new widget -->
                <div class="jarviswidget jarviswidget-color-blueDark">
                    <header>
                        <h2> Add Events </h2>
                    </header>

                    <!-- widget div-->
                    <div>

                        <div class="widget-body">
                            <!-- content goes here -->

                            <form id="add-event-form">
                                <fieldset>

                                    <div class="form-group">
                                        <label>Select Event Icon</label>
                                        <div class="btn-group btn-group-sm btn-group-justified" data-toggle="buttons" > <!--  -->
                                            <label class="btn btn-default active">
                                                <input type="radio" name="iconselect" id="icon-1" value="fa-info" radio-toggle ng-model="newEvent.icon">
                                                <i class="fa fa-info text-muted"></i> </label>
                                            <label class="btn btn-default">
                                                <input type="radio" name="iconselect" id="icon-2" value="fa-warning" radio-toggle  ng-model="newEvent.icon">
                                                <i class="fa fa-warning text-muted"></i> </label>
                                            <label class="btn btn-default">
                                                <input type="radio" name="iconselect" id="icon-3" value="fa-check" radio-toggle  ng-model="newEvent.icon">
                                                <i class="fa fa-check text-muted"></i> </label>
                                            <label class="btn btn-default">
                                                <input type="radio" name="iconselect" id="icon-4" value="fa-user" radio-toggle  ng-model="newEvent.icon">
                                                <i class="fa fa-user text-muted"></i> </label>
                                            <label class="btn btn-default">
                                                <input type="radio" name="iconselect" id="icon-5" value="fa-lock" radio-toggle  ng-model="newEvent.icon">
                                                <i class="fa fa-lock text-muted"></i> </label>
                                            <label class="btn btn-default">
                                                <input type="radio" name="iconselect" id="icon-6" value="fa-clock-o" radio-toggle  ng-model="newEvent.icon">
                                                <i class="fa fa-clock-o text-muted"></i> </label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>Event Title</label>
                                        <input ng-model="newEvent.title" class="form-control"  id="title" name="title" maxlength="40" type="text" placeholder="Event Title">
                                    </div>
                                    <div class="form-group">
                                        <label>Event Description</label>
                                        <textarea  ng-model="newEvent.description" class="form-control" placeholder="Please be brief" rows="3" maxlength="40" id="description"></textarea>
                                        <p class="note">Maxlength is set to 40 characters</p>
                                    </div>

                                    <div class="form-group">
                                        <label>Select Event Color</label>
                                        <div class="btn-group btn-group-justified btn-select-tick" data-toggle="buttons" >
                                            <label class="btn bg-color-darken active">
                                                <input   ng-model="newEvent.className" radio-toggle   type="radio" name="priority" id="option1" value="bg-color-darken txt-color-white" >
                                                <i class="fa fa-check txt-color-white"></i> </label>
                                            <label class="btn bg-color-blue">
                                                <input  ng-model="newEvent.className" radio-toggle   type="radio" name="priority" id="option2" value="bg-color-blue txt-color-white">
                                                <i class="fa fa-check txt-color-white"></i> </label>
                                            <label class="btn bg-color-orange">
                                                <input  ng-model="newEvent.className" radio-toggle   type="radio" name="priority" id="option3" value="bg-color-orange txt-color-white">
                                                <i class="fa fa-check txt-color-white"></i> </label>
                                            <label class="btn bg-color-greenLight">
                                                <input  ng-model="newEvent.className" radio-toggle   type="radio" name="priority" id="option4" value="bg-color-greenLight txt-color-white">
                                                <i class="fa fa-check txt-color-white"></i> </label>
                                            <label class="btn bg-color-blueLight">
                                                <input  ng-model="newEvent.className" radio-toggle   type="radio" name="priority" id="option5" value="bg-color-blueLight txt-color-white">
                                                <i class="fa fa-check txt-color-white"></i> </label>
                                            <label class="btn bg-color-red">
                                                <input  ng-model="newEvent.className" radio-toggle   type="radio" name="priority" id="option6" value="bg-color-red txt-color-white">
                                                <i class="fa fa-check txt-color-white"></i> </label>
                                        </div>
                                    </div>

                                </fieldset>
                                <div class="form-actions">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <button class="btn btn-default" type="button" id="add-event" ng-click="addEvent()" >
                                                Add Event
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>

                            <!-- end content -->
                        </div>

                    </div>
                    <!-- end widget div -->
                </div>
                <!-- end widget -->

                <div class="well well-sm" id="event-container">
                    <form>
                        <legend>
                            Draggable Events
                        </legend>
                        <ul id='external-events' class="list-unstyled">

                            <li ng-repeat="event in eventsExternal" dragable-event>
                                <span class="{{event.className}}" 
                                    data-description="{{event.description}}"
                                    data-icon="{{event.icon}}"
                                >
                                {{event.title}}</span>
                            </li>
                            
                        </ul>

                        <!-- <ul id='external-events' class="list-unstyled">
                            <li>
                                <span class="bg-color-darken txt-color-white" data-description="Currently busy" data-icon="fa-time">Office Meeting</span>
                            </li>
                            <li>
                                <span class="bg-color-blue txt-color-white" data-description="No Description" data-icon="fa-pie">Lunch Break</span>
                            </li>
                            <li>
                                <span class="bg-color-red txt-color-white" data-description="Urgent Tasks" data-icon="fa-alert">URGENT</span>
                            </li>
                        </ul> -->

                        <div class="checkbox">
                            <label>
                                <input type="checkbox" id="drop-remove" class="checkbox style-0" checked="checked">
                                <span>remove after drop</span> </label>

                        </div>
                    </form>

                </div>
            </div>


            <article class="col-sm-12 col-md-12 col-lg-9">
                <full-calendar id="main-calendar-widget" data-events="events"></full-calendar>
            </article>
        </div>
    </section>
</div>