<div ng-controller="Cases.InfoController">
    <div class="clearfix">
        <div class="row">
            <div class="col-xs-6">
                <div ng-if="calculateDaysObj.isOverdue && objectInfo.queue.name != 'Release'" class="h4 font-bold">
                    {{objectInfo.title || 'common.value.unknown' | translate }}
                    <i class="fa fa-exclamation-circle icon-overdue"></i>
                    <small><b><span class="icon-overdue" translate>cases.comp.info.daysOverdue.label</span></b>
                    </small>
                    <small><span class="icon-overdue">({{calculateDaysObj.days}}) </span></small>
                    <span ng-if="objectInfo.deniedFlag" class="icon-overdue" translate> cases.comp.info.requestDenied.label </span>
                </div>
                <div ng-if="!calculateDaysObj.isOverdue && objectInfo.queue.name != 'Release'" class="h4 font-bold">{{objectInfo.title || 'common.value.unknown' | translate }} <small>({{calculateDaysObj.days}}) <span translate>cases.comp.info.daysToComplete.label</span></small>
                    <span ng-if="objectInfo.deniedFlag" class="icon-overdue" translate> cases.comp.info.requestDenied.label </span>
                </div>
                <div ng-if="objectInfo.queue.name == 'Release' && !objectInfo.deniedFlag">{{objectInfo.title || 'common.value.unknown' | translate }}</div>
                <div ng-if="objectInfo.queue.name == 'Release' && objectInfo.deniedFlag" class="h4 font-bold">{{objectInfo.title || 'common.value.unknown' | translate }}
                    <span ng-if="objectInfo.deniedFlag" class="icon-overdue" translate> cases.comp.info.requestDenied.label </span>
                </div>
                <span  ng-if="fullGrantAndExemptionWarning" class="icon-overdue h4 font-bold text-right" translate>cases.comp.info.fullGrantDispositionWithExemeption.label</span>
            </div>
            <div class="col-xs-6 text-right">
                <h4>{{objectInfo.caseNumber}}</h4>
                <small ng-if="hasSuggestedCases" style="margin-right: 3%">
                    <i class="fa fa-lightbulb-o" aria-hidden="true" style="color:#e6b800"/>
                    <a href="javascript:;" ng-click="suggestedCases()">
                        {{'cases.comp.suggestedCases.title' | translate}}({{numberOfSuggestedCases}})
                    </a>
                </small>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-md-2">
                <div class="h4 font-bold">{{objectInfo.receivedDate | date: ('common.defaultDateTimeUIFormat' |
                    translate)}}
                </div>
                <small class="text-muted"><span translate>cases.comp.info.receivedDate.label</span></small>
            </div>

            <div class="col-xs-12 col-md-2">
                <div class="h4 font-bold">{{objectInfo.queue.name }}
                </div>
                <small class="text-muted"><span translate>cases.comp.info.queue.label</span></small>
            </div>
            <div class="col-xs-12 col-md-2">
                <div class="h4 font-bold">
                    <a href="javascript:;" class="editable-click no-outline" ng-click="userOrGroupSearch()"
                       permission="editCaseOwningGroup" permission-object-type="CASE_FILE" permission-properties="objectInfo"
                       permission-action="disable">
                        <user-full-name userId="assignee" fallback="{{'cases.comp.approvalRouting.assigne.none' | translate}}" />
                    </a>
                </div>
                <small class="text-muted"><span translate>cases.comp.info.assignee.label</span></small>
            </div>

            <div class="col-xs-12 col-md-2">
                <div class="h4 font-bold">
                    <a href="#" editable-select="objectInfo.priority" onaftersave="saveCase()" permission="editCase"
                       permission-object-type="CASE_FILE" permission-properties="objectInfo" permission-action="disable"
                       e-ng-options="p.key as (p.key | translateData: 'core.lookups.priorities' : lang) for p in priorities">
                        {{ (objectInfo.priority | translateData: 'core.lookups.priorities' : lang) ||
                        ('common.value.unknown' | translate)
                        }}</a>
                </div>
                <small class="text-muted"><span translate>cases.comp.info.priority.label</span></small>
            </div>
            <div class="col-xs-12 col-md-2">
                <div class="h4 font-bold">{{objectInfo.status }}
                </div>
                <small class="text-muted"><span translate>cases.comp.info.status</span></small>
            </div>
            <div class="col-xs-12 col-md-2">
                <div class="h4 font-bold">
                    <user-full-name userId="objectInfo.modifier" fallback="{{'cases.comp.approvalRouting.assigne.none' | translate}}" />
                </div>
                <small class="text-muted"><span translate>cases.comp.info.modifier</span></small>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-md-2">
                <div class="h4 font-bold">{{objectInfo.perfectedDate | date: ('common.defaultDateTimeUIFormat' |
                    translate)}}
                </div>
                <small class="text-muted">
                    <span translate>cases.comp.info.perfectedDate.label </span>
                </small>
            </div>
            <div class="col-xs-12 col-md-2">
                <div class="h4 font-bold">
                    <a href="javascript:;" class="editable-click no-outline" ng-click="userOrGroupSearch()"
                       permission="editCaseOwningGroup" permission-object-type="CASE_FILE" permission-properties="objectInfo"
                       permission-action="disable">
                        {{owningGroup || 'common.value.unknown' | translate}}</a>
                </div>
                <small class="text-muted"><span translate>cases.comp.info.owningGroup.label</span></small>
            </div>

            <div class="col-xs-12 col-md-2" ng-if="isNotificationGroupEnabled">
                <div class="h4 font-bold">
                    <a href="#" editable-select="objectInfo.notificationGroup" onaftersave="updateNotificationGroup()"
                       e-ng-options="g.key as (g.value | translate) for g in notificationGroups"
                       permission="editCaseOwningGroup"
                       permission-object-type="CASE_FILE" permission-properties="objectInfo"
                       permission-action="disable">
                        {{notificationGroup || 'common.value.unknown' | translate}}
                    </a>
                </div>
                <small class="text-muted"><span translate>cases.comp.info.notificationGroup</span></small>
            </div>

            <div class="col-xs-12 col-md-2">
                <div class="h4 font-bold">
                    {{ (objectInfo.dueDate | date: ('common.defaultDateTimeUIFormat' |
                        translate)) || 'common.value.unknown' | translate }}
                </div>
                <small class="text-muted"><span translate>cases.comp.info.dueDate.label</span></small>
            </div>
            <div class="col-xs-12 col-md-2">
                <div class="h4 font-bold">
                    <a href="#" editable-select="objectInfo.componentAgency" onaftersave="updateComponentAgency()"
                       e-ng-options="g.key as (g.value | translate) for g in componentsAgencies"
                       permission="editCaseOwningGroup"
                       permission-object-type="CASE_FILE" permission-properties="objectInfo"
                       permission-action="disable">
                        {{componentAgency || 'common.value.unknown' | translate}}
                    </a>
                </div>
                <small class="text-muted"><span translate>cases.comp.info.componentAgency</span></small>
            </div>
            <div class="col-xs-12 col-md-2">
                <div class="h4 font-bold">
                    {{ (objectInfo.modified | date: ('common.defaultDateTimeUIFormat' | translate)) ||
                    'common.value.unknown' | translate }}
                </div>
                <small class="text-muted"><span translate>cases.comp.info.modified</span></small>
            </div>
            <div class="col-xs-12 col-md-2">
                <div class="h4 font-bold editable-margin-left">
                    <a href="#" editable-text="objectInfo.externalIdentifier"
                       onaftersave="setExternalIdentifier($data, objectInfo.externalIdentifier)">{{
                        objectInfo.externalIdentifier || ('common.value.unknown' | translate) }}</a>
                </div>
                <small class="text-muted"><span translate>cases.comp.info.externalIdentifier.label</span></small>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-md-2">
                <div class="h4 font-bold">
                    <a href="#" editable-select="objectInfo.difficultyRating" onaftersave="saveCase()" permission="editCase"
                       permission-object-type="CASE_FILE" permission-properties="objectInfo" permission-action="disable"
                       e-ng-options="g.key as (g.value | translate) for g in difficultyRatings">
                        {{ objectInfo.difficultyRating || 'common.value.unknown' | translate }}
                    </a>
                </div>
                <small class="text-muted"><span translate>cases.comp.info.difficultyRating.label</span></small>
            </div>
        </div>
    </div>
</div>
