<div ng-controller="Tasks.InfoController">
    <div class="clearfix">
        <div class="row">
            <div class="col-xs-6">
                <h4><a href="#" editable-text="objectInfo.title" onaftersave="saveTask()" permission="editTask"
                        permission-object-type="TASK" permission-properties="objectInfo" permission-action="disable" e-required>
                    {{objectInfo.title || ('common.value.unknown' | translate)}}</a>
                </h4>
            </div>

        </div>
        <div class="row">
            <div class="col-xs-9 col-md-3">
                <div class="h4 font-bold no-margin">
                    <a href="#" editable-number="objectInfo.percentComplete" onbeforesave="validatePercentComplete($data)"
                            onaftersave="saveTask()" permission="editTask" permission-object-type="TASK" permission-properties="objectInfo"
                            permission-action="disable">
                        {{ objectInfo.percentComplete }}
                    </a>
                </div>
                <small class="text-muted"><span translate>tasks.comp.info.percentage.label</span></small>
            </div>
            <div class="col-xs-9 col-md-3">
                <div>
                    <div class="h4 font-bold no-margin">
                        <a href="" class="editable-click no-outline" ng-click="userOrGroupSearch()" permission="editTask"
                                permission-object-type="TASK" permission-properties="objectInfo" permission-action="disable">
                            <user-full-name userId="objectInfo.assignee" fallback="{{'common.value.none' | translate}}" />
                        </a>
                    </div>
                    <small class="text-muted"><span translate>tasks.comp.info.assignee.label</span></small>
                </div>
            </div>
            <div class="col-xs-9 col-md-3">
                <div class="h4 font-bold no-margin">{{objectInfo.status || ('common.value.unknown' | translate)}}</div>
                <small class="text-muted"><span translate>tasks.comp.info.state.label</span></small>
            </div>
            <div class="col-xs-9 col-md-3">
                <div class="h4 font-bold no-margin">
                    <a href="#" editable-select="objectInfo.priority" onaftersave="saveTask()"
                            e-ng-options="p.key as (p.key | translateData: 'core.lookups.priorities' : lang) for p in priorities"
                            permission="editTask" permission-object-type="TASK" permission-properties="objectInfo"
                            permission-action="disable">
                        {{ (objectInfo.priority | translateData: 'core.lookups.priorities' : lang) || ('common.value.unknown' | translate)
                        }}</a>
                </div>
                <small class="text-muted"><span translate>tasks.comp.info.priority.label</span></small>
            </div>

            <div class="col-xs-9 col-md-3">
                <div class="h4 font-bold no-margin">
                    <a href="javascript:;"
                       ng-click="registerWatchers('startDate')"
                       moment-picker="startDate.startDateInfoUIPicker"
                       ng-model="startDate.startDateInfo"
                       format="MM/DD/YYYY h:mmA"
                       max-date="maxStartDate"
                       start-view="month"
                       auto-close="true"
                       is-open="startDate.isOpen"
                       permission="editTask" permission-object-type="TASK" permission-properties="objectInfo" permission-action="disable">
                        {{ (dateInfo.taskStartDate | date: ('common.defaultDateTimeUIFormat' | translate)) }}
                    </a>
                </div>
                <small class="text-muted"><span translate>tasks.comp.info.startDate.label</span></small>
            </div>
            <div class="col-xs-9 col-md-3">
                <div class="h4 font-bold no-margin">
                    <a href="javascript:;"
                       ng-click="registerWatchers('dueDate')"
                       moment-picker="datepickerDueDateOptions.dueDateInfoUIPicker"
                       ng-model="datepickerDueDateOptions.dueDateInfo"
                       format="MM/DD/YYYY h:mmA"
                       min-date="minDate"
                       start-view="month"
                       auto-close="true"
                       is-open="datepickerDueDateOptions.isOpen"
                       permission="editTask" permission-object-type="TASK" permission-properties="objectInfo" permission-action="disable" >
                        {{ (dateInfo.dueDate | date: ('common.defaultDateTimeUIFormat' | translate)) }}
                    </a>
                    <a ng-if="dateInfo.isOverdue" tooltip="{{'tasks.comp.info.overdue.tooltip' | translate}}" tooltip-append-to-body="true"
                            tooltip-class="tooltip-overdue">
                        <i class="fa fa-exclamation-circle icon-overdue"></i>
                    </a>
                    <a ng-if="dateInfo.isDeadline" tooltip="{{'tasks.comp.info.deadline.tooltip' | translate}}"
                            tooltip-append-to-body="true" tooltip-class="tooltip-due-soon">
                        <i class="fa fa-exclamation-triangle icon-due-soon"></i>
                    </a>
                </div>
                <small class="text-muted"><span translate>tasks.comp.info.dueDate.label</span></small>
            </div>
            <div class="col-xs-9 col-md-3">
                <div class="h4 font-bold no-margin">
                    <a href="" class="editable-click no-outline" ng-click="userOrGroupSearch()" permission="editTask"
                            permission-object-type="TASK" permission-properties="objectInfo" permission-action="disable">
                        {{owningGroup || 'common.value.unknown' | translate}}
                    </a>
                </div>
                <small class="text-muted"><span translate>tasks.comp.info.owningGroup.label</span></small>
            </div>

        </div>
    </div>
</div>
