<div class="hekpdesk helpdeskShowTicket">
    <div wizdom365-Spinner loading="!vm.ready"></div>
    <div class="container-fluid" ng-show="vm.ready">
        <div class="row ">
            <!-- Right column start (pushed to the right by Bootstrap ) -->
            <div class="col-xs-12 col-md-push-8 col-md-4 helpdeskShowTicketRightSection">

                <!-- Ticket supporter currently assigned -->
                <div class="helpdeskControlColumnBox helpdeskSupportResponsible">
                    <div class="helpdeskControlColumnBoxHeading">{{'Assigned supporter' | translate}}</div>
                    <div ng-if="vm.currentSupporter.length > 0" wizdom365-presence-picture="" class="helpdeskPersonImage" size="AVATAR" accountname="vm.currentSupporter[0].loginName" name="vm.currentSupporter[0].displayName"></div>
                    <div ng-if="vm.currentSupporter.length > 0" class="helpdeskSupportResponsibleName">
                        {{vm.currentSupporter[0].displayName}}
                    </div>
                    <div class="responsibleExpander" ng-show="supporterMode()" ng-click="vm.currentSupporter.collapsed ? vm.currentSupporter.collapsed = !vm.currentSupporter.collapsed : vm.currentSupporter.collapsed = true">
                        {{'Assign the case to' | translate}}
                        <span class="helpdeskExpanderArrow"><i ng-class="vm.currentSupporter.collapsed ? 'ms-Icon ms-Icon--ChevronRight' : 'ms-Icon ms-Icon--ChevronDown'"></i></span>
                    </div>
                    <div class="responsibleExpanderContent" ng-show="vm.currentSupporter.collapsed">
                        <div wizdom365-Principalpicker mode="users" allowmultiple="false" principals="vm.currentSupporter" add-fn="assignSupporter(principal)"></div>
                    </div>
                </div>

                <!-- User/owner (the person asking for solution) -->
                <div class="helpdeskControlColumnBox helpdeskTicketCreatedBy" ng-show="supporterMode()">
                    <div class="helpdeskControlColumnBoxHeading">{{'Requested by' | translate}}</div>
                    <div class="helpdeskTableDiv">
                        <div class="helpdeskTableDivCell">
                            <div wizdom365-presence-picture=""
                                 class="helpdeskPersonImage"
                                 size="AVATAR"
                                 accountname="vm.owner[0].loginName"
                                 name="vm.owner[0].displayName">
                            </div>
                        </div>
                        <div class="helpdeskTableDivCell100">
                            {{vm.owner[0].displayName}}
                            <div class="row ticket-email" ng-if="vm.owner[0].email != null && vm.owner[0].email.length > 0">
                                <div class="col-md-12 word-break"><a href="mailto:{{vm.owner[0].email}}">{{vm.owner[0].email}}</a></div>
                            </div>
                            <div class="row" ng-if="vm.owner[0].department != null && vm.owner[0].department.length > 0">
                                <div class="col-md-12 word-break">{{vm.owner[0].department}}</div>
                            </div>
                            <div class="row" ng-if="vm.owner[0].phone != null && vm.owner[0].phone.length > 0">
                                <div class="col-md-12 word-break">{{vm.owner[0].phone}}</div>
                            </div>

                            <div class="row helpdeskTicketDateAndTime">
                                <div class="col-md-12"><i class="ms-Icon ms-Icon--Calendar"></i>{{vm.created | date : 'MM/dd yyyy' }}</div>
                            </div>
                            <div class="row helpdeskTicketDateAndTime">
                                <div class="col-md-12"><i class="ms-Icon ms-Icon--Recent"></i>{{vm.created | date : 'HH:mm' }}</div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Files relevant for the ticket-->
                <div class="helpdeskControlColumnBox helpdeskTicketFiles">
                    <div class="helpdeskControlColumnBoxHeading">{{"Files relevant for the ticket" | translate}}</div>
                    <div ng-repeat="file in vm.files" class="fileRepeater">
                        <a ng-href="{{file.path}}" target="_blank">{{file.name}}</a>
                        <i class="ms-Icon ms-Icon--ChromeClose" ng-click="removeFile(file)" title="{{'Remove' | translate}}"></i>
                    </div>
                    <div ng-show="vm.filesAreUploading">{{"Files are uploading, please wait" | translate}}</div>
                    <div file-uploader
                         class="fileUploader"
                         ng-hide="vm.filesAreUploading"
                         module="helpdesk"
                         module-Context="ticketId"
                         allow-Multiple="true"
                         on-File-Upload-Started="FileUploadStarted"
                         on-File-Upload-Completed="FileUploadCompleted">
                    </div>
                </div>


                <!-- Ticket overview -->
                <div class="helpdeskControlColumnBox helpdeskTicketOverview">
                    <div class="helpdeskControlColumnBoxHeading">{{"Dates" | translate}}</div>
                    <table class="table-responsive">
                        <tr>
                            <td>{{"Created" | translate}}</td>
                            <td ng-if="vm.created !== ''">{{vm.created | date : 'shortDate' }}</td>
                            <td ng-if="vm.created !== ''">{{vm.created | date : 'shortTime' }}</td>
                        </tr>
                        <tr>
                            <td>{{"Started" | translate}}</td>
                            <td ng-if="vm.started !== ''">{{vm.started | date : 'shortDate' }}</td>
                            <td ng-if="vm.started !== ''">{{vm.started | date : 'shortTime' }}</td>
                            <td ng-if="vm.started == ''"></td>
                            <td ng-if="vm.started == ''"></td>
                        </tr>
                        <tr>
                            <td>{{"Last modified" | translate}}</td>
                            <td ng-if="vm.lastModified !== ''">{{vm.lastModified | date : 'shortDate' }}</td>
                            <td ng-if="vm.lastModified !== ''">{{vm.lastModified | date : 'shortTime' }}</td>
                            <td ng-if="vm.lastModified == ''"></td>
                            <td ng-if="vm.lastModified == ''"></td>
                        </tr>
                        <tr ng-if="vm.status.value == 'closed'">
                            <td>{{"Closed" | translate}}</td>
                            <td ng-if="vm.closed !== ''">{{vm.closed | date : 'shortDate' }}</td>
                            <td ng-if="vm.closed !== ''">{{vm.closed | date : 'shortTime' }}</td>
                        </tr>
                    </table>
                </div>


                <!-- Time spent -->
                <div class="helpdeskControlColumnBox helpdeskTimeSpend" ng-show="supporterMode()">
                    <div class="helpdeskControlColumnBoxHeading">{{"Time consumption" | translate}}</div>
                    <div class="helpdeskTableDiv">
                        <div class="helpdeskTableDivCell100">
                            <select class="form-control" ng-model="deltaTimeSpent">
                                <option value="0"></option>
                                <option value="5">5 {{"minutes" | translate}}</option>
                                <option value="10">10 {{"minutes" | translate}}</option>
                                <option value="15">15 {{"minutes" | translate}}</option>
                                <option value="30">30 {{"minutes" | translate}}</option>
                                <option value="60">1 {{"hour" | translate}}</option>
                                <option value="120">2 {{"hours" | translate}}</option>
                                <option value="180">3 {{"hours" | translate}}</option>
                                <option value="240">4 {{"hours" | translate}}</option>
                                <option value="300">5 {{"hours" | translate}}</option>
                                <option value="360">6 {{"hours" | translate}}</option>
                                <option value="420">7 {{"hours" | translate}}</option>
                                <option value="480">8 {{"hours" | translate}}</option>
                            </select>
                        </div>
                        <div class="helpdeskTableDivCell">
                            <button type="button" class="btn btn-primary" ng-disabled="!deltaTimeSpent || deltaTimeSpent == '0'" ng-click="updateTimeSpent(deltaTimeSpent);">{{"Save" | translate}}</button>
                        </div>
                    </div>
                    <div class="totalTimeSpent">
                        <div class="totalTimeSpentLabel">{{'Time spent' | translate}}:</div>
                        <div class="totalTimeSpentValue">{{vm.timeSpentFormatted}}</div>
                    </div>
                </div>

            </div>
            <!-- Right column end -->
            <!-- Left column start -->
            <div class="col-xs-12 col-md-pull-4 col-md-8 helpdeskShowTicketLeftSection">
                <div class="helpdeskTitleSection">
                    <div class="form-group">
                        <div ng-if="supporterMode()" style="white-space:nowrap">
                            <span ng-if="!titleEditMode"><label class="user-title">{{vm.title}}</label><a class="helpdeskTicketEditOnOff"><i class="ms-Icon ms-Icon--Edit" ng-click="editTitle(true)"></i></a></span>
                            <div ng-if="titleEditMode">
                                <input type="text" class="form-control" ng-model="vm.title" wizdom365-set-focus="true" />
                                <a class="helpdeskTicketEditOnOff" ng-click="editTitle(false)"><i class="ms-Icon ms-Icon--Edit"></i>&nbsp;{{"Stop editing" | translate}}</a>
                            </div>
                        </div>
                        <div class="normalUserControlText" ng-if="!supporterMode()"><label class="user-title">{{vm.title}}</label></div>
                    </div>
                </div>

                <div class="ticketIdSection">
                    <span class="idText">{{"Ticket #" | translate}}</span><span class="id">{{ticketId}}</span>
                </div>

                <div class="helpdeskControlsSection">
                    <div class="row">
                        <div class="col-lg-12">
                            <label>{{"Main category" | translate}}:</label>
                            <label class="normalUserControlText">{{vm.currentMainCategory.name}}</label>
                        </div>
                        <div class="col-lg-12">
                            <label>{{"Sub category" | translate}}:</label>
                            <label class="normalUserControlText">{{vm.currentSubCategory.name}}</label>
                        </div>
                    </div>
                    <div class="row margin-top-20">
                        <div ng-if="vm.canStart" class="col-lg-12 helpdeskButtonRow text-left">
                            <button type="button" ng-click="startTicket();" class="btn btn-primary">{{'Start' | translate}}</button>
                        </div>
                        <div class="col-xs-12 col-sm-6">
                            <div class="form-group">
                                <label>{{"Status" | translate}}</label>
                                <select class="form-control" ng-options="op.name | translate for op in vm.allStatus" ng-if="supporterMode()" ng-model="vm.status"></select>
                                <div class="normalUserControlText" ng-if="!supporterMode()">{{vm.status.value | translate}}</div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6">
                            <div class="form-group">
                                <label>{{"Priority" | translate}}</label>
                                <select class="form-control" ng-options="op.name | translate for op in vm.allPriorities" ng-if="supporterMode()" ng-model="vm.priority"></select>
                                <div class="normalUserControlText" ng-if="!supporterMode()">{{vm.priority.value | translate}}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="accordion-container">
                    <!-- Description -->
                    <div class="helpdeskDescriptionSection">
                        <div class="section-header">
                            <span class="section-toggler" data-toggle="collapse" data-target="#ticket-description">
                                <i class="ms-Icon ms-Icon--ChevronDown"></i>
                                <i class="ms-Icon ms-Icon--ChevronRight"></i>
                            </span>
                            <label>{{"Description" | translate}}</label>
                        </div>
                        <div id="ticket-description" class="helpdeskTicketPost collapse in">
                            <div class="helpdeskTicketPostTop">
                                <!-- Deliberately using displayName for the person who created the ticket and not the person who asks for solution (the user/owner) -->
                                <i class="ms-Icon ms-Icon--Contact"></i>{{vm.createdBy.displayName}}<i class="ms-Icon ms-Icon--Calendar"></i>{{vm.created | date : 'longDate'}}<i class="ms-Icon ms-Icon--Recent"></i>{{vm.created | date : 'shortTime'}}
                                <span ng-if="supporterMode()">
                                   <a ng-if="!vm.descriptionEditing" class="pull-right helpdeskTicketEditOnOff" ng-click="vm.descriptionEditing = true"><i class="ms-Icon ms-Icon--Edit"></i>{{"Edit" | translate}}</a>
                                   <a ng-if="vm.descriptionEditing" class="pull-right helpdeskTicketEditOnOff" ng-click="vm.descriptionEditing = false"><i class="ms-Icon ms-Icon--Edit"></i>{{"Stop editing" | translate}}</a>
                                </span>
                            </div>
                            <div class="helpdeskTicketPostRow">
                                <div class="helpdeskTicketPost">
                                    <p ng-if="!vm.descriptionEditing" class="fr-view" ng-bind-html="(vm.description | wizdom365TrustHtml)"></p> 
                                    <div ng-if="vm.descriptionEditing">
                                        <textarea class="form-control" ng-model="vm.description" rows="7" placeholder='{{"There is no description for this ticket yet" | translate}}'></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Notification setting -->
                    <div class="helpdeskNotificationSection">
                        <div class="section-header">
                            <span class="section-toggler" data-toggle="collapse" data-target="#notification">
                                <i class="ms-Icon ms-Icon--ChevronDown"></i>
                                <i class="ms-Icon ms-Icon--ChevronRight"></i>
                            </span>
                            <label>{{"Notification" | translate}}</label>
                        </div>
                        <div id="notification" class="form-group collapse in">
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input type="checkbox" class="form-check-input" ng-model="vm.notifyByMail">
                                    <span ng-if="supporterMode()">{{"User receives e-mail on changes" | translate}}</span>
                                    <span ng-if="!supporterMode()">{{"Receive e-mail when the ticket changes status" | translate}}</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Extra metafields -->
                    <div class="helpdeskMetafieldsSection" ng-show="vm.customMetadata.length > 0">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group" ng-show="!vm.currentUserIsSupporter && metadata.value" ng-repeat="metadata in vm.customMetadata">
                                    <label>{{metadata.definition.label| translate}}</label>
                                    <div class="normalUserControlText" ng-show="metadata.definition.type !== 'datetime'">{{metadata.value}}</div>
                                    <div class="normalUserControlText" ng-show="metadata.definition.type == 'datetime'">{{metadata.value | date: 'shortDate'}}</div>
                                </div>
                                <formly-field ng-repeat="metadata in vm.customMetadata"
                                              options="metadata.definition"
                                              form-value="metadata.value"
                                              ng-show="vm.currentUserIsSupporter"
                                              class="formly-field"
                                              form-id="'editTicketForm'"
                                              index="$index">
                                </formly-field>
                            </div>
                        </div>
                    </div>

                    <!-- Solution -->
                    <div class="helpdeskSolutionSection">
                        <div class="section-header">
                            <span ng-class="vm.solutionExpandStateClass1" data-toggle="collapse" data-target="#ticket-solution">
                                <i class="ms-Icon ms-Icon--ChevronDown"></i>
                                <i class="ms-Icon ms-Icon--ChevronRight"></i>
                            </span>
                            <label>{{"Solution" | translate}}</label>
                        </div>
                        <div id="ticket-solution" ng-class="vm.solutionExpandStateClass2">
                            <div class="helpdeskTicketPostTop">
                                <span ng-if="supporterMode()">
                                    <a ng-if="!vm.solutionEditing" class="pull-right helpdeskTicketEditOnOff" ng-click="vm.solutionEditing = true"><i class="ms-Icon ms-Icon--Edit"></i>{{"Edit" | translate}}</a>
                                    <a ng-if="vm.solutionEditing" class="pull-right helpdeskTicketEditOnOff" ng-click="vm.solutionEditing = false"><i class="ms-Icon ms-Icon--Edit"></i> {{"Stop editing" | translate}}</a>
                                </span>
                            </div>
                            <div class="helpdeskTicketPostRow">
                                <div class="helpdeskTicketPost">
                                    <p ng-if="!vm.solutionEditing" class="fr-view" ng-bind-html="(vm.solution | wizdom365TrustHtml)"></p>
                                    <div ng-if="vm.solutionEditing">
                                        <textarea class="form-control" ng-model="vm.solution" rows="7" placeholder='{{"There is no solution for this ticket yet" | translate}}'></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="section-header">
                        <!-- Main buttons -->
                        <div class="helpdeskMainButtons">
                            <div class="helpdeskButtonRow">
                                <div class="text-right">
                                    <button type="button" class="btn btn-primary" ng-disabled="saveTicket.working" ng-click="saveTicket();">{{"Save and close" | translate}}</button>
                                    <input type="button" class="btn btn-default" ng-show="!supporterMode() && vm.status.value === 'ready to close'" value="{{'Close case' | translate}}" ng-click="closeTicket();" />
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- Add comment -->
                    <div class="helpdeskCommentSection">
                        <div class="section-header">
                            <span class="section-toggler" data-toggle="collapse" data-target="#comments-section">
                                <i class="ms-Icon ms-Icon--ChevronDown"></i>
                                <i class="ms-Icon ms-Icon--ChevronRight"></i>
                            </span>
                            <label>{{"Comments" | translate}}</label>
                        </div>
                        <div id="comments-section" class="collapse in">
                            <textarea class="form-control" ng-model="vm.comment" placeholder="{{'Add comment' | translate}}" rows="5"></textarea>
                            <div class="form-group">
                                <div class="form-check text-right" ng-show="supporterMode() && vm.status.value != 'created' && vm.status.value != 'assigned' && vm.status.value != 'closed' && vm.status.value != 'waiting on user'">
                                    <label class="form-check-label">
                                        <input type="checkbox" class="form-check-input" ng-model="vm.setStatusToWaitingForUser">{{"Set status to Waiting for user when saving comment" | translate}}
                                    </label>
                                </div>
                                <div class="helpdeskButtonRow text-right">
                                    <button type="button" class="btn btn-primary margin-right-5" ng-disabled="vm.working|| !vm.comment" ng-click="addComment(false);">{{'Save comment' | translate}}</button>
                                    <button type="button" class="btn btn-default" ng-show="supporterMode()" ng-disabled="vm.working || !vm.comment" ng-click="addComment(true);">{{'Save as internal comment' | translate}}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Post filter tabs -->
                <div ng-if="supporterMode()" class="helpdeskTabContainerInContent">
                    <div class="helpdeskTab" ng-class="!currentFilter || currentFilter == 'conversation'  ? 'helpdeskTabActive' : ''" ng-click="setFeedFilter('conversation');">{{"Comments" | translate}}</div>
                    <div class="helpdeskTab" ng-class="currentFilter == 'all' ? 'helpdeskTabActive' : ''" ng-click="setFeedFilter('all');">{{"All updates" | translate}}</div>
                </div>

                <!-- Posts -->
                <div class="helpdeskPostsSection">
                    <div class="helpdeskTicketPost" ng-repeat="item in vm.activities | filter: applyFeedFilter"
                         ng-class="{
                         'helpdeskTicketPostFromSupporter' : item.eventType === 'CommentAdded' && item.addedByUser === false,
                         'helpdeskTicketPostFromUser' : item.eventType === 'CommentAdded' && item.addedByUser === true,
                         'helpdeskTicketPostInternal' : item.eventType == 'InternalCommentAdded',
                         'helpdeskTicketPostCreated' : item.eventType == 'TicketCreated',
                         'helpdeskTicketUpdated' : item.eventType == 'TicketUpdated'}">
                        <div class="helpdeskTicketPostTop">
                            <i class="ms-Icon ms-Icon--Contact"></i>{{item.createdBy.displayName}}<i class="ms-Icon ms-Icon--Calendar"></i>{{item.created | date : 'longDate' }}<i class="ms-Icon ms-Icon--Recent"></i>{{item.created | date:'shortTime' }}
                        </div>
                        <div class="helpdeskTicketPostRow">
                            <div ng-switch="item.eventType">
                                <div ng-switch-when="CommentAdded">
                                    <div class="helpdeskTicketPostLeft">
                                        <div wizdom365-presence-picture="" class="helpdeskPersonImage" size="AVATAR" accountname="item.createdBy.loginName" name="item.createdBy.displayName"></div>
                                    </div>
                                    <div class="helpdeskTicketPostRight">{{item.text}}</div>
                                </div>
                                <div ng-switch-when="InternalCommentAdded">
                                    <div class="helpdeskTicketPostLeft">
                                        <div wizdom365-presence-picture="" class="helpdeskPersonImage" size="AVATAR" accountname="item.createdBy.loginName" name="item.createdBy.displayName"></div>
                                    </div>
                                    <div class="helpdeskTicketPostRight">{{item.text}}</div>
                                </div>
                                <div ng-switch-when="TicketUpdated">
                                    <div class="helpdeskTicketPostLeft"></div>
                                    <div class="helpdeskTicketPostRight">
                                        <div ng-if="item.title">
                                            {{'Title' | translate}} {{"changed to" | translate}}: {{item.title}}
                                        </div>
                                        <div ng-repeat="(key,value) in item.metadata">
                                            {{key | translate}} {{"changed to" | translate}}: {{translateActivityValue(key, value)}}
                                        </div>
                                    </div>
                                </div>
                                <div ng-switch-when="AddTimeSpent">
                                    <div class="helpdeskTicketPostLeft"></div>
                                    <div class="helpdeskTicketPostRight">{{"Registration of time" | translate}}: {{item.timeSpent}} {{"minutes" | translate}}</div>
                                </div>
                                <div ng-switch-when="StatusChanged">
                                    <div class="helpdeskTicketPostLeft"></div>
                                    <div class="helpdeskTicketPostRight">{{"State changed to" | translate}}: {{item.status}}</div>
                                </div>
                                <div ng-switch-when="SupporterAssigned">
                                    <div class="helpdeskTicketPostLeft"></div>
                                    <div class="helpdeskTicketPostRight">{{"Supporter assigned" | translate}}: {{item.assigned.displayName}}</div>
                                </div>
                                <div ng-switch-when="TicketCreated">
                                    <div class="helpdeskTicketPostLeft"></div>
                                    <div class="helpdeskTicketPostRight">{{"Ticket created" | translate}}: {{item.title}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Left column end -->
        </div>
    </div>
</div>
