<!-- Attendees -->
<div class="row">
    <div class="col-sm-12 form-group">
        <label for="attendees">
            <span translate>common.directive.coreCalendar.addNewEventDialog.form.requiredAttendees.label</span>
            <span class="required-asterisk">*</span>
        </label>
        <textarea name="textarea" id="attendees" ng-model="requiredAttendeesViewModel" class="user-picker-input input-md form-control"
                placeholder="{{ 'common.directive.coreCalendar.addNewEventDialog.form.requiredAttendees.placeholder' | translate }}"
                ng-click="chooseAttendees('REQUIRED')" readonly required></textarea>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 form-group">
        <label for="attendees">
            <span translate>common.directive.coreCalendar.addNewEventDialog.form.optionalAttendees.label</span>
        </label>
        <textarea name="textarea" name="attendees" ng-model="optionalAttendeesViewModel" class="user-picker-input input-md form-control"
                placeholder="{{ 'common.directive.coreCalendar.addNewEventDialog.form.optionalAttendees.placeholder' | translate }}"
                ng-click="chooseAttendees('OPTIONAL')" readonly></textarea>
    </div>
</div><!-- Subject -->
<div class="row">
    <div class="col-sm-12 form-group">
        <label for="subject">
            <span translate>common.directive.coreCalendar.addNewEventDialog.form.subject.label</span>
            <span class="required-asterisk">*</span>
        </label>
        <input id="subject" type="text" class="form-control" ng-model="eventDataModel.subject"
                placeholder="{{'common.directive.coreCalendar.addNewEventDialog.form.subject.placeholder' | translate}}" required>
    </div>
</div><!-- Location -->
<div class="row">
    <div class="col-sm-12 form-group">
        <label for="location">
            <span translate>common.directive.coreCalendar.addNewEventDialog.form.location.label</span>
        </label>
        <input id="location" type="text" class="form-control" ng-model="eventDataModel.location"
                placeholder="{{'common.directive.coreCalendar.addNewEventDialog.form.location.placeholder' | translate}}">
    </div>
</div><!-- Start Date Time and Priority -->
<div class="row">
    <div class="col-sm-4 form-group" ng-if="!recurrentEvent">
        <label for="startDate">
            <span translate>common.directive.coreCalendar.addNewEventDialog.form.startDate.label</span>
            <span class="required-asterisk">*</span>
        </label>
        <date-time-picker data="eventDataModel.start" is-required="true" show-time="{{eventDataModel.allDayEvent}}"></date-time-picker>
    </div>
    <div class="col-sm-4 form-group">
        <label for="priority">
            <span translate>common.directive.coreCalendar.addNewEventDialog.form.priority.label</span>
        </label>
        <select id="priority" class="form-control" ng-model="eventDataModel.priority">
            <option value="" disabled selected hidden translate>
                common.directive.coreCalendar.addNewEventDialog.form.priority.placeholder
            </option>
            <option ng-repeat="option in priorityOptions" value="{{option.value}}" translate>
                {{option.label}}
            </option>
        </select>
    </div>
</div><!-- End Date Time and Reminder -->
<div class="row">
    <div class="col-sm-4 form-group" ng-if="!recurrentEvent">
        <label for="endDate">
            <span translate>common.directive.coreCalendar.addNewEventDialog.form.endDate.label</span>
        </label>
        <date-time-picker data="eventDataModel.end" show-time="{{eventDataModel.allDayEvent}}"></date-time-picker>
    </div>
    <div class="col-sm-4 form-group">
        <label for="reminder">
            <span translate>common.directive.coreCalendar.addNewEventDialog.form.reminder.label</span>
        </label>
        <select id="reminder" class="form-control" ng-model="eventDataModel.remindIn"
                ng-options="option.value as option.label | translate for option in reminderOptions" translate>
        </select>
    </div>
</div><!-- Other Options -->
<div class="row">
    <label class="col-sm-12" for="otherOptions">
        <span translate>common.directive.coreCalendar.addNewEventDialog.form.otherOptions.label</span>
    </label>
    <fieldset id="otherOptions" class="col-sm-12 form-group">
        <div class="row well-sm">
            <div class="col-sm-4" ng-if="!recurrentEvent">
                <label class="checkbox-inline">
                    <input type="checkbox" ng-model="eventDataModel.allDayEvent">
                    <span translate>
                        common.directive.coreCalendar.addNewEventDialog.form.allDayEvent.checkbox
                    </span>
                </label>
            </div>
            <div class="col-sm-4">
                <label class="checkbox-inline">
                    <input type="checkbox" ng-model="eventDataModel.sensitivity" ng-true-value="'PRIVATE'" ng-false-value="'NORMAL'">
                    <span translate>
                        common.directive.coreCalendar.addNewEventDialog.form.privateEvent.checkbox
                    </span>
                </label>
            </div>
        </div>
    </fieldset>
</div>
<div class="row" ng-hide="!updateMaster && existingEvent && !originiallyNotRecurrent">
    <label class="col-sm-12" for="recurrence">
        <span translate>common.directive.coreCalendar.addNewEventDialog.form.recurrence.label</span>
    </label>
    <fieldset id="recurrence" class="col-sm-12 form-group">
        <div class="row well-sm">
            <div class="col-sm-12" ng-if="!recurrentEvent">
                <button class="btn btn-link" ng-click="setEventRecurrence()">
                    <i class="fa fa-refresh"></i>
                    <span translate>common.directive.coreCalendar.addNewEventDialog.form.setRecurrence.button</span>
                </button>
            </div>
            <div class="col-sm-12" ng-if="recurrentEvent">
                <span>{{recurrenceDescription}}</span>
            </div>
            <div class="col-sm-12" ng-if="recurrentEvent">
                <button class="btn btn-link" ng-click="setEventRecurrence()">
                    <i class="fa fa-refresh"></i>
                    <span translate>common.directive.coreCalendar.addNewEventDialog.form.editRecurrence.button</span>
                </button>
            </div>
        </div>
    </fieldset>
</div>
