<div class="modal-header">
    <h3 translate>common.directive.coreCalendar.eventDetailsDialog.title</h3>
</div>
<div class="modal-body">
    <h3 translate>{{eventDetails.subject}}</h3>
    <div class="well-sm">
        <div class="row">
            <div class="col-sm-12 form-group">
                <strong class="pull-right" ng-if="privateEvent"
                        translate>common.directive.coreCalendar.eventDetailsDialog.private.label</strong>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4 form-group">
                <label translate>common.directive.coreCalendar.eventDetailsDialog.start.label</label>
                <span>{{eventDetails.start | date:'MM/dd/yyyy h:mm a'}}</span>
            </div>
            <div class="col-sm-4">
                <label translate>common.directive.coreCalendar.eventDetailsDialog.end.label</label>
                <span>{{eventDetails.end | date:'MM/dd/yyyy h:mm a'}}</span>
            </div>
            <div class="col-sm-4">
                <label translate>common.directive.coreCalendar.eventDetailsDialog.priority.label</label>
                <span translate>{{eventPriority}}</span>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8 form-group">
                <label translate>common.directive.coreCalendar.eventDetailsDialog.occurs.label</label>
                <span>{{recurrenceDescription}}</span>
            </div>
            <div class="col-sm-4">
                <label translate>common.directive.coreCalendar.eventDetailsDialog.reminders.label</label>
                <span translate>{{eventReminder}}</span>
            </div>
        </div>
        <hr>
        <div class="row well-sm">
            <div class="col-sm-12 form-group">
				<span ng-bind-html="eventDetails.details">
				</span>
            </div>
        </div>
        <hr>
        <div class="row form-group">
            <div class="col-sm-12">
                <label translate>common.directive.coreCalendar.eventDetailsDialog.attachments.label</label>
            </div>
            <div class="col-sm-12 form-group">
				<span ng-repeat="file in eventDetails.files" class="well-sm">
				    <!--<a ng-click="downloadAttachment(file)"><strong class="ng-binding">{{file.fileName}}</strong></a>-->
                    <button class="btn btn-link" ng-click="downloadAttachment(file)">
                    <i class="fa fa-file" aria-hidden="true"></i>
                    <span>{{file.fileName}}</span>
			    </span>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3">
                <label for="attendees" translate>common.directive.coreCalendar.eventDetailsDialog.invited.label</label>
                <ul name="attendees" class="list-unstyled well-sm">
                    <li ng-repeat="invited in eventDetails.attendees">
                        <span>{{invited.name}}</span>
                        <span>{{invited.email}}</span>
                    </li>
                </ul>
            </div>
            <div class="col-sm-3">
                <label for="attendees" translate>common.directive.coreCalendar.eventDetailsDialog.accepted.label</label>
                <ul name="attendees" class="list-unstyled well-sm">
                    <li ng-repeat="person in attendeesAccepted">
                        <span>{{person.name}}</span>
                        <span>{{person.email}}</span>
                    </li>
                </ul>
            </div>
            <div class="col-sm-3">
                <label for="attendees" translate>common.directive.coreCalendar.eventDetailsDialog.maybe.label</label>
                <ul name="attendees" class="list-unstyled well-sm">
                    <li ng-repeat="person in attendeesMaybe">
                        <span>{{person.name}}</span>
                        <span>{{person.email}}</span>
                    </li>
                </ul>
            </div>
            <div class="col-sm-3">
                <label for="attendees" translate>common.directive.coreCalendar.eventDetailsDialog.declined.label</label>
                <ul name="attendees" class="list-unstyled well-sm">
                    <li ng-repeat="person in attendeesDeclined">
                        <span>{{person.name}}</span>
                        <span>{{person.email}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary pull-left" ng-click="cancel()" translate>
        common.directive.coreCalendar.eventDetailsDialog.cancel.button
    </button>
    <button type="button" class="btn btn-secondary" ng-click="deleteEvent()" translate>
        common.directive.coreCalendar.eventDetailsDialog.delete.button
    </button>
    <button type="button" class="btn btn-primary" ng-click="editEvent()" translate>
        common.directive.coreCalendar.eventDetailsDialog.edit.button
    </button>
</div>