<div ng-controller="Cases.InfoController">
    <div class="clearfix">
        <div class="row">
            <div class="col-xs-6">
                <h3>{{objectInfo.title || 'common.value.unknown' | translate}}</h3>
            </div>
            <div class="col-xs-6 text-right">
                <h4>{{objectInfo.caseNumber}}</h4>
            </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">
                    <a href="javascript:;"
                       ng-click="registerWatcher()"
                       moment-picker="dueDate.dueDateInfoUIPicker"
                       ng-model="dueDate.dueDateInfo"
                       format="MM/DD/YYYY"
                       min-date="minDate"
                       start-view="month"
                       auto-close="true"
                       is-open="dueDate.isOpen"
                       permission="editCase" permission-object-type="CASE_FILE"
                       permission-properties="objectInfo" permission-action="disable">
                        {{dateInfo.dueDate || ('common.value.unknown' | translate) }}
                    </a>
                </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.requestType" onaftersave="updateRequestType()"
                       e-ng-options="g.key for g in requestTypes"
                       permission="editCaseOwningGroup"
                       permission-object-type="CASE_FILE" permission-properties="objectInfo"
                       permission-action="disable">
                        {{ objectInfo.requestType || 'common.value.unknown' | translate}}
                    </a>
                </div>
                <small class="text-muted"><span translate>cases.comp.info.type</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">
                <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 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 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>
    </div>
</div>
