
<div tp-teleperiod>
    <tp-period-picker
                      workingtimes="loadNonWorkingTimes"
                      events="loadEvents"
                      dtstart="selection.begin"
                      dtend="selection.end"
                      focusdate="selection.begin"
                      periods="selection.periods"
                      selectedevents="request.events"
                      dayFirstMinute="0"
                      dayLastMinute="1320"
                      ></tp-period-picker>
</div>

<form class="" role="form">

    <div class="col-sm-7">
        <div class="form-group top17 form-inline">
            <div class="input-group">
                <label class="sr-only" for="absenceBeginDate">Begin date</label>
                <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                <input id="adbsenceBeginDate" class="form-control" ng-model="selection.begin" bs-datepicker type="text" placeholder="{{'Begin date'|translate}}" data-autoclose="1" />
            </div>

            <div class="input-group">
                <label class="sr-only" for="absenceBeginHour">Begin hour</label>
                <div class="input-group-addon"><i class="fa fa-clock-o"></i></div>
                <input id="absenceBeginHour" class="form-control" ng-model="selection.begin" bs-timepicker type="text" size="5" maxsize="5" placeholder="{{'Hour'|translate}}" />
            </div>
        </div>


        <div class="form-group top17 form-inline">
            <div class="input-group">
                <label class="sr-only" for="absenceEndDate">End date</label>
                <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                <input id="adbsenceEndDate" class="form-control" ng-model="selection.end" bs-datepicker type="text" placeholder="{{'End date'|translate}}" data-autoclose="1" />
            </div>

            <div class="input-group">
                <label class="sr-only" for="absenceEndHour">End hour</label>
                <div class="input-group-addon"><i class="fa fa-clock-o"></i></div>
                <input id="absenceEndHour" class="form-control" ng-model="selection.end" bs-timepicker type="text" size="5" maxsize="5" placeholder="{{'Hour'|translate}}" />
            </div>
        </div>

        <div class="form-group">
            <label for="summary" translate>Recovery request summary</label>
		    <input type="text" class="form-control" id="summary" ng-model="request.workperiod_recover[0].summary" required />
        </div>

        <div class="form-group" ng-if="recoverquantities.length">
            <label for="right_quantity" translate>Recovery claimed</label>
		    <select id="right_quantity" class="form-control" ng-model="request.workperiod_recover[0].recoverQuantity" ng-options="option.name for option in recoverquantities  track by option._id">
            </select>
        </div>
    </div>

    <div class="col-sm-5">
        <div class="panel  panel-default top30">
            <div class="panel-body">
                <h4 translate>Selected duration:</h4>
                <p>{{selection.days}} <span translate>or</span> {{selection.hours}}</p>
            </div>
        </div>

        <div class="panel  panel-primary top30" ng-if="recoverquantities.length">
            <div class="panel-body bg-primary">
                <h4 translate>Right quantity claimed by recovery:</h4>
                <p>{{request.workperiod_recover[0].recoverQuantity.quantity}} {{request.workperiod_recover[0].recoverQuantity.quantity_dispUnit}}</p>
            </div>
        </div>
    </div>

    <div class="col-sm-12 top30">
        <button class="btn btn-primary" ng-disabled="!selection.end || !selection.begin" ng-click="save()" translate>Save</button>
    </div>
</form>
