public/templates/main/apps/chat/views/chatWebsites/edit/view.html/view.html

   1 <div id="chat-chatWebsite" class="page-layout simple tabbed" layout="column">
   2   <!-- HEADER -->
   3   <div class="header md-accent-bg" layout="row" layout-align="start center">
   4     <div class="white-fg" layout="row" layout-align="start center" flex>
   5       <md-button
   6         class="goto-chatWebsites-button md-icon-button"
   7         aria-label="Go to chatWebsites"
   8         ng-click="vm.gotoChatWebsites()"
   9         translate
  10         translate-attr-aria-label="CHAT.GO_TO_CHATWEBSITES"
  11       >
  12         <md-icon md-font-icon="icon-arrow-left"></md-icon>
  13       </md-button>
  14
  15       <div layout="row" layout-align="start center">
  16         <div class="chatWebsite-image" hide-xs>
  17           <img ng-src="assets/images/business/chatWebsites.jpg" />
  18         </div>
  19
  20         <div layout="column" layout-align="start start">
  21           <div class="h2">
  22             #{{vm.chatWebsite.id}}
  23             <span ng-if="vm.chatWebsite.name">{{vm.chatWebsite.name}}</span>
  24           </div>
  25           <div class="subtitle secondary-text">
  26             <span translate="CHAT.CREATED_AT"></span>
  27             <span>{{vm.chatWebsite.createdAt | date:'medium'}}</span>
  28           </div>
  29         </div>
  30       </div>
  31     </div>
  32
  33     <div ng-cloak>
  34       <md-button
  35         ng-click="vm.agentadddialog(vm.chatWebsite, $event)"
  36         class="md-fab md-warn md-icon-button"
  37         aria-label="agentadd"
  38       >
  39         <md-tooltip
  40           ><span translate="CHAT.AGENTADD_CHATWEBSITE"></span
  41         ></md-tooltip>
  42         <md-icon md-font-icon="icon-account-multiple-plus"></md-icon>
  43       </md-button>
  44     </div>
  45     <div>
  46       <md-button
  47         type="submit"
  48         ng-click="vm.saveChatWebsite()"
  49         ng-if="vm.crudPermissions.canEdit"
  50         class="send-button md-accent md-raised"
  51         ng-disabled="(generalForm.$invalid) || (notificationForm.$invalid) || (transferForm.$invalid) || (scriptForm.$invalid) || (intervalForm.$invalid) || (dispositionForm.$invalid) || (appearanceForm.$invalid) || (onlinestatusForm.$invalid) || (offlinestatusForm.$invalid) || (closingformForm.$invalid) || (unmanagedstatusForm.$invalid) || (interactionForm.$invalid) || (whitelabelForm.$invalid) || (logoForm.$invalid) || (agentAvatarForm.$invalid) || (customerAvatarForm.$invalid) || (systemAvatarForm.$invalid) || (chatFormOnlineForm.$invalid) || (chatFormOfflineForm.$invalid) || (proactiveForm.$invalid) || (chatDispositionsForm.$invalid) || (chatCannedAnswersForm.$invalid) || (vidaooForm.$invalid) || (actionsForm.$invalid) || (interactionsForm.$invalid) || (offlineMessagesForm.$invalid)"
  52         translate="CHAT.SAVE"
  53         translate-attr-aria-label="CHAT.SAVE"
  54       >
  55         SAVE
  56       </md-button>
  57     </div>
  58   </div>
  59   <!-- / HEADER -->
  60
  61   <!-- CONTENT -->
  62   <div class="content">
  63     <md-tabs
  64       md-selected="vm.selectedTab"
  65       md-stretch-tabs="always"
  66       flex
  67       layout-fill
  68       md-dynamic-height
  69     >
  70       <md-tab>
  71         <md-tab-label>
  72           <span translate="CHAT.SETTINGS">SETTINGS</span>
  73         </md-tab-label>
  74         <md-tab-body>
  75           <div
  76             class="chatWebsite-detail-form-container general md-background-bg md-whiteframe-1dp"
  77           >
  78             <div class="pb-16" layout="row" layout-align="start center">
  79               <div class="h2 secondary-text" translate="CHAT.GENERAL">
  80                 GENERAL
  81               </div>
  82             </div>
  83             <form name="generalForm" novalidate>
  84               <md-input-container class="md-block">
  85                 <label translate="CHAT.NAME">Name</label>
  86                 <input
  87                   type="text"
  88                   name="name"
  89                   ng-model="vm.chatWebsite.name"
  90                   ng-required="true"
  91                   autofocus
  92                   disabled
  93                 />
  94
  95                 <div
  96                   ng-messages="generalForm['name'].$error"
  97                   ng-show="generalForm['name'].$touched"
  98                   role="alert"
  99                 >
 100                   <div ng-message="required">
 101                     <span translate="CHAT.ERRORS.NAME_REQUIRED"
 102                       >Name field is required</span
 103                     >
 104                   </div>
 105                 </div>
 106               </md-input-container>
 107               <md-input-container class="md-block">
 108                 <label translate="CHAT.KEY">key</label>
 109                 <input
 110                   type="text"
 111                   name="key"
 112                   ng-model="vm.chatWebsite.key"
 113                   md-maxlength="5"
 114                   ng-required="true"
 115                   ng-disabled="!vm.crudPermissions.canEdit"
 116                 />
 117
 118                 <div
 119                   ng-messages="generalForm['key'].$error"
 120                   ng-show="generalForm['key'].$touched"
 121                   role="alert"
 122                 >
 123                   <div ng-message="required">
 124                     <span translate="CHAT.ERRORS.KEY_REQUIRED"
 125                       >key field is required</span
 126                     >
 127                   </div>
 128                   <div ng-message="md-maxlength">
 129                     <span
 130                       translate="CHAT.ERRORS.KEY_MAX_LENGTH"
 131                       translate-values="{max: 5}"
 132                       >key must have a maximum length equal to 5</span
 133                     >
 134                   </div>
 135                 </div>
 136               </md-input-container>
 137               <md-input-container class="md-block">
 138                 <label translate="CHAT.MOTIONADDRESS">MotionAddress</label>
 139                 <input
 140                   type="url"
 141                   name="address"
 142                   ng-model="vm.chatWebsite.address"
 143                   md-maxlength="255"
 144                   ng-required="true"
 145                   ng-disabled="!vm.crudPermissions.canEdit"
 146                 />
 147
 148                 <div
 149                   ng-messages="generalForm['address'].$error"
 150                   ng-show="generalForm['address'].$touched"
 151                   role="alert"
 152                 >
 153                   <div ng-message="required">
 154                     <span translate="CHAT.ERRORS.MOTIONADDRESS_REQUIRED"
 155                       >MotionAddress field is required</span
 156                     >
 157                   </div>
 158                   <div ng-message="url">
 159                     <span translate="CHAT.ERRORS.MOTIONADDRESS_MUST_VALID_URL"
 160                       >MotionAddress must be a valid url
 161                       http://www.xcally.com</span
 162                     >
 163                   </div>
 164                   <div ng-message="md-maxlength">
 165                     <span
 166                       translate="CHAT.ERRORS.MOTIONADDRESS_MAX_LENGTH"
 167                       translate-values="{max: 255}"
 168                       >MotionAddress must have a maximum length equal to
 169                       255</span
 170                     >
 171                   </div>
 172                 </div>
 173               </md-input-container>
 174               <md-input-container class="md-block">
 175                 <label translate="CHAT.LIST">List</label>
 176                 <md-select
 177                   name="ListId"
 178                   ng-model="vm.chatWebsite.ListId"
 179                   required
 180                   ng-disabled="!vm.crudPermissions.canEdit"
 181                 >
 182                   <md-option
 183                     ng-value="ListId.id"
 184                     ng-repeat="ListId in vm.lists"
 185                     ng-disabled="ListId.canSelect === false"
 186                     >{{ ListId.name }}</md-option
 187                   >
 188                 </md-select>
 189                 <div class="hint"><span translate="CHAT.HELP.LIST"></span></div>
 190                 <div
 191                   ng-messages="generalForm['ListId'].$error"
 192                   ng-show="generalForm['ListId'].$touched"
 193                   role="alert"
 194                 >
 195                   <div ng-message="required">
 196                     <span translate="CHAT.ERRORS.LIST_REQUIRED"
 197                       >List field is required</span
 198                     >
 199                   </div>
 200                 </div>
 201               </md-input-container>
 202               <md-input-container
 203                 ng-if="vm.chatWebsite.fidelity"
 204                 class="md-block"
 205               >
 206                 <label translate="CHAT.TIMEOUT">Timeout</label>
 207                 <input
 208                   type="number"
 209                   name="timeout"
 210                   ng-model="vm.chatWebsite.timeout"
 211                   ng-required="true"
 212                   ng-disabled="!vm.crudPermissions.canEdit"
 213                 />
 214
 215                 <div
 216                   ng-messages="generalForm['timeout'].$error"
 217                   ng-show="generalForm['timeout'].$touched"
 218                   role="alert"
 219                 >
 220                   <div ng-message="required">
 221                     <span translate="CHAT.ERRORS.TIMEOUT_REQUIRED"
 222                       >Timeout field is required</span
 223                     >
 224                   </div>
 225                 </div>
 226               </md-input-container>
 227               <md-input-container class="md-block">
 228                 <label translate="CHAT.WAITFORTHEASSIGNEDAGENT"
 229                   >WaitForTheAssignedAgent</label
 230                 >
 231                 <input
 232                   type="number"
 233                   name="waitForTheAssignedAgent"
 234                   ng-model="vm.chatWebsite.waitForTheAssignedAgent"
 235                   min="1"
 236                   max="2147483"
 237                   value="10"
 238                   ng-required="true"
 239                   ng-disabled="!vm.crudPermissions.canEdit"
 240                 />
 241
 242                 <div
 243                   ng-messages="generalForm['waitForTheAssignedAgent'].$error"
 244                   ng-show="generalForm['waitForTheAssignedAgent'].$touched"
 245                   role="alert"
 246                 >
 247                   <div ng-message="required">
 248                     <span
 249                       translate="CHAT.ERRORS.WAITFORTHEASSIGNEDAGENT_REQUIRED"
 250                       >WaitForTheAssignedAgent field is required</span
 251                     >
 252                   </div>
 253                   <div ng-message="min">
 254                     <span
 255                       translate="CHAT.ERRORS.WAITFORTHEASSIGNEDAGENT_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
 256                       >WaitForTheAssignedAgent must be a valid greater or equal
 257                       than</span
 258                     >
 259                     <span>1</span>
 260                   </div>
 261                   <div ng-message="max">
 262                     <span
 263                       translate="CHAT.ERRORS.WAITFORTHEASSIGNEDAGENT_MUST_BE_LESS_THAN_OR_EQUAL_TO"
 264                       >WaitForTheAssignedAgent must be a valid greater or equal
 265                       than</span
 266                     >
 267                     <span>2147483</span>
 268                   </div>
 269                 </div>
 270               </md-input-container>
 271               <md-input-container class="md-block">
 272                 <label translate="CHAT.DESCRIPTION">Description</label>
 273                 <input
 274                   type="text"
 275                   name="description"
 276                   ng-model="vm.chatWebsite.description"
 277                   ng-disabled="!vm.crudPermissions.canEdit"
 278                 />
 279
 280                 <div
 281                   ng-messages="generalForm['description'].$error"
 282                   ng-show="generalForm['description'].$touched"
 283                   role="alert"
 284                 >
 285                   <div ng-message="required">
 286                     <span translate="CHAT.ERRORS.DESCRIPTION_REQUIRED"
 287                       >Description field is required</span
 288                     >
 289                   </div>
 290                 </div>
 291               </md-input-container>
 292             </form>
 293           </div>
 294           <div
 295             class="chatWebsite-detail-form-container notification md-background-bg md-whiteframe-1dp"
 296           >
 297             <div class="pb-16" layout="row" layout-align="start center">
 298               <div class="h2 secondary-text" translate="CHAT.NOTIFICATION">
 299                 NOTIFICATION
 300               </div>
 301             </div>
 302             <form name="notificationForm" novalidate>
 303               <md-input-container class="md-block">
 304                 <md-switch
 305                   ng-model="vm.chatWebsite.notificationSound"
 306                   aria-label="notificationSound"
 307                   ng-disabled="!vm.crudPermissions.canEdit"
 308                   ><span translate="CHAT.NOTIFICATIONSOUND"
 309                     >notificationSound</span
 310                   ></md-switch
 311                 >
 312               </md-input-container>
 313               <md-input-container class="md-block">
 314                 <md-switch
 315                   ng-model="vm.chatWebsite.notificationShake"
 316                   aria-label="notificationShake"
 317                   ng-disabled="!vm.crudPermissions.canEdit"
 318                   ><span translate="CHAT.NOTIFICATIONSHAKE"
 319                     >notificationShake</span
 320                   ></md-switch
 321                 >
 322               </md-input-container>
 323               <div class="md-block">
 324                 <label
 325                   class="md-caption grey-fg"
 326                   translate="CHAT.NOTIFICATIONTEMPLATE"
 327                   >notificationTemplate</label
 328                 >
 329                 <textarea
 330                   aria-label="notificationTemplate notificationTemplate"
 331                   ckeditor="{ skin: 'office2013', language: 'en', allowedContent: true, extraPlugins: 'font,colorbutton,autoembed,autocorrect,googlethisterm,pastebase64', toolbarGroups: [{ name: 'styles', groups: ['styles'] }, { name: 'clipboard', groups: ['undo'] }, { name: 'colors', groups: ['colors'] }, { name: 'basicstyles', groups: ['basicstyles'] }, { name: 'paragraph', groups: ['list', 'indent', 'align'] }, { name: 'mode' }], autocorrect_enabled: true, disableNativeSpellChecker: false, fontSize_sizes: '8/8pt;9/9pt;10/10pt;11/11pt;12/12pt;14/14pt;16/16pt;18/18pt;20/20pt;22/22pt;24/24pt;26/26pt;28/28pt;36/36pt;48/48pt;72/72pt',  removePlugins: 'magicline' }"
 332                   ng-model="vm.chatWebsite.notificationTemplate"
 333                 ></textarea>
 334               </div>
 335             </form>
 336           </div>
 337           <div
 338             class="chatWebsite-detail-form-container transfer md-background-bg md-whiteframe-1dp"
 339           >
 340             <div class="pb-16" layout="row" layout-align="start center">
 341               <div class="h2 secondary-text" translate="CHAT.TRANSFER">
 342                 TRANSFER
 343               </div>
 344             </div>
 345             <form name="transferForm" novalidate>
 346               <md-input-container class="md-block">
 347                 <md-switch
 348                   ng-model="vm.chatWebsite.queueTransfer"
 349                   aria-label="queueTransfer"
 350                   ng-disabled="!vm.crudPermissions.canEdit"
 351                   ><span translate="CHAT.QUEUETRANSFER"
 352                     >queueTransfer</span
 353                   ></md-switch
 354                 >
 355               </md-input-container>
 356               <md-input-container
 357                 ng-if="vm.chatWebsite.queueTransfer == true"
 358                 class="md-block"
 359               >
 360                 <label translate="CHAT.QUEUETRANSFERTIMEOUT"
 361                   >queueTransferTimeout</label
 362                 >
 363                 <input
 364                   type="number"
 365                   name="queueTransferTimeout"
 366                   ng-model="vm.chatWebsite.queueTransferTimeout"
 367                   min="1"
 368                   max="2147483"
 369                   value="300"
 370                   ng-required="true"
 371                   ng-disabled="!vm.crudPermissions.canEdit"
 372                 />
 373
 374                 <div
 375                   ng-messages="transferForm['queueTransferTimeout'].$error"
 376                   ng-show="transferForm['queueTransferTimeout'].$touched"
 377                   role="alert"
 378                 >
 379                   <div ng-message="required">
 380                     <span translate="CHAT.ERRORS.QUEUETRANSFERTIMEOUT_REQUIRED"
 381                       >queueTransferTimeout field is required</span
 382                     >
 383                   </div>
 384                   <div ng-message="min">
 385                     <span
 386                       translate="CHAT.ERRORS.QUEUETRANSFERTIMEOUT_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
 387                       >queueTransferTimeout must be a valid greater or equal
 388                       than</span
 389                     >
 390                     <span>1</span>
 391                   </div>
 392                   <div ng-message="max">
 393                     <span
 394                       translate="CHAT.ERRORS.QUEUETRANSFERTIMEOUT_MUST_BE_LESS_THAN_OR_EQUAL_TO"
 395                       >queueTransferTimeout must be a valid greater or equal
 396                       than</span
 397                     >
 398                     <span>2147483</span>
 399                   </div>
 400                 </div>
 401               </md-input-container>
 402               <md-input-container class="md-block">
 403                 <md-switch
 404                   ng-model="vm.chatWebsite.agentTransfer"
 405                   aria-label="agentTransfer"
 406                   ng-disabled="!vm.crudPermissions.canEdit"
 407                   ><span translate="CHAT.AGENTTRANSFER"
 408                     >agentTransfer</span
 409                   ></md-switch
 410                 >
 411               </md-input-container>
 412               <md-input-container
 413                 ng-if="vm.chatWebsite.agentTransfer == true"
 414                 class="md-block"
 415               >
 416                 <label translate="CHAT.AGENTTRANSFERTIMEOUT"
 417                   >agentTransferTimeout</label
 418                 >
 419                 <input
 420                   type="number"
 421                   name="agentTransferTimeout"
 422                   ng-model="vm.chatWebsite.agentTransferTimeout"
 423                   min="1"
 424                   max="2147483"
 425                   value="300"
 426                   ng-required="true"
 427                   ng-disabled="!vm.crudPermissions.canEdit"
 428                 />
 429
 430                 <div
 431                   ng-messages="transferForm['agentTransferTimeout'].$error"
 432                   ng-show="transferForm['agentTransferTimeout'].$touched"
 433                   role="alert"
 434                 >
 435                   <div ng-message="required">
 436                     <span translate="CHAT.ERRORS.AGENTTRANSFERTIMEOUT_REQUIRED"
 437                       >agentTransferTimeout field is required</span
 438                     >
 439                   </div>
 440                   <div ng-message="min">
 441                     <span
 442                       translate="CHAT.ERRORS.AGENTTRANSFERTIMEOUT_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
 443                       >agentTransferTimeout must be a valid greater or equal
 444                       than</span
 445                     >
 446                     <span>1</span>
 447                   </div>
 448                   <div ng-message="max">
 449                     <span
 450                       translate="CHAT.ERRORS.AGENTTRANSFERTIMEOUT_MUST_BE_LESS_THAN_OR_EQUAL_TO"
 451                       >agentTransferTimeout must be a valid greater or equal
 452                       than</span
 453                     >
 454                     <span>2147483</span>
 455                   </div>
 456                 </div>
 457               </md-input-container>
 458             </form>
 459           </div>
 460         </md-tab-body>
 461       </md-tab>
 462       <md-tab>
 463         <md-tab-label>
 464           <span translate="CHAT.ADVANCED">ADVANCED</span>
 465         </md-tab-label>
 466         <md-tab-body>
 467           <div
 468             class="chatWebsite-detail-form-container script md-background-bg md-whiteframe-1dp"
 469           >
 470             <div
 471               ng-controller="ChatWebsiteScriptController as vm_ac"
 472               ng-init="vm_ac.init(vm.chatWebsite)"
 473               class="content"
 474               md-background-bg
 475             >
 476               <div class="pb-16" layout="row" layout-align="start center">
 477                 <div class="h2 secondary-text" translate="CHAT.SCRIPT">
 478                   SCRIPT
 479                 </div>
 480               </div>
 481
 482               <form name="scriptForm" flex="100" novalidate>
 483                 <md-input-container class="md-block">
 484                   <label translate="CHAT.TOKEN">Token</label>
 485                   <input
 486                     type="text"
 487                     name="token"
 488                     ng-model="vm_ac.chatWebsite.token"
 489                     autofocus
 490                     ng-disabled="true"
 491                   />
 492                 </md-input-container>
 493                 <md-input-container class="md-block">
 494                   <label translate="CHAT.MOTIONPROXY">MotionProxy</label>
 495                   <input
 496                     type="url"
 497                     name="remote"
 498                     ng-model="vm_ac.chatWebsite.remote"
 499                     required
 500                   />
 501                   <div class="hint">
 502                     <span translate="CHAT.HELP.MOTIONPROXY"></span>
 503                   </div>
 504                   <div
 505                     ng-messages="scriptForm['remote'].$error"
 506                     ng-show="scriptForm['remote'].$touched"
 507                     role="alert"
 508                   >
 509                     <div ng-message="required">
 510                       <span translate="CHAT.ERRORS.MOTIONPROXY_REQUIRED"
 511                         >Motion Proxy field is required</span
 512                       >
 513                     </div>
 514                     <div ng-message="url">
 515                       <span translate="CHAT.ERRORS.MOTIONPROXY_MUST_VALID_URL"
 516                         >Motion Proxy must be a valid url e.g.:
 517                         http://www.xcally.com</span
 518                       >
 519                     </div>
 520                   </div>
 521                 </md-input-container>
 522                 <md-input-container class="md-block">
 523                   <label translate="CHAT.WEBSITESCRIPT">WebsiteScript</label>
 524                   <div>
 525                     <pre style="font-size: 13px">
 526             {{vm_ac.start}} {{vm_ac.script}} {{vm_ac.end}}
 527           </pre
 528                     >
 529                   </div>
 530                   <div class="hint">
 531                     <span translate="CHAT.HELP.COPYSCRIPTTOCLIPBOARD"></span>
 532                   </div>
 533                 </md-input-container>
 534               </form>
 535             </div>
 536           </div>
 537           <div
 538             class="chatWebsite-detail-form-container interval md-background-bg md-whiteframe-1dp"
 539           >
 540             <div class="pb-16" layout="row" layout-align="start center">
 541               <div class="h2 secondary-text" translate="CHAT.INTERVAL">
 542                 INTERVAL
 543               </div>
 544             </div>
 545             <form name="intervalForm" novalidate>
 546               <md-input-container class="md-block">
 547                 <label translate="CHAT.INTERVAL">Interval</label>
 548                 <md-select
 549                   name="IntervalId"
 550                   ng-model="vm.chatWebsite.IntervalId"
 551                   autofocus
 552                   ng-disabled="!vm.crudPermissions.canEdit"
 553                 >
 554                   <md-option ng-value="null">Always</md-option>
 555                   <md-option
 556                     ng-value="IntervalId.id"
 557                     ng-repeat="IntervalId in vm.interval"
 558                     ng-disabled="IntervalId.canSelect === false"
 559                     >{{ IntervalId.name }}</md-option
 560                   >
 561                 </md-select>
 562                 <div
 563                   ng-messages="intervalForm['IntervalId'].$error"
 564                   ng-show="intervalForm['IntervalId'].$touched"
 565                   role="alert"
 566                 >
 567                   <div ng-message="required">
 568                     <span translate="CHAT.ERRORS.INTERVAL_REQUIRED"
 569                       >Interval field is required</span
 570                     >
 571                   </div>
 572                 </div>
 573               </md-input-container>
 574               <md-input-container class="md-block">
 575                 <label translate="CHAT.TIMEZONE">Timezone</label>
 576                 <ms-timezone
 577                   name="timezone"
 578                   ng-model="vm.chatWebsite.timezone"
 579                   ng-disabled="!vm.crudPermissions.canEdit"
 580                 ></ms-timezone>
 581                 <div class="hint">
 582                   <span translate="CHAT.HELP.TIMEZONE"></span>
 583                 </div>
 584                 <div
 585                   ng-messages="intervalForm['timezone'].$error"
 586                   ng-show="intervalForm[timezone].$touched"
 587                   role="alert"
 588                 >
 589                   <div ng-message="required">
 590                     <span translate="CHAT.ERRORS.TIMEZONE_REQUIRED"
 591                       >Timezone field is required</span
 592                     >
 593                   </div>
 594                 </div>
 595               </md-input-container>
 596             </form>
 597           </div>
 598           <div
 599             class="chatWebsite-detail-form-container disposition md-background-bg md-whiteframe-1dp"
 600           >
 601             <div class="pb-16" layout="row" layout-align="start center">
 602               <div class="h2 secondary-text" translate="CHAT.DISPOSITION">
 603                 DISPOSITION
 604               </div>
 605             </div>
 606             <form name="dispositionForm" novalidate>
 607               <md-input-container class="md-block">
 608                 <md-switch
 609                   ng-model="vm.chatWebsite.mandatoryDisposition"
 610                   aria-label="MandatoryDisposition"
 611                   ng-disabled="!vm.crudPermissions.canEdit"
 612                   ><span translate="CHAT.MANDATORYDISPOSITION"
 613                     >MandatoryDisposition</span
 614                   ></md-switch
 615                 >
 616               </md-input-container>
 617               <md-input-container
 618                 ng-if="vm.chatWebsite.mandatoryDisposition"
 619                 class="md-block"
 620               >
 621                 <label translate="CHAT.MANDATORYDISPOSITIONPAUSEID"
 622                   >MandatoryDispositionPauseId</label
 623                 >
 624                 <md-select
 625                   name="mandatoryDispositionPauseId"
 626                   ng-model="vm.chatWebsite.mandatoryDispositionPauseId"
 627                   required
 628                   ng-disabled="!vm.crudPermissions.canEdit"
 629                 >
 630                   <md-option
 631                     ng-value="mandatoryDispositionPauseId.id"
 632                     ng-repeat="mandatoryDispositionPauseId in vm.pauses"
 633                     ng-disabled="mandatoryDispositionPauseId.canSelect === false"
 634                     >{{ mandatoryDispositionPauseId.name }}</md-option
 635                   >
 636                 </md-select>
 637                 <div class="hint">
 638                   <span
 639                     translate="CHAT.HELP.MANDATORYDISPOSITIONPAUSEID"
 640                   ></span>
 641                 </div>
 642                 <div
 643                   ng-messages="dispositionForm['mandatoryDispositionPauseId'].$error"
 644                   ng-show="dispositionForm['mandatoryDispositionPauseId'].$touched"
 645                   role="alert"
 646                 >
 647                   <div ng-message="required">
 648                     <span
 649                       translate="CHAT.ERRORS.MANDATORYDISPOSITIONPAUSEID_REQUIRED"
 650                       >MandatoryDispositionPauseId field is required</span
 651                     >
 652                   </div>
 653                 </div>
 654               </md-input-container>
 655             </form>
 656           </div>
 657         </md-tab-body>
 658       </md-tab>
 659       <md-tab>
 660         <md-tab-label>
 661           <span translate="CHAT.SNIPPET">SNIPPET</span>
 662         </md-tab-label>
 663         <md-tab-body>
 664           <div
 665             class="chatWebsite-detail-form-container appearance md-background-bg md-whiteframe-1dp"
 666           >
 667             <div class="pb-16" layout="row" layout-align="start center">
 668               <div class="h2 secondary-text" translate="CHAT.APPEARANCE">
 669                 APPEARANCE
 670               </div>
 671             </div>
 672             <form name="appearanceForm" novalidate>
 673               <div
 674                 flex
 675                 md-color-picker
 676                 ng-model="vm.chatWebsite.color"
 677                 label="{{'CHAT.MAINCOLOR' | translate}}"
 678                 md-color-hex="true"
 679                 md-color-rgb="false"
 680                 md-color-hsl="false"
 681                 md-color-history="false"
 682                 md-color-material-palette="false"
 683                 md-color-alpha-channel="false"
 684                 open-on-input="true"
 685               ></div>
 686               <div
 687                 flex
 688                 md-color-picker
 689                 ng-model="vm.chatWebsite.color_button"
 690                 label="{{'CHAT.BUTTONCOLOR' | translate}}"
 691                 md-color-hex="true"
 692                 md-color-rgb="false"
 693                 md-color-hsl="false"
 694                 md-color-history="false"
 695                 md-color-material-palette="false"
 696                 md-color-alpha-channel="false"
 697                 open-on-input="true"
 698               ></div>
 699               <div
 700                 flex
 701                 md-color-picker
 702                 ng-model="vm.chatWebsite.textColor"
 703                 label="{{'CHAT.TEXTCOLOR' | translate}}"
 704                 md-color-hex="true"
 705                 md-color-rgb="false"
 706                 md-color-hsl="false"
 707                 md-color-history="false"
 708                 md-color-material-palette="false"
 709                 md-color-alpha-channel="false"
 710                 open-on-input="true"
 711               ></div>
 712               <div
 713                 flex
 714                 md-color-picker
 715                 ng-model="vm.chatWebsite.backgroundColor"
 716                 label="{{'CHAT.BACKGROUNDCOLOR' | translate}}"
 717                 md-color-hex="true"
 718                 md-color-rgb="false"
 719                 md-color-hsl="false"
 720                 md-color-history="false"
 721                 md-color-material-palette="false"
 722                 md-color-alpha-channel="false"
 723                 open-on-input="true"
 724               ></div>
 725               <md-input-container class="md-block">
 726                 <label translate="CHAT.FONTSIZE">fontSize</label>
 727                 <input
 728                   type="number"
 729                   name="fontSize"
 730                   ng-model="vm.chatWebsite.fontSize"
 731                   min="0"
 732                   ng-required="true"
 733                   ng-disabled="!vm.crudPermissions.canEdit"
 734                 />
 735
 736                 <div
 737                   ng-messages="appearanceForm['fontSize'].$error"
 738                   ng-show="appearanceForm['fontSize'].$touched"
 739                   role="alert"
 740                 >
 741                   <div ng-message="required">
 742                     <span translate="CHAT.ERRORS.FONTSIZE_REQUIRED"
 743                       >fontSize field is required</span
 744                     >
 745                   </div>
 746                   <div ng-message="min">
 747                     <span
 748                       translate="CHAT.ERRORS.FONTSIZE_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
 749                       >fontSize must be a valid greater or equal than</span
 750                     >
 751                     <span>0</span>
 752                   </div>
 753                 </div>
 754               </md-input-container>
 755               <md-input-container class="md-block">
 756                 <label translate="CHAT.HEADERSHAPE">headershape</label>
 757                 <md-select
 758                   name="header_shape"
 759                   ng-model="vm.chatWebsite.header_shape"
 760                   ng-disabled="!vm.crudPermissions.canEdit"
 761                 >
 762                   <md-option ng-value="'rounded'">
 763                     {{ 'CHAT.ROUNDED' | translate }}
 764                   </md-option>
 765
 766                   <md-option ng-value="'squared'">
 767                     {{ 'CHAT.SQUARED' | translate }}
 768                   </md-option>
 769                 </md-select>
 770                 <div
 771                   ng-messages="appearanceForm['header_shape'].$error"
 772                   ng-show="appearanceForm['header_shape'].$touched"
 773                   role="alert"
 774                 >
 775                   <div ng-message="required">
 776                     <span translate="CHAT.ERRORS.HEADERSHAPE_REQUIRED"
 777                       >headershape field is required</span
 778                     >
 779                   </div>
 780                 </div>
 781               </md-input-container>
 782               <md-input-container class="md-block">
 783                 <md-switch
 784                   ng-model="vm.chatWebsite.showAgentAvatar"
 785                   aria-label="ShowAgentAvatar"
 786                   ng-disabled="!vm.crudPermissions.canEdit"
 787                   ><span translate="CHAT.SHOWAGENTAVATAR"
 788                     >ShowAgentAvatar</span
 789                   ></md-switch
 790                 >
 791               </md-input-container>
 792               <md-input-container class="md-block">
 793                 <md-switch
 794                   ng-model="vm.chatWebsite.showCustomerAvatar"
 795                   aria-label="showCustomerAvatar"
 796                   ng-disabled="!vm.crudPermissions.canEdit"
 797                   ><span translate="CHAT.SHOWCUSTOMERAVATAR"
 798                     >showCustomerAvatar</span
 799                   ></md-switch
 800                 >
 801               </md-input-container>
 802               <md-input-container class="md-block">
 803                 <label translate="CHAT.SNIPPETSWIPEOUT">snippetSwipeOut</label>
 804                 <md-select
 805                   name="alignment"
 806                   ng-model="vm.chatWebsite.alignment"
 807                   ng-disabled="!vm.crudPermissions.canEdit"
 808                 >
 809                   <md-option ng-value="'bottom_right'">
 810                     {{ 'CHAT.BOTTOM_RIGHT' | translate }}
 811                   </md-option>
 812
 813                   <md-option ng-value="'right'">
 814                     {{ 'CHAT.RIGHT' | translate }}
 815                   </md-option>
 816
 817                   <md-option ng-value="'left'">
 818                     {{ 'CHAT.LEFT' | translate }}
 819                   </md-option>
 820                 </md-select>
 821                 <div
 822                   ng-messages="appearanceForm['alignment'].$error"
 823                   ng-show="appearanceForm['alignment'].$touched"
 824                   role="alert"
 825                 >
 826                   <div ng-message="required">
 827                     <span translate="CHAT.ERRORS.SNIPPETSWIPEOUT_REQUIRED"
 828                       >snippetSwipeOut field is required</span
 829                     >
 830                   </div>
 831                 </div>
 832               </md-input-container>
 833               <md-input-container
 834                 ng-if="vm.chatWebsite.alignment !== 'bottom_right'"
 835                 class="md-block"
 836               >
 837                 <label translate="CHAT.VERTICALPOSITION"
 838                   >verticalPosition</label
 839                 >
 840                 <input
 841                   type="number"
 842                   name="verticalAlignment"
 843                   ng-model="vm.chatWebsite.verticalAlignment"
 844                   min="0"
 845                   max="100"
 846                   value="30"
 847                   ng-required="true"
 848                   ng-disabled="!vm.crudPermissions.canEdit"
 849                 />
 850
 851                 <div class="hint">
 852                   <span translate="CHAT.HELP.VERTICALPOSITION"></span>
 853                 </div>
 854                 <div
 855                   ng-messages="appearanceForm['verticalAlignment'].$error"
 856                   ng-show="appearanceForm['verticalAlignment'].$touched"
 857                   role="alert"
 858                 >
 859                   <div ng-message="required">
 860                     <span translate="CHAT.ERRORS.VERTICALPOSITION_REQUIRED"
 861                       >verticalPosition field is required</span
 862                     >
 863                   </div>
 864                   <div ng-message="min">
 865                     <span
 866                       translate="CHAT.ERRORS.VERTICALPOSITION_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
 867                       >verticalPosition must be a valid greater or equal
 868                       than</span
 869                     >
 870                     <span>0</span>
 871                   </div>
 872                   <div ng-message="max">
 873                     <span
 874                       translate="CHAT.ERRORS.VERTICALPOSITION_MUST_BE_LESS_THAN_OR_EQUAL_TO"
 875                       >verticalPosition must be a valid greater or equal
 876                       than</span
 877                     >
 878                     <span>100</span>
 879                   </div>
 880                 </div>
 881               </md-input-container>
 882               <md-input-container class="md-block">
 883                 <label translate="CHAT.MESSAGESALIGNMENT"
 884                   >messagesAlignment</label
 885                 >
 886                 <md-select
 887                   name="messagesAlignment"
 888                   ng-model="vm.chatWebsite.messagesAlignment"
 889                   ng-disabled="!vm.crudPermissions.canEdit"
 890                 >
 891                   <md-option ng-value="'alternate'">
 892                     {{ 'CHAT.ALTERNATE' | translate }}
 893                   </md-option>
 894
 895                   <md-option ng-value="'centered'">
 896                     {{ 'CHAT.CENTERED' | translate }}
 897                   </md-option>
 898                 </md-select>
 899                 <div
 900                   ng-messages="appearanceForm['messagesAlignment'].$error"
 901                   ng-show="appearanceForm['messagesAlignment'].$touched"
 902                   role="alert"
 903                 >
 904                   <div ng-message="required">
 905                     <span translate="CHAT.ERRORS.MESSAGESALIGNMENT_REQUIRED"
 906                       >messagesAlignment field is required</span
 907                     >
 908                   </div>
 909                 </div>
 910               </md-input-container>
 911               <md-input-container class="md-block">
 912                 <label translate="CHAT.DEFAULTTITLE">defaultTitle</label>
 913                 <input
 914                   type="text"
 915                   name="defaultTitle"
 916                   ng-model="vm.chatWebsite.defaultTitle"
 917                   md-maxlength="255"
 918                   ng-disabled="!vm.crudPermissions.canEdit"
 919                 />
 920
 921                 <div
 922                   ng-messages="appearanceForm['defaultTitle'].$error"
 923                   ng-show="appearanceForm['defaultTitle'].$touched"
 924                   role="alert"
 925                 >
 926                   <div ng-message="required">
 927                     <span translate="CHAT.ERRORS.DEFAULTTITLE_REQUIRED"
 928                       >defaultTitle field is required</span
 929                     >
 930                   </div>
 931                   <div ng-message="md-maxlength">
 932                     <span
 933                       translate="CHAT.ERRORS.DEFAULTTITLE_MAX_LENGTH"
 934                       translate-values="{max: 255}"
 935                       >defaultTitle must have a maximum length equal to
 936                       255</span
 937                     >
 938                   </div>
 939                 </div>
 940               </md-input-container>
 941             </form>
 942           </div>
 943           <div
 944             class="chatWebsite-detail-form-container onlinestatus md-background-bg md-whiteframe-1dp"
 945           >
 946             <div class="pb-16" layout="row" layout-align="start center">
 947               <div class="h2 secondary-text" translate="CHAT.ONLINESTATUS">
 948                 ONLINESTATUS
 949               </div>
 950             </div>
 951             <form name="onlinestatusForm" novalidate>
 952               <md-input-container class="md-block">
 953                 <label translate="CHAT.HEADER_ONLINE">header_online</label>
 954                 <input
 955                   type="text"
 956                   name="header_online"
 957                   ng-model="vm.chatWebsite.header_online"
 958                   md-maxlength="255"
 959                   autofocus
 960                   ng-disabled="!vm.crudPermissions.canEdit"
 961                 />
 962
 963                 <div
 964                   ng-messages="onlinestatusForm['header_online'].$error"
 965                   ng-show="onlinestatusForm['header_online'].$touched"
 966                   role="alert"
 967                 >
 968                   <div ng-message="required">
 969                     <span translate="CHAT.ERRORS.HEADER_ONLINE_REQUIRED"
 970                       >header_online field is required</span
 971                     >
 972                   </div>
 973                   <div ng-message="md-maxlength">
 974                     <span
 975                       translate="CHAT.ERRORS.HEADER_ONLINE_MAX_LENGTH"
 976                       translate-values="{max: 255}"
 977                       >header_online must have a maximum length equal to
 978                       255</span
 979                     >
 980                   </div>
 981                 </div>
 982               </md-input-container>
 983               <md-input-container class="md-block">
 984                 <label translate="CHAT.START_CHAT_BUTTON"
 985                   >start_chat_button</label
 986                 >
 987                 <input
 988                   type="text"
 989                   name="start_chat_button"
 990                   ng-model="vm.chatWebsite.start_chat_button"
 991                   md-maxlength="255"
 992                   ng-disabled="!vm.crudPermissions.canEdit"
 993                 />
 994
 995                 <div
 996                   ng-messages="onlinestatusForm['start_chat_button'].$error"
 997                   ng-show="onlinestatusForm['start_chat_button'].$touched"
 998                   role="alert"
 999                 >
1000                   <div ng-message="required">
1001                     <span translate="CHAT.ERRORS.START_CHAT_BUTTON_REQUIRED"
1002                       >start_chat_button field is required</span
1003                     >
1004                   </div>
1005                   <div ng-message="md-maxlength">
1006                     <span
1007                       translate="CHAT.ERRORS.START_CHAT_BUTTON_MAX_LENGTH"
1008                       translate-values="{max: 255}"
1009                       >start_chat_button must have a maximum length equal to
1010                       255</span
1011                     >
1012                   </div>
1013                 </div>
1014               </md-input-container>
1015             </form>
1016           </div>
1017           <div
1018             class="chatWebsite-detail-form-container offlinestatus md-background-bg md-whiteframe-1dp"
1019           >
1020             <div class="pb-16" layout="row" layout-align="start center">
1021               <div class="h2 secondary-text" translate="CHAT.OFFLINESTATUS">
1022                 OFFLINESTATUS
1023               </div>
1024             </div>
1025             <form name="offlinestatusForm" novalidate>
1026               <md-input-container class="md-block">
1027                 <md-switch
1028                   ng-model="vm.chatWebsite.hideWhenOffline"
1029                   aria-label="hideWhenOffline"
1030                   ng-disabled="!vm.crudPermissions.canEdit"
1031                   ><span translate="CHAT.HIDEWHENOFFLINE"
1032                     >hideWhenOffline</span
1033                   ></md-switch
1034                 >
1035
1036                 <div class="hint">
1037                   <span translate="CHAT.HELP.HIDEWHENOFFLINE"></span>
1038                 </div>
1039               </md-input-container>
1040               <md-input-container class="md-block">
1041                 <label translate="CHAT.HEADER_OFFLINE">header_offline</label>
1042                 <input
1043                   type="text"
1044                   name="header_offline"
1045                   ng-model="vm.chatWebsite.header_offline"
1046                   md-maxlength="255"
1047                   ng-disabled="!vm.crudPermissions.canEdit"
1048                 />
1049
1050                 <div
1051                   ng-messages="offlinestatusForm['header_offline'].$error"
1052                   ng-show="offlinestatusForm['header_offline'].$touched"
1053                   role="alert"
1054                 >
1055                   <div ng-message="required">
1056                     <span translate="CHAT.ERRORS.HEADER_OFFLINE_REQUIRED"
1057                       >header_offline field is required</span
1058                     >
1059                   </div>
1060                   <div ng-message="md-maxlength">
1061                     <span
1062                       translate="CHAT.ERRORS.HEADER_OFFLINE_MAX_LENGTH"
1063                       translate-values="{max: 255}"
1064                       >header_offline must have a maximum length equal to
1065                       255</span
1066                     >
1067                   </div>
1068                 </div>
1069               </md-input-container>
1070               <md-input-container class="md-block">
1071                 <label translate="CHAT.OFFLINE_CHAT_BUTTON"
1072                   >offline_chat_button</label
1073                 >
1074                 <input
1075                   type="text"
1076                   name="offline_chat_button"
1077                   ng-model="vm.chatWebsite.offline_chat_button"
1078                   md-maxlength="255"
1079                   ng-disabled="!vm.crudPermissions.canEdit"
1080                 />
1081
1082                 <div
1083                   ng-messages="offlinestatusForm['offline_chat_button'].$error"
1084                   ng-show="offlinestatusForm['offline_chat_button'].$touched"
1085                   role="alert"
1086                 >
1087                   <div ng-message="required">
1088                     <span translate="CHAT.ERRORS.OFFLINE_CHAT_BUTTON_REQUIRED"
1089                       >offline_chat_button field is required</span
1090                     >
1091                   </div>
1092                   <div ng-message="md-maxlength">
1093                     <span
1094                       translate="CHAT.ERRORS.OFFLINE_CHAT_BUTTON_MAX_LENGTH"
1095                       translate-values="{max: 255}"
1096                       >offline_chat_button must have a maximum length equal to
1097                       255</span
1098                     >
1099                   </div>
1100                 </div>
1101               </md-input-container>
1102               <md-input-container class="md-block">
1103                 <label translate="CHAT.OFFLINEMESSAGESUBJECT"
1104                   >offlineMessageSubject</label
1105                 >
1106                 <input
1107                   type="text"
1108                   name="offlineMessageSubject"
1109                   ng-model="vm.chatWebsite.offlineMessageSubject"
1110                   md-maxlength="255"
1111                   ng-disabled="!vm.crudPermissions.canEdit"
1112                 />
1113
1114                 <div
1115                   ng-messages="offlinestatusForm['offlineMessageSubject'].$error"
1116                   ng-show="offlinestatusForm['offlineMessageSubject'].$touched"
1117                   role="alert"
1118                 >
1119                   <div ng-message="required">
1120                     <span translate="CHAT.ERRORS.OFFLINEMESSAGESUBJECT_REQUIRED"
1121                       >offlineMessageSubject field is required</span
1122                     >
1123                   </div>
1124                   <div ng-message="md-maxlength">
1125                     <span
1126                       translate="CHAT.ERRORS.OFFLINEMESSAGESUBJECT_MAX_LENGTH"
1127                       translate-values="{max: 255}"
1128                       >offlineMessageSubject must have a maximum length equal to
1129                       255</span
1130                     >
1131                   </div>
1132                 </div>
1133               </md-input-container>
1134               <md-input-container class="md-block">
1135                 <label translate="CHAT.OFFLINEMESSAGEBODY"
1136                   >offlineMessageBody</label
1137                 >
1138                 <input
1139                   type="text"
1140                   name="offlineMessageBody"
1141                   ng-model="vm.chatWebsite.offlineMessageBody"
1142                   md-maxlength="255"
1143                   ng-disabled="!vm.crudPermissions.canEdit"
1144                 />
1145
1146                 <div
1147                   ng-messages="offlinestatusForm['offlineMessageBody'].$error"
1148                   ng-show="offlinestatusForm['offlineMessageBody'].$touched"
1149                   role="alert"
1150                 >
1151                   <div ng-message="required">
1152                     <span translate="CHAT.ERRORS.OFFLINEMESSAGEBODY_REQUIRED"
1153                       >offlineMessageBody field is required</span
1154                     >
1155                   </div>
1156                   <div ng-message="md-maxlength">
1157                     <span
1158                       translate="CHAT.ERRORS.OFFLINEMESSAGEBODY_MAX_LENGTH"
1159                       translate-values="{max: 255}"
1160                       >offlineMessageBody must have a maximum length equal to
1161                       255</span
1162                     >
1163                   </div>
1164                 </div>
1165               </md-input-container>
1166             </form>
1167           </div>
1168           <div
1169             class="chatWebsite-detail-form-container closingform md-background-bg md-whiteframe-1dp"
1170           >
1171             <div class="pb-16" layout="row" layout-align="start center">
1172               <div class="h2 secondary-text" translate="CHAT.CLOSINGFORM">
1173                 CLOSINGFORM
1174               </div>
1175             </div>
1176             <form name="closingformForm" novalidate>
1177               <md-input-container class="md-block">
1178                 <label translate="CHAT.CLOSINGMESSAGE">closingMessage</label>
1179                 <textarea
1180                   name="closingMessage"
1181                   ng-model="vm.chatWebsite.closingMessage"
1182                   md-maxlength="255"
1183                   required
1184                   autofocus
1185                 ></textarea>
1186
1187                 <div
1188                   ng-messages="closingformForm['closingMessage'].$error"
1189                   ng-show="closingformForm['closingMessage'].$touched"
1190                   role="alert"
1191                 >
1192                   <div ng-message="required">
1193                     <span translate="CHAT.ERRORS.CLOSINGMESSAGE_REQUIRED"
1194                       >closingMessage field is required</span
1195                     >
1196                   </div>
1197
1198                   <div ng-message="md-maxlength">
1199                     <span
1200                       translate="CHAT.ERRORS.CLOSINGMESSAGE_MAX_LENGTH"
1201                       translate-values="{max: 255}"
1202                       >closingMessage must have a maximum length equal to
1203                       255</span
1204                     >
1205                   </div>
1206                 </div>
1207               </md-input-container>
1208               <md-input-container class="md-block">
1209                 <label translate="CHAT.SKIPMESSAGEBUTTON"
1210                   >skipMessageButton</label
1211                 >
1212                 <input
1213                   type="text"
1214                   name="skipMessageButton"
1215                   ng-model="vm.chatWebsite.skipMessageButton"
1216                   md-maxlength="255"
1217                   ng-disabled="!vm.crudPermissions.canEdit"
1218                 />
1219
1220                 <div
1221                   ng-messages="closingformForm['skipMessageButton'].$error"
1222                   ng-show="closingformForm['skipMessageButton'].$touched"
1223                   role="alert"
1224                 >
1225                   <div ng-message="required">
1226                     <span translate="CHAT.ERRORS.SKIPMESSAGEBUTTON_REQUIRED"
1227                       >skipMessageButton field is required</span
1228                     >
1229                   </div>
1230                   <div ng-message="md-maxlength">
1231                     <span
1232                       translate="CHAT.ERRORS.SKIPMESSAGEBUTTON_MAX_LENGTH"
1233                       translate-values="{max: 255}"
1234                       >skipMessageButton must have a maximum length equal to
1235                       255</span
1236                     >
1237                   </div>
1238                 </div>
1239               </md-input-container>
1240               <md-input-container class="md-block">
1241                 <md-switch
1242                   ng-model="vm.chatWebsite.enableRating"
1243                   aria-label="enableRating"
1244                   ng-disabled="!vm.crudPermissions.canEdit"
1245                   ><span translate="CHAT.ENABLERATING"
1246                     >enableRating</span
1247                   ></md-switch
1248                 >
1249               </md-input-container>
1250               <md-input-container
1251                 ng-if="vm.chatWebsite.enableRating"
1252                 class="md-block"
1253               >
1254                 <label translate="CHAT.RATINGTYPE">ratingType</label>
1255                 <md-select
1256                   name="ratingType"
1257                   ng-model="vm.chatWebsite.ratingType"
1258                   ng-disabled="!vm.crudPermissions.canEdit"
1259                 >
1260                   <md-option ng-value="'star'">Star</md-option>
1261                   <md-option ng-value="'thumb'">Thumb</md-option>
1262                 </md-select>
1263                 <div
1264                   ng-messages="closingformForm['ratingType'].$error"
1265                   ng-show="closingformForm['ratingType'].$touched"
1266                   role="alert"
1267                 >
1268                   <div ng-message="required">
1269                     <span translate="CHAT.ERRORS.RATINGTYPE_REQUIRED"
1270                       >ratingType field is required</span
1271                     >
1272                   </div>
1273                 </div>
1274               </md-input-container>
1275               <md-input-container
1276                 ng-if="vm.chatWebsite.enableRating && vm.chatWebsite.ratingType === 'star'"
1277                 class="md-block"
1278               >
1279                 <label translate="CHAT.RATINGSTARSNUMBER"
1280                   >ratingStarsNumber</label
1281                 >
1282                 <input
1283                   type="number"
1284                   name="ratingStarsNumber"
1285                   ng-model="vm.chatWebsite.ratingStarsNumber"
1286                   min="2"
1287                   max="5"
1288                   ng-required="true"
1289                   ng-disabled="!vm.crudPermissions.canEdit"
1290                 />
1291
1292                 <div
1293                   ng-messages="closingformForm['ratingStarsNumber'].$error"
1294                   ng-show="closingformForm['ratingStarsNumber'].$touched"
1295                   role="alert"
1296                 >
1297                   <div ng-message="required">
1298                     <span translate="CHAT.ERRORS.RATINGSTARSNUMBER_REQUIRED"
1299                       >ratingStarsNumber field is required</span
1300                     >
1301                   </div>
1302                   <div ng-message="min">
1303                     <span
1304                       translate="CHAT.ERRORS.RATINGSTARSNUMBER_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
1305                       >ratingStarsNumber must be a valid greater or equal
1306                       than</span
1307                     >
1308                     <span>2</span>
1309                   </div>
1310                   <div ng-message="max">
1311                     <span
1312                       translate="CHAT.ERRORS.RATINGSTARSNUMBER_MUST_BE_LESS_THAN_OR_EQUAL_TO"
1313                       >ratingStarsNumber must be a valid greater or equal
1314                       than</span
1315                     >
1316                     <span>5</span>
1317                   </div>
1318                 </div>
1319               </md-input-container>
1320               <md-input-container class="md-block">
1321                 <md-switch
1322                   ng-model="vm.chatWebsite.enableFeedback"
1323                   aria-label="enableFeedback"
1324                   ng-disabled="!vm.crudPermissions.canEdit"
1325                   ><span translate="CHAT.ENABLEFEEDBACK"
1326                     >enableFeedback</span
1327                   ></md-switch
1328                 >
1329               </md-input-container>
1330               <md-input-container
1331                 ng-if="vm.chatWebsite.enableFeedback"
1332                 class="md-block"
1333               >
1334                 <label translate="CHAT.FEEDBACKTITLE">feedbackTitle</label>
1335                 <input
1336                   type="text"
1337                   name="feedbackTitle"
1338                   ng-model="vm.chatWebsite.feedbackTitle"
1339                   md-maxlength="255"
1340                   ng-disabled="!vm.crudPermissions.canEdit"
1341                 />
1342
1343                 <div
1344                   ng-messages="closingformForm['feedbackTitle'].$error"
1345                   ng-show="closingformForm['feedbackTitle'].$touched"
1346                   role="alert"
1347                 >
1348                   <div ng-message="required">
1349                     <span translate="CHAT.ERRORS.FEEDBACKTITLE_REQUIRED"
1350                       >feedbackTitle field is required</span
1351                     >
1352                   </div>
1353                   <div ng-message="md-maxlength">
1354                     <span
1355                       translate="CHAT.ERRORS.FEEDBACKTITLE_MAX_LENGTH"
1356                       translate-values="{max: 255}"
1357                       >feedbackTitle must have a maximum length equal to
1358                       255</span
1359                     >
1360                   </div>
1361                 </div>
1362               </md-input-container>
1363               <md-input-container class="md-block">
1364                 <md-switch
1365                   ng-model="vm.chatWebsite.forwardTranscript"
1366                   aria-label="forwardTranscript"
1367                   ng-disabled="!vm.crudPermissions.canEdit"
1368                   ><span translate="CHAT.FORWARDTRANSCRIPT"
1369                     >forwardTranscript</span
1370                   ></md-switch
1371                 >
1372               </md-input-container>
1373               <md-input-container
1374                 ng-if="vm.chatWebsite.forwardTranscript"
1375                 class="md-block"
1376               >
1377                 <label translate="CHAT.FORWARDTRANSCRIPTMESSAGE"
1378                   >forwardTranscriptMessage</label
1379                 >
1380                 <input
1381                   type="text"
1382                   name="forwardTranscriptMessage"
1383                   ng-model="vm.chatWebsite.forwardTranscriptMessage"
1384                   md-maxlength="255"
1385                   ng-disabled="!vm.crudPermissions.canEdit"
1386                 />
1387
1388                 <div
1389                   ng-messages="closingformForm['forwardTranscriptMessage'].$error"
1390                   ng-show="closingformForm['forwardTranscriptMessage'].$touched"
1391                   role="alert"
1392                 >
1393                   <div ng-message="required">
1394                     <span
1395                       translate="CHAT.ERRORS.FORWARDTRANSCRIPTMESSAGE_REQUIRED"
1396                       >forwardTranscriptMessage field is required</span
1397                     >
1398                   </div>
1399                   <div ng-message="md-maxlength">
1400                     <span
1401                       translate="CHAT.ERRORS.FORWARDTRANSCRIPTMESSAGE_MAX_LENGTH"
1402                       translate-values="{max: 255}"
1403                       >forwardTranscriptMessage must have a maximum length equal
1404                       to 255</span
1405                     >
1406                   </div>
1407                 </div>
1408               </md-input-container>
1409               <md-input-container class="md-block">
1410                 <label translate="CHAT.CLOSINGMESSAGEBUTTON"
1411                   >closingMessageButton</label
1412                 >
1413                 <input
1414                   type="text"
1415                   name="closingMessageButton"
1416                   ng-model="vm.chatWebsite.closingMessageButton"
1417                   md-maxlength="255"
1418                   ng-required="true"
1419                   ng-disabled="!vm.crudPermissions.canEdit"
1420                 />
1421
1422                 <div
1423                   ng-messages="closingformForm['closingMessageButton'].$error"
1424                   ng-show="closingformForm['closingMessageButton'].$touched"
1425                   role="alert"
1426                 >
1427                   <div ng-message="required">
1428                     <span translate="CHAT.ERRORS.CLOSINGMESSAGEBUTTON_REQUIRED"
1429                       >closingMessageButton field is required</span
1430                     >
1431                   </div>
1432                   <div ng-message="md-maxlength">
1433                     <span
1434                       translate="CHAT.ERRORS.CLOSINGMESSAGEBUTTON_MAX_LENGTH"
1435                       translate-values="{max: 255}"
1436                       >closingMessageButton must have a maximum length equal to
1437                       255</span
1438                     >
1439                   </div>
1440                 </div>
1441               </md-input-container>
1442             </form>
1443           </div>
1444           <div
1445             class="chatWebsite-detail-form-container unmanagedstatus md-background-bg md-whiteframe-1dp"
1446           >
1447             <div class="pb-16" layout="row" layout-align="start center">
1448               <div class="h2 secondary-text" translate="CHAT.UNMANAGEDSTATUS">
1449                 UNMANAGEDSTATUS
1450               </div>
1451             </div>
1452             <form name="unmanagedstatusForm" novalidate>
1453               <md-input-container class="md-block">
1454                 <md-switch
1455                   ng-model="vm.chatWebsite.autoclose"
1456                   aria-label="autoclose"
1457                   ng-disabled="!vm.crudPermissions.canEdit"
1458                   ><span translate="CHAT.AUTOCLOSE">autoclose</span></md-switch
1459                 >
1460               </md-input-container>
1461               <md-input-container class="md-block">
1462                 <md-switch
1463                   ng-model="vm.chatWebsite.enableUnmanagedNote"
1464                   aria-label="enableUnmanagedNote"
1465                   ng-disabled="!vm.crudPermissions.canEdit"
1466                   ><span translate="CHAT.ENABLEUNMANAGEDNOTE"
1467                     >enableUnmanagedNote</span
1468                   ></md-switch
1469                 >
1470               </md-input-container>
1471               <md-input-container class="md-block">
1472                 <label translate="CHAT.UNMANAGEDMESSAGE"
1473                   >unmanagedMessage</label
1474                 >
1475                 <input
1476                   type="text"
1477                   name="unmanagedMessage"
1478                   ng-model="vm.chatWebsite.unmanagedMessage"
1479                   md-maxlength="255"
1480                   ng-disabled="!vm.crudPermissions.canEdit"
1481                 />
1482
1483                 <div
1484                   ng-messages="unmanagedstatusForm['unmanagedMessage'].$error"
1485                   ng-show="unmanagedstatusForm['unmanagedMessage'].$touched"
1486                   role="alert"
1487                 >
1488                   <div ng-message="required">
1489                     <span translate="CHAT.ERRORS.UNMANAGEDMESSAGE_REQUIRED"
1490                       >unmanagedMessage field is required</span
1491                     >
1492                   </div>
1493                   <div ng-message="md-maxlength">
1494                     <span
1495                       translate="CHAT.ERRORS.UNMANAGEDMESSAGE_MAX_LENGTH"
1496                       translate-values="{max: 255}"
1497                       >unmanagedMessage must have a maximum length equal to
1498                       255</span
1499                     >
1500                   </div>
1501                 </div>
1502               </md-input-container>
1503               <md-input-container class="md-block">
1504                 <label translate="CHAT.SKIPUNMANAGED">skipUnmanaged</label>
1505                 <input
1506                   type="text"
1507                   name="skipUnmanaged"
1508                   ng-model="vm.chatWebsite.skipUnmanaged"
1509                   md-maxlength="255"
1510                   ng-disabled="!vm.crudPermissions.canEdit"
1511                 />
1512
1513                 <div
1514                   ng-messages="unmanagedstatusForm['skipUnmanaged'].$error"
1515                   ng-show="unmanagedstatusForm['skipUnmanaged'].$touched"
1516                   role="alert"
1517                 >
1518                   <div ng-message="required">
1519                     <span translate="CHAT.ERRORS.SKIPUNMANAGED_REQUIRED"
1520                       >skipUnmanaged field is required</span
1521                     >
1522                   </div>
1523                   <div ng-message="md-maxlength">
1524                     <span
1525                       translate="CHAT.ERRORS.SKIPUNMANAGED_MAX_LENGTH"
1526                       translate-values="{max: 255}"
1527                       >skipUnmanaged must have a maximum length equal to
1528                       255</span
1529                     >
1530                   </div>
1531                 </div>
1532               </md-input-container>
1533               <md-input-container
1534                 ng-if="vm.chatWebsite.enableUnmanagedNote"
1535                 class="md-block"
1536               >
1537                 <label translate="CHAT.SENDUNMANAGED">sendUnmanaged</label>
1538                 <input
1539                   type="text"
1540                   name="sendUnmanaged"
1541                   ng-model="vm.chatWebsite.sendUnmanaged"
1542                   md-maxlength="255"
1543                   ng-required="true"
1544                   ng-disabled="!vm.crudPermissions.canEdit"
1545                 />
1546
1547                 <div
1548                   ng-messages="unmanagedstatusForm['sendUnmanaged'].$error"
1549                   ng-show="unmanagedstatusForm['sendUnmanaged'].$touched"
1550                   role="alert"
1551                 >
1552                   <div ng-message="required">
1553                     <span translate="CHAT.ERRORS.SENDUNMANAGED_REQUIRED"
1554                       >sendUnmanaged field is required</span
1555                     >
1556                   </div>
1557                   <div ng-message="md-maxlength">
1558                     <span
1559                       translate="CHAT.ERRORS.SENDUNMANAGED_MAX_LENGTH"
1560                       translate-values="{max: 255}"
1561                       >sendUnmanaged must have a maximum length equal to
1562                       255</span
1563                     >
1564                   </div>
1565                 </div>
1566               </md-input-container>
1567               <md-input-container
1568                 ng-if="vm.chatWebsite.enableUnmanagedNote"
1569                 class="md-block"
1570               >
1571                 <label translate="CHAT.NOTETITLE">noteTitle</label>
1572                 <input
1573                   type="text"
1574                   name="noteTitle"
1575                   ng-model="vm.chatWebsite.noteTitle"
1576                   md-maxlength="255"
1577                   ng-disabled="!vm.crudPermissions.canEdit"
1578                 />
1579
1580                 <div
1581                   ng-messages="unmanagedstatusForm['noteTitle'].$error"
1582                   ng-show="unmanagedstatusForm['noteTitle'].$touched"
1583                   role="alert"
1584                 >
1585                   <div ng-message="required">
1586                     <span translate="CHAT.ERRORS.NOTETITLE_REQUIRED"
1587                       >noteTitle field is required</span
1588                     >
1589                   </div>
1590                   <div ng-message="md-maxlength">
1591                     <span
1592                       translate="CHAT.ERRORS.NOTETITLE_MAX_LENGTH"
1593                       translate-values="{max: 255}"
1594                       >noteTitle must have a maximum length equal to 255</span
1595                     >
1596                   </div>
1597                 </div>
1598               </md-input-container>
1599             </form>
1600           </div>
1601           <div
1602             class="chatWebsite-detail-form-container interaction md-background-bg md-whiteframe-1dp"
1603           >
1604             <div class="pb-16" layout="row" layout-align="start center">
1605               <div class="h2 secondary-text" translate="CHAT.INTERACTION">
1606                 INTERACTION
1607               </div>
1608             </div>
1609             <form name="interactionForm" novalidate>
1610               <md-input-container class="md-block">
1611                 <label translate="CHAT.AGENTIDENTIFIER">agentIdentifier</label>
1612                 <md-select
1613                   name="agentIdentifier"
1614                   ng-model="vm.chatWebsite.agentIdentifier"
1615                   autofocus
1616                   ng-disabled="!vm.crudPermissions.canEdit"
1617                 >
1618                   <md-option ng-value="'website_alias'">
1619                     {{ 'CHAT.WEBSITEALIAS' | translate }}
1620                   </md-option>
1621
1622                   <md-option ng-value="'agent_alias'">
1623                     {{ 'CHAT.AGENTALIAS' | translate }}
1624                   </md-option>
1625
1626                   <md-option ng-value="'agent_fullname'">
1627                     {{ 'CHAT.AGENTFULLNAME' | translate }}
1628                   </md-option>
1629                 </md-select>
1630                 <div class="hint">
1631                   <span translate="CHAT.HELP.AGENTIDENTIFIER"></span>
1632                 </div>
1633                 <div
1634                   ng-messages="interactionForm['agentIdentifier'].$error"
1635                   ng-show="interactionForm['agentIdentifier'].$touched"
1636                   role="alert"
1637                 >
1638                   <div ng-message="required">
1639                     <span translate="CHAT.ERRORS.AGENTIDENTIFIER_REQUIRED"
1640                       >agentIdentifier field is required</span
1641                     >
1642                   </div>
1643                 </div>
1644               </md-input-container>
1645               <md-input-container class="md-block">
1646                 <label translate="CHAT.CUSTOMERALIAS">customerAlias</label>
1647                 <input
1648                   type="text"
1649                   name="customerAlias"
1650                   ng-model="vm.chatWebsite.customerAlias"
1651                   md-maxlength="255"
1652                   ng-required="true"
1653                   ng-disabled="!vm.crudPermissions.canEdit"
1654                 />
1655
1656                 <div
1657                   ng-messages="interactionForm['customerAlias'].$error"
1658                   ng-show="interactionForm['customerAlias'].$touched"
1659                   role="alert"
1660                 >
1661                   <div ng-message="required">
1662                     <span translate="CHAT.ERRORS.CUSTOMERALIAS_REQUIRED"
1663                       >customerAlias field is required</span
1664                     >
1665                   </div>
1666                   <div ng-message="md-maxlength">
1667                     <span
1668                       translate="CHAT.ERRORS.CUSTOMERALIAS_MAX_LENGTH"
1669                       translate-values="{max: 255}"
1670                       >customerAlias must have a maximum length equal to
1671                       255</span
1672                     >
1673                   </div>
1674                 </div>
1675               </md-input-container>
1676               <md-input-container class="md-block">
1677                 <label translate="CHAT.MESSAGEFONTSIZE">messageFontSize</label>
1678                 <input
1679                   type="number"
1680                   name="messageFontSize"
1681                   ng-model="vm.chatWebsite.messageFontSize"
1682                   min="0"
1683                   max="20"
1684                   ng-required="true"
1685                   ng-disabled="!vm.crudPermissions.canEdit"
1686                 />
1687
1688                 <div
1689                   ng-messages="interactionForm['messageFontSize'].$error"
1690                   ng-show="interactionForm['messageFontSize'].$touched"
1691                   role="alert"
1692                 >
1693                   <div ng-message="required">
1694                     <span translate="CHAT.ERRORS.MESSAGEFONTSIZE_REQUIRED"
1695                       >messageFontSize field is required</span
1696                     >
1697                   </div>
1698                   <div ng-message="min">
1699                     <span
1700                       translate="CHAT.ERRORS.MESSAGEFONTSIZE_MUST_BE_GREATER_THAN_OR_EQUAL_TO"
1701                       >messageFontSize must be a valid greater or equal
1702                       than</span
1703                     >
1704                     <span>0</span>
1705                   </div>
1706                   <div ng-message="max">
1707                     <span
1708                       translate="CHAT.ERRORS.MESSAGEFONTSIZE_MUST_BE_LESS_THAN_OR_EQUAL_TO"
1709                       >messageFontSize must be a valid greater or equal
1710                       than</span
1711                     >
1712                     <span>20</span>
1713                   </div>
1714                 </div>
1715               </md-input-container>
1716               <md-input-container
1717                 ng-if="vm.chatWebsite.agentIdentifier === 'website_alias'"
1718                 class="md-block"
1719               >
1720                 <label translate="CHAT.WEBSITEALIAS">WebsiteAlias</label>
1721                 <input
1722                   type="text"
1723                   name="agentAlias"
1724                   ng-model="vm.chatWebsite.agentAlias"
1725                   md-maxlength="255"
1726                   ng-required="true"
1727                   ng-disabled="!vm.crudPermissions.canEdit"
1728                 />
1729
1730                 <div class="hint">
1731                   <span translate="CHAT.HELP.WEBSITEALIAS"></span>
1732                 </div>
1733                 <div
1734                   ng-messages="interactionForm['agentAlias'].$error"
1735                   ng-show="interactionForm['agentAlias'].$touched"
1736                   role="alert"
1737                 >
1738                   <div ng-message="required">
1739                     <span translate="CHAT.ERRORS.WEBSITEALIAS_REQUIRED"
1740                       >WebsiteAlias field is required</span
1741                     >
1742                   </div>
1743                   <div ng-message="md-maxlength">
1744                     <span
1745                       translate="CHAT.ERRORS.WEBSITEALIAS_MAX_LENGTH"
1746                       translate-values="{max: 255}"
1747                       >WebsiteAlias must have a maximum length equal to
1748                       255</span
1749                     >
1750                   </div>
1751                 </div>
1752               </md-input-container>
1753               <md-input-container class="md-block">
1754                 <label translate="CHAT.CLOSINGQUESTION">closingQuestion</label>
1755                 <input
1756                   type="text"
1757                   name="closingQuestion"
1758                   ng-model="vm.chatWebsite.closingQuestion"
1759                   md-maxlength="255"
1760                   ng-disabled="!vm.crudPermissions.canEdit"
1761                 />
1762
1763                 <div
1764                   ng-messages="interactionForm['closingQuestion'].$error"
1765                   ng-show="interactionForm['closingQuestion'].$touched"
1766                   role="alert"
1767                 >
1768                   <div ng-message="required">
1769                     <span translate="CHAT.ERRORS.CLOSINGQUESTION_REQUIRED"
1770                       >closingQuestion field is required</span
1771                     >
1772                   </div>
1773                   <div ng-message="md-maxlength">
1774                     <span
1775                       translate="CHAT.ERRORS.CLOSINGQUESTION_MAX_LENGTH"
1776                       translate-values="{max: 255}"
1777                       >closingQuestion must have a maximum length equal to
1778                       255</span
1779                     >
1780                   </div>
1781                 </div>
1782               </md-input-container>
1783               <md-input-container class="md-block">
1784                 <label translate="CHAT.FORMSUBMITSUCCESSMESSAGE"
1785                   >formSubmitSuccessMessage</label
1786                 >
1787                 <input
1788                   type="text"
1789                   name="formSubmitSuccessMessage"
1790                   ng-model="vm.chatWebsite.formSubmitSuccessMessage"
1791                   md-maxlength="255"
1792                   ng-disabled="!vm.crudPermissions.canEdit"
1793                 />
1794
1795                 <div
1796                   ng-messages="interactionForm['formSubmitSuccessMessage'].$error"
1797                   ng-show="interactionForm['formSubmitSuccessMessage'].$touched"
1798                   role="alert"
1799                 >
1800                   <div ng-message="required">
1801                     <span
1802                       translate="CHAT.ERRORS.FORMSUBMITSUCCESSMESSAGE_REQUIRED"
1803                       >formSubmitSuccessMessage field is required</span
1804                     >
1805                   </div>
1806                   <div ng-message="md-maxlength">
1807                     <span
1808                       translate="CHAT.ERRORS.FORMSUBMITSUCCESSMESSAGE_MAX_LENGTH"
1809                       translate-values="{max: 255}"
1810                       >formSubmitSuccessMessage must have a maximum length equal
1811                       to 255</span
1812                     >
1813                   </div>
1814                 </div>
1815               </md-input-container>
1816               <md-input-container class="md-block">
1817                 <label translate="CHAT.FORMSUBMITFAILUREMESSAGE"
1818                   >formSubmitFailureMessage</label
1819                 >
1820                 <input
1821                   type="text"
1822                   name="formSubmitFailureMessage"
1823                   ng-model="vm.chatWebsite.formSubmitFailureMessage"
1824                   md-maxlength="255"
1825                   ng-disabled="!vm.crudPermissions.canEdit"
1826                 />
1827
1828                 <div
1829                   ng-messages="interactionForm['formSubmitFailureMessage'].$error"
1830                   ng-show="interactionForm['formSubmitFailureMessage'].$touched"
1831                   role="alert"
1832                 >
1833                   <div ng-message="required">
1834                     <span
1835                       translate="CHAT.ERRORS.FORMSUBMITFAILUREMESSAGE_REQUIRED"
1836                       >formSubmitFailureMessage field is required</span
1837                     >
1838                   </div>
1839                   <div ng-message="md-maxlength">
1840                     <span
1841                       translate="CHAT.ERRORS.FORMSUBMITFAILUREMESSAGE_MAX_LENGTH"
1842                       translate-values="{max: 255}"
1843                       >formSubmitFailureMessage must have a maximum length equal
1844                       to 255</span
1845                     >
1846                   </div>
1847                 </div>
1848               </md-input-container>
1849               <md-input-container class="md-block">
1850                 <md-switch
1851                   ng-model="vm.chatWebsite.enableCustomerWriting"
1852                   aria-label="enableCustomerWriting"
1853                   ng-disabled="!vm.crudPermissions.canEdit"
1854                   ><span translate="CHAT.ENABLECUSTOMERWRITING"
1855                     >enableCustomerWriting</span
1856                   ></md-switch
1857                 >
1858               </md-input-container>
1859               <md-input-container
1860                 ng-if="!vm.chatWebsite.enableCustomerWriting"
1861                 class="md-block"
1862               >
1863                 <label translate="CHAT.WAITINGTITLE">waitingTitle</label>
1864                 <input
1865                   type="text"
1866                   name="waitingTitle"
1867                   ng-model="vm.chatWebsite.waitingTitle"
1868                   md-maxlength="255"
1869                   ng-required="true"
1870                   ng-disabled="!vm.crudPermissions.canEdit"
1871                 />
1872
1873                 <div
1874                   ng-messages="interactionForm['waitingTitle'].$error"
1875                   ng-show="interactionForm['waitingTitle'].$touched"
1876                   role="alert"
1877                 >
1878                   <div ng-message="required">
1879                     <span translate="CHAT.ERRORS.WAITINGTITLE_REQUIRED"
1880                       >waitingTitle field is required</span
1881                     >
1882                   </div>
1883                   <div ng-message="md-maxlength">
1884                     <span
1885                       translate="CHAT.ERRORS.WAITINGTITLE_MAX_LENGTH"
1886                       translate-values="{max: 255}"
1887                       >waitingTitle must have a maximum length equal to
1888                       255</span
1889                     >
1890                   </div>
1891                 </div>
1892               </md-input-container>
1893               <md-input-container
1894                 ng-if="!vm.chatWebsite.enableCustomerWriting"
1895                 class="md-block"
1896               >
1897                 <label translate="CHAT.WAITINGMESSAGE">waitingMessage</label>
1898                 <textarea
1899                   name="waitingMessage"
1900                   ng-model="vm.chatWebsite.waitingMessage"
1901                   md-maxlength="255"
1902                   required
1903                 ></textarea>
1904
1905                 <div
1906                   ng-messages="interactionForm['waitingMessage'].$error"
1907                   ng-show="interactionForm['waitingMessage'].$touched"
1908                   role="alert"
1909                 >
1910                   <div ng-message="required">
1911                     <span translate="CHAT.ERRORS.WAITINGMESSAGE_REQUIRED"
1912                       >waitingMessage field is required</span
1913                     >
1914                   </div>
1915
1916                   <div ng-message="md-maxlength">
1917                     <span
1918                       translate="CHAT.ERRORS.WAITINGMESSAGE_MAX_LENGTH"
1919                       translate-values="{max: 255}"
1920                       >waitingMessage must have a maximum length equal to
1921                       255</span
1922                     >
1923                   </div>
1924                 </div>
1925               </md-input-container>
1926               <md-input-container class="md-block">
1927                 <label translate="CHAT.PLACEHOLDERMESSAGE"
1928                   >placeholderMessage</label
1929                 >
1930                 <input
1931                   type="text"
1932                   name="placeholderMessage"
1933                   ng-model="vm.chatWebsite.placeholderMessage"
1934                   md-maxlength="255"
1935                   ng-disabled="!vm.crudPermissions.canEdit"
1936                 />
1937
1938                 <div
1939                   ng-messages="interactionForm['placeholderMessage'].$error"
1940                   ng-show="interactionForm['placeholderMessage'].$touched"
1941                   role="alert"
1942                 >
1943                   <div ng-message="required">
1944                     <span translate="CHAT.ERRORS.PLACEHOLDERMESSAGE_REQUIRED"
1945                       >placeholderMessage field is required</span
1946                     >
1947                   </div>
1948                   <div ng-message="md-maxlength">
1949                     <span
1950                       translate="CHAT.ERRORS.PLACEHOLDERMESSAGE_MAX_LENGTH"
1951                       translate-values="{max: 255}"
1952                       >placeholderMessage must have a maximum length equal to
1953                       255</span
1954                     >
1955                   </div>
1956                 </div>
1957               </md-input-container>
1958               <md-input-container class="md-block">
1959                 <md-switch
1960                   ng-model="vm.chatWebsite.download_transcript"
1961                   aria-label="downloadTranscript"
1962                   ng-disabled="!vm.crudPermissions.canEdit"
1963                   ><span translate="CHAT.DOWNLOADTRANSCRIPT"
1964                     >downloadTranscript</span
1965                   ></md-switch
1966                 >
1967               </md-input-container>
1968               <md-input-container class="md-block">
1969                 <md-switch
1970                   ng-model="vm.chatWebsite.enableCustomerAttachment"
1971                   aria-label="enableCustomerAttachment"
1972                   ng-disabled="!vm.crudPermissions.canEdit"
1973                   ><span translate="CHAT.ENABLECUSTOMERATTACHMENT"
1974                     >enableCustomerAttachment</span
1975                   ></md-switch
1976                 >
1977               </md-input-container>
1978               <md-input-container class="md-block">
1979                 <md-switch
1980                   ng-model="vm.chatWebsite.enableSendButton"
1981                   aria-label="enableSendButton"
1982                   ng-disabled="!vm.crudPermissions.canEdit"
1983                   ><span translate="CHAT.ENABLESENDBUTTON"
1984                     >enableSendButton</span
1985                   ></md-switch
1986                 >
1987               </md-input-container>
1988               <md-input-container class="md-block">
1989                 <md-switch
1990                   ng-model="vm.chatWebsite.enableCustomerCheckmarks"
1991                   aria-label="enableCustomerCheckmarks"
1992                   ng-disabled="!vm.crudPermissions.canEdit"
1993                   ><span translate="CHAT.ENABLECUSTOMERCHECKMARKS"
1994                     >enableCustomerCheckmarks</span
1995                   ></md-switch
1996                 >
1997               </md-input-container>
1998               <md-input-container class="md-block">
1999                 <label translate="CHAT.SYSTEMALIAS">systemAlias</label>
2000                 <input
2001                   type="text"
2002                   name="systemAlias"
2003                   ng-model="vm.chatWebsite.systemAlias"
2004                   md-maxlength="255"
2005                   ng-required="true"
2006                   ng-disabled="!vm.crudPermissions.canEdit"
2007                 />
2008
2009                 <div
2010                   ng-messages="interactionForm['systemAlias'].$error"
2011                   ng-show="interactionForm['systemAlias'].$touched"
2012                   role="alert"
2013                 >
2014                   <div ng-message="required">
2015                     <span translate="CHAT.ERRORS.SYSTEMALIAS_REQUIRED"
2016                       >systemAlias field is required</span
2017                     >
2018                   </div>
2019                   <div ng-message="md-maxlength">
2020                     <span
2021                       translate="CHAT.ERRORS.SYSTEMALIAS_MAX_LENGTH"
2022                       translate-values="{max: 255}"
2023                       >systemAlias must have a maximum length equal to 255</span
2024                     >
2025                   </div>
2026                 </div>
2027               </md-input-container>
2028             </form>
2029           </div>
2030           <div
2031             ng-if="vm.license.custom"
2032             class="chatWebsite-detail-form-container whitelabel md-background-bg md-whiteframe-1dp"
2033           >
2034             <div class="pb-16" layout="row" layout-align="start center">
2035               <div class="h2 secondary-text" translate="CHAT.WHITELABEL">
2036                 WHITELABEL
2037               </div>
2038             </div>
2039             <form name="whitelabelForm" novalidate>
2040               <md-input-container class="md-block">
2041                 <md-switch
2042                   ng-model="vm.chatWebsite.defaultWhiteLabel"
2043                   aria-label="default"
2044                   ng-disabled="!vm.crudPermissions.canEdit"
2045                   ><span translate="CHAT.DEFAULT">default</span></md-switch
2046                 >
2047               </md-input-container>
2048               <md-input-container
2049                 ng-if="!vm.chatWebsite.defaultWhiteLabel"
2050                 class="md-block"
2051               >
2052                 <label translate="CHAT.WHITELABEL">whiteLabel</label>
2053                 <textarea
2054                   name="whiteLabel"
2055                   ng-model="vm.chatWebsite.whiteLabel"
2056                   md-maxlength="255"
2057                   required
2058                 ></textarea>
2059
2060                 <div
2061                   ng-messages="whitelabelForm['whiteLabel'].$error"
2062                   ng-show="whitelabelForm['whiteLabel'].$touched"
2063                   role="alert"
2064                 >
2065                   <div ng-message="required">
2066                     <span translate="CHAT.ERRORS.WHITELABEL_REQUIRED"
2067                       >whiteLabel field is required</span
2068                     >
2069                   </div>
2070
2071                   <div ng-message="md-maxlength">
2072                     <span
2073                       translate="CHAT.ERRORS.WHITELABEL_MAX_LENGTH"
2074                       translate-values="{max: 255}"
2075                       >whiteLabel must have a maximum length equal to 255</span
2076                     >
2077                   </div>
2078                 </div>
2079               </md-input-container>
2080             </form>
2081           </div>
2082           <div
2083             ng-if="vm.license.custom"
2084             class="chatWebsite-detail-form-container logo md-background-bg md-whiteframe-1dp"
2085           >
2086             <div class="pb-16" layout="row" layout-align="start center">
2087               <div class="h2 secondary-text" translate="CHAT.LOGO">LOGO</div>
2088             </div>
2089             <div
2090               ng-controller="ChatWebsitelogoController as vm_ca"
2091               ng-init="vm_ca.init(vm.chatWebsite, vm.crudPermissions)"
2092               class="chatWebsite-detail-form-container md-background-bg md-whiteframe-1dp"
2093             >
2094               <div
2095                 id="chatWebsite-image-uploader"
2096                 flow-init="vm_ca.ngFlowOptions"
2097                 flow-name="vm_ca.ngFlow.flow"
2098                 flow-files-submitted="vm_ca.upload()"
2099                 flow-file-added="vm_ca.fileAdded($file)"
2100                 flow-file-success="vm_ca.fileSuccess($file, $message)"
2101                 flow-complete="vm_ca.uploadComplete()"
2102                 flow-drop
2103                 flow-drag-enter="vm_ca.dropping=true"
2104                 flow-drag-leave="vm_ca.dropping=false"
2105                 ng-class="{'dropping':vm.dropping}"
2106               >
2107                 <div
2108                   class="drop-text hint-text"
2109                   layout="row"
2110                   layout-align="center center"
2111                 >
2112                   <span translate="EC.DROP_TO_UPLOAD">Drop to upload</span>
2113                 </div>
2114
2115                 <div
2116                   class="upload-button"
2117                   layout="column"
2118                   layout-align="center center"
2119                 >
2120                   <md-button
2121                     class="md-accent md-raised"
2122                     flow-btn
2123                     ng-disabled="!vm_ca.crudPermissions.canEdit"
2124                   >
2125                     Upload
2126                   </md-button>
2127                   <span class="secondary-text mt-8"
2128                     >You can also drop images here to upload. Only PNG, JPG -
2129                     Max. 8MB</span
2130                   >
2131                 </div>
2132
2133                 <div layout="row" layout-align="start start" layout-wrap>
2134                   <div
2135                     ng-repeat="logoimage in vm_ca.chatWebsite.images"
2136                     ng-switch="logoimage.type"
2137                   >
2138                     <div
2139                       class="chatWebsite-image uploading"
2140                       ng-switch-when="uploading"
2141                       layout="row"
2142                       layout-align="center center"
2143                     >
2144                       <div
2145                         class="overlay"
2146                         layout="column"
2147                         layout-align="center center"
2148                       >
2149                         <md-progress-linear
2150                           md-mode="determinate"
2151                           value="{{logoimage.file.progress() * 100}}"
2152                         >
2153                         </md-progress-linear>
2154                       </div>
2155                       <img class="media" flow-img="logoimage.file" />
2156                     </div>
2157
2158                     <div
2159                       class="chatWebsite-image"
2160                       ng-switch-when="image"
2161                       layout="row"
2162                       layout-align="center center"
2163                     >
2164                       <img class="media" ng-src="{{logoimage.url}}" />
2165                     </div>
2166                   </div>
2167                 </div>
2168               </div>
2169             </div>
2170           </div>
2171           <div
2172             class="chatWebsite-detail-form-container agentavatar md-background-bg md-whiteframe-1dp"
2173           >
2174             <div class="pb-16" layout="row" layout-align="start center">
2175               <div class="h2 secondary-text" translate="CHAT.AGENTAVATAR">
2176                 AGENTAVATAR
2177               </div>
2178             </div>
2179             <div
2180               ng-controller="ChatWebsiteagentAvatarController as vm_ca"
2181               ng-init="vm_ca.init(vm.chatWebsite, vm.crudPermissions)"
2182               class="chatWebsite-detail-form-container md-background-bg md-whiteframe-1dp"
2183             >
2184               <div
2185                 id="chatWebsite-image-uploader"
2186                 flow-init="vm_ca.ngFlowOptions"
2187                 flow-name="vm_ca.ngFlow.flow"
2188                 flow-files-submitted="vm_ca.upload()"
2189                 flow-file-added="vm_ca.fileAdded($file)"
2190                 flow-file-success="vm_ca.fileSuccess($file, $message)"
2191                 flow-complete="vm_ca.uploadComplete()"
2192                 flow-drop
2193                 flow-drag-enter="vm_ca.dropping=true"
2194                 flow-drag-leave="vm_ca.dropping=false"
2195                 ng-class="{'dropping':vm.dropping}"
2196               >
2197                 <div
2198                   class="drop-text hint-text"
2199                   layout="row"
2200                   layout-align="center center"
2201                 >
2202                   <span translate="EC.DROP_TO_UPLOAD">Drop to upload</span>
2203                 </div>
2204
2205                 <div
2206                   class="upload-button"
2207                   layout="column"
2208                   layout-align="center center"
2209                 >
2210                   <md-button
2211                     class="md-accent md-raised"
2212                     flow-btn
2213                     ng-disabled="!vm_ca.crudPermissions.canEdit"
2214                   >
2215                     Upload
2216                   </md-button>
2217                   <span class="secondary-text mt-8"
2218                     >You can also drop images here to upload. Only PNG, JPG -
2219                     Max. 8MB</span
2220                   >
2221                 </div>
2222
2223                 <div layout="row" layout-align="start start" layout-wrap>
2224                   <div
2225                     ng-repeat="agentAvatarimage in vm_ca.chatWebsite.images"
2226                     ng-switch="agentAvatarimage.type"
2227                   >
2228                     <div
2229                       class="chatWebsite-image uploading"
2230                       ng-switch-when="uploading"
2231                       layout="row"
2232                       layout-align="center center"
2233                     >
2234                       <div
2235                         class="overlay"
2236                         layout="column"
2237                         layout-align="center center"
2238                       >
2239                         <md-progress-linear
2240                           md-mode="determinate"
2241                           value="{{agentAvatarimage.file.progress() * 100}}"
2242                         >
2243                         </md-progress-linear>
2244                       </div>
2245                       <img class="media" flow-img="agentAvatarimage.file" />
2246                     </div>
2247
2248                     <div
2249                       class="chatWebsite-image"
2250                       ng-switch-when="image"
2251                       layout="row"
2252                       layout-align="center center"
2253                     >
2254                       <img class="media" ng-src="{{agentAvatarimage.url}}" />
2255                     </div>
2256                   </div>
2257                 </div>
2258               </div>
2259             </div>
2260           </div>
2261           <div
2262             class="chatWebsite-detail-form-container customeravatar md-background-bg md-whiteframe-1dp"
2263           >
2264             <div class="pb-16" layout="row" layout-align="start center">
2265               <div class="h2 secondary-text" translate="CHAT.CUSTOMERAVATAR">
2266                 CUSTOMERAVATAR
2267               </div>
2268             </div>
2269             <div
2270               ng-controller="ChatWebsitecustomerAvatarController as vm_ca"
2271               ng-init="vm_ca.init(vm.chatWebsite, vm.crudPermissions)"
2272               class="chatWebsite-detail-form-container md-background-bg md-whiteframe-1dp"
2273             >
2274               <div
2275                 id="chatWebsite-image-uploader"
2276                 flow-init="vm_ca.ngFlowOptions"
2277                 flow-name="vm_ca.ngFlow.flow"
2278                 flow-files-submitted="vm_ca.upload()"
2279                 flow-file-added="vm_ca.fileAdded($file)"
2280                 flow-file-success="vm_ca.fileSuccess($file, $message)"
2281                 flow-complete="vm_ca.uploadComplete()"
2282                 flow-drop
2283                 flow-drag-enter="vm_ca.dropping=true"
2284                 flow-drag-leave="vm_ca.dropping=false"
2285                 ng-class="{'dropping':vm.dropping}"
2286               >
2287                 <div
2288                   class="drop-text hint-text"
2289                   layout="row"
2290                   layout-align="center center"
2291                 >
2292                   <span translate="EC.DROP_TO_UPLOAD">Drop to upload</span>
2293                 </div>
2294
2295                 <div
2296                   class="upload-button"
2297                   layout="column"
2298                   layout-align="center center"
2299                 >
2300                   <md-button
2301                     class="md-accent md-raised"
2302                     flow-btn
2303                     ng-disabled="!vm_ca.crudPermissions.canEdit"
2304                   >
2305                     Upload
2306                   </md-button>
2307                   <span class="secondary-text mt-8"
2308                     >You can also drop images here to upload. Only PNG, JPG -
2309                     Max. 8MB</span
2310                   >
2311                 </div>
2312
2313                 <div layout="row" layout-align="start start" layout-wrap>
2314                   <div
2315                     ng-repeat="customerAvatarimage in vm_ca.chatWebsite.images"
2316                     ng-switch="customerAvatarimage.type"
2317                   >
2318                     <div
2319                       class="chatWebsite-image uploading"
2320                       ng-switch-when="uploading"
2321                       layout="row"
2322                       layout-align="center center"
2323                     >
2324                       <div
2325                         class="overlay"
2326                         layout="column"
2327                         layout-align="center center"
2328                       >
2329                         <md-progress-linear
2330                           md-mode="determinate"
2331                           value="{{customerAvatarimage.file.progress() * 100}}"
2332                         >
2333                         </md-progress-linear>
2334                       </div>
2335                       <img class="media" flow-img="customerAvatarimage.file" />
2336                     </div>
2337
2338                     <div
2339                       class="chatWebsite-image"
2340                       ng-switch-when="image"
2341                       layout="row"
2342                       layout-align="center center"
2343                     >
2344                       <img class="media" ng-src="{{customerAvatarimage.url}}" />
2345                     </div>
2346                   </div>
2347                 </div>
2348               </div>
2349             </div>
2350           </div>
2351           <div
2352             class="chatWebsite-detail-form-container systemavatar md-background-bg md-whiteframe-1dp"
2353           >
2354             <div class="pb-16" layout="row" layout-align="start center">
2355               <div class="h2 secondary-text" translate="CHAT.SYSTEMAVATAR">
2356                 SYSTEMAVATAR
2357               </div>
2358             </div>
2359             <div
2360               ng-controller="ChatWebsitesystemAvatarController as vm_ca"
2361               ng-init="vm_ca.init(vm.chatWebsite, vm.crudPermissions)"
2362               class="chatWebsite-detail-form-container md-background-bg md-whiteframe-1dp"
2363             >
2364               <div
2365                 id="chatWebsite-image-uploader"
2366                 flow-init="vm_ca.ngFlowOptions"
2367                 flow-name="vm_ca.ngFlow.flow"
2368                 flow-files-submitted="vm_ca.upload()"
2369                 flow-file-added="vm_ca.fileAdded($file)"
2370                 flow-file-success="vm_ca.fileSuccess($file, $message)"
2371                 flow-complete="vm_ca.uploadComplete()"
2372                 flow-drop
2373                 flow-drag-enter="vm_ca.dropping=true"
2374                 flow-drag-leave="vm_ca.dropping=false"
2375                 ng-class="{'dropping':vm.dropping}"
2376               >
2377                 <div
2378                   class="drop-text hint-text"
2379                   layout="row"
2380                   layout-align="center center"
2381                 >
2382                   <span translate="EC.DROP_TO_UPLOAD">Drop to upload</span>
2383                 </div>
2384
2385                 <div
2386                   class="upload-button"
2387                   layout="column"
2388                   layout-align="center center"
2389                 >
2390                   <md-button
2391                     class="md-accent md-raised"
2392                     flow-btn
2393                     ng-disabled="!vm_ca.crudPermissions.canEdit"
2394                   >
2395                     Upload
2396                   </md-button>
2397                   <span class="secondary-text mt-8"
2398                     >You can also drop images here to upload. Only PNG, JPG -
2399                     Max. 8MB</span
2400                   >
2401                 </div>
2402
2403                 <div layout="row" layout-align="start start" layout-wrap>
2404                   <div
2405                     ng-repeat="systemAvatarimage in vm_ca.chatWebsite.images"
2406                     ng-switch="systemAvatarimage.type"
2407                   >
2408                     <div
2409                       class="chatWebsite-image uploading"
2410                       ng-switch-when="uploading"
2411                       layout="row"
2412                       layout-align="center center"
2413                     >
2414                       <div
2415                         class="overlay"
2416                         layout="column"
2417                         layout-align="center center"
2418                       >
2419                         <md-progress-linear
2420                           md-mode="determinate"
2421                           value="{{systemAvatarimage.file.progress() * 100}}"
2422                         >
2423                         </md-progress-linear>
2424                       </div>
2425                       <img class="media" flow-img="systemAvatarimage.file" />
2426                     </div>
2427
2428                     <div
2429                       class="chatWebsite-image"
2430                       ng-switch-when="image"
2431                       layout="row"
2432                       layout-align="center center"
2433                     >
2434                       <img class="media" ng-src="{{systemAvatarimage.url}}" />
2435                     </div>
2436                   </div>
2437                 </div>
2438               </div>
2439             </div>
2440           </div>
2441         </md-tab-body>
2442       </md-tab>
2443       <md-tab>
2444         <md-tab-label>
2445           <span translate="CHAT.ONLINE">ONLINE</span>
2446         </md-tab-label>
2447         <md-tab-body>
2448           <div
2449             class="chatWebsite-detail-form-container chatformonline md-background-bg md-whiteframe-1dp"
2450           >
2451             <div
2452               ng-controller="ChatWebsiteonlineFormController as vm_fonc"
2453               ng-init="vm_fonc.init(vm.chatWebsite)"
2454               class="content"
2455               md-background-bg
2456               layout="column"
2457             >
2458               <div flex>
2459                 <!-- START Buttons -->
2460                 <md-button
2461                   aria-label="comment"
2462                   class="md-fab md-mini"
2463                   ng-click="vm_fonc.add(button.type)"
2464                   ng-repeat="button in vm_fonc.buttons"
2465                 >
2466                   <md-tooltip md-direction="top">{{button.name}}</md-tooltip>
2467                   <md-icon md-font-icon="{{button.icon}}"></md-icon>
2468                 </md-button>
2469                 <!-- END Buttons -->
2470               </div>
2471
2472               <div layout="row" flex>
2473                 <div flex="50">
2474                   <md-card>
2475                     <md-card-title>
2476                       <md-card-title-text>
2477                         <div
2478                           class="pb-16"
2479                           layout="row"
2480                           layout-align="start center"
2481                         >
2482                           <div
2483                             class="h2 secondary-text"
2484                             translate="CHAT.BUILDER"
2485                           >
2486                             BUILDER
2487                           </div>
2488                         </div>
2489                       </md-card-title-text>
2490                     </md-card-title>
2491                     <md-card-content>
2492                       <form name="onlineForm" novalidate>
2493                         <!-- START MapKey -->
2494                         <md-input-container
2495                           class="md-block"
2496                           ng-if="vm_fonc.chatWebsite.onlineForm.items.length"
2497                         >
2498                           <label translate="CHAT.HELP.MAPKEY">MapKey</label>
2499                           <md-select ng-model="vm_fonc.chatWebsite.mapKey">
2500                             <md-option ng-value="null">None</md-option>
2501
2502                             <md-optgroup label="standard">
2503                               <md-option
2504                                 ng-repeat="field in vm_fonc.fields"
2505                                 ng-value="field.key"
2506                                 >{{ field.value }}</md-option
2507                               >
2508                             </md-optgroup>
2509
2510                             <md-optgroup
2511                               label="custom"
2512                               ng-if="vm_fonc.customFields.length"
2513                             >
2514                               <md-option
2515                                 ng-repeat="field in vm_fonc.customFields"
2516                                 ng-value="field.key"
2517                                 >{{ field.value }}</md-option
2518                               >
2519                             </md-optgroup>
2520                           </md-select>
2521                         </md-input-container>
2522                         <!-- END MapKey -->
2523
2524                         <!-- START FromKey -->
2525                         <md-input-container
2526                           class="md-block"
2527                           ng-if="vm_fonc.chatWebsite.onlineForm.items.length"
2528                         >
2529                           <label translate="CHAT.HELP.FROMKEY">FromKey</label>
2530                           <md-select
2531                             ng-model="vm_fonc.chatWebsite.onlineForm.fromKey"
2532                             md-selected-text="vm_fonc.chatWebsite.onlineForm.fromKey != null ? vm_fonc.chatWebsite.onlineForm.items[vm_fonc.chatWebsite.onlineForm.fromKey].props.title : 'None'"
2533                           >
2534                             <md-option ng-value="null">None</md-option>
2535                             <md-option
2536                               ng-repeat="item in vm_fonc.chatWebsite.onlineForm.items"
2537                               ng-if="item.props.title"
2538                               ng-value="$index"
2539                               >{{ item.props.title }}</md-option
2540                             >
2541                           </md-select>
2542                         </md-input-container>
2543                         <!-- END FromKey -->
2544
2545                         <!-- START EXPANSION PANELS -->
2546                         <md-expansion-panel
2547                           ng-repeat="item in vm_fonc.chatWebsite.onlineForm.items track by $index"
2548                           md-component-id="{{'onlinePanel' + $index}}"
2549                         >
2550                           <md-expansion-panel-collapsed md-no-sticky="true">
2551                             <md-button
2552                               class="md-icon-button"
2553                               aria-label="Down"
2554                               ng-click="vm_fonc.down(item, $index); $event.stopPropagation()"
2555                             >
2556                               <md-icon
2557                                 md-font-icon="icon-arrow-down-bold-circle-outline"
2558                               ></md-icon>
2559                             </md-button>
2560                             <md-button
2561                               class="md-icon-button"
2562                               aria-label="Up"
2563                               ng-click="vm_fonc.up(item, $index); $event.stopPropagation()"
2564                             >
2565                               <md-icon
2566                                 md-font-icon="icon-arrow-up-bold-circle-outline"
2567                               ></md-icon>
2568                             </md-button>
2569
2570                             <div class="md-title">
2571                               {{item.props.title || item.type}}
2572                             </div>
2573
2574                             <div flex></div>
2575                             <md-button
2576                               class="md-icon-button"
2577                               aria-label="Collapse"
2578                               ng-click="$panel.collapse()"
2579                             >
2580                               <md-icon
2581                                 md-font-icon="icon-chevron-down"
2582                               ></md-icon>
2583                             </md-button>
2584                           </md-expansion-panel-collapsed>
2585
2586                           <md-expansion-panel-expanded>
2587                             <md-expansion-panel-header>
2588                               <md-button
2589                                 class="md-icon-button"
2590                                 aria-label="Down"
2591                                 ng-click="vm_fonc.down(item, $index)"
2592                               >
2593                                 <md-icon
2594                                   md-font-icon="icon-arrow-down-bold-circle-outline"
2595                                 ></md-icon>
2596                               </md-button>
2597                               <md-button
2598                                 class="md-icon-button"
2599                                 aria-label="Up"
2600                                 ng-click="vm_fonc.up(item, $index)"
2601                               >
2602                                 <md-icon
2603                                   md-font-icon="icon-arrow-up-bold-circle-outline"
2604                                 ></md-icon>
2605                               </md-button>
2606
2607                               <div class="md-title">
2608                                 {{item.props.title || item.type}}
2609                               </div>
2610
2611                               <div flex></div>
2612
2613                               <md-button
2614                                 class="md-icon-button md-warn"
2615                                 aria-label="Remove"
2616                                 ng-click="vm_fonc.remove($index)"
2617                               >
2618                                 <md-icon md-font-icon="icon-delete"></md-icon>
2619                               </md-button>
2620                               <md-button
2621                                 class="md-icon-button"
2622                                 aria-label="Collapse"
2623                                 ng-click="$panel.collapse()"
2624                               >
2625                                 <md-icon
2626                                   md-font-icon="icon-chevron-up"
2627                                 ></md-icon>
2628                               </md-button>
2629                             </md-expansion-panel-header>
2630
2631                             <md-expansion-panel-content>
2632                               <form-item
2633                                 type="{{item.type}}"
2634                                 item="item"
2635                                 index="$index"
2636                               ></form-item>
2637
2638                               <md-input-container class="md-block">
2639                                 <label translate="CHAT.VARIABLE"
2640                                   >Variable</label
2641                                 >
2642                                 <md-select ng-model="item.variable">
2643                                   <md-option ng-value="null">None</md-option>
2644                                   <md-option
2645                                     ng-repeat="variable in vm_fonc.variables"
2646                                     ng-value="variable.name"
2647                                     >{{ variable.name }}</md-option
2648                                   >
2649                                 </md-select>
2650                               </md-input-container>
2651
2652                               <md-input-container class="md-block">
2653                                 <label translate="CHAT.CM_FIELD"
2654                                   >Contact Manager Field</label
2655                                 >
2656                                 <md-select ng-model="item.cmField">
2657                                   <md-option ng-value="null">None</md-option>
2658
2659                                   <md-optgroup label="standard">
2660                                     <md-option
2661                                       ng-repeat="field in vm_fonc.fields"
2662                                       ng-value="field.key"
2663                                       >{{ field.value }}</md-option
2664                                     >
2665                                   </md-optgroup>
2666
2667                                   <md-optgroup
2668                                     label="custom"
2669                                     ng-if="vm_fonc.customFields.length"
2670                                   >
2671                                     <md-option
2672                                       ng-repeat="field in vm_fonc.customFields"
2673                                       ng-value="field.key"
2674                                       >{{ field.value }}</md-option
2675                                     >
2676                                   </md-optgroup>
2677                                 </md-select>
2678                               </md-input-container>
2679                             </md-expansion-panel-content>
2680                           </md-expansion-panel-expanded>
2681                         </md-expansion-panel>
2682                         <!-- END EXPANSION PANELS -->
2683                       </form>
2684                     </md-card-content>
2685                   </md-card>
2686                 </div>
2687                 <div flex="50">
2688                   <md-card>
2689                     <md-card-title>
2690                       <md-card-title-text>
2691                         <div
2692                           class="pb-16"
2693                           layout="row"
2694                           layout-align="start center"
2695                         >
2696                           <div
2697                             class="h2 secondary-text"
2698                             translate="CHAT.PREVIEW"
2699                           >
2700                             PREVIEW
2701                           </div>
2702                         </div>
2703                       </md-card-title-text>
2704                     </md-card-title>
2705                     <md-card-content flex>
2706                       <form-view
2707                         form="vm_fonc.chatWebsite.onlineForm"
2708                         flex="100"
2709                       ></form-view>
2710                     </md-card-content>
2711                   </md-card>
2712                 </div>
2713               </div>
2714             </div>
2715           </div>
2716         </md-tab-body>
2717       </md-tab>
2718       <md-tab>
2719         <md-tab-label>
2720           <span translate="CHAT.OFFLINE">OFFLINE</span>
2721         </md-tab-label>
2722         <md-tab-body>
2723           <div
2724             class="chatWebsite-detail-form-container chatformoffline md-background-bg md-whiteframe-1dp"
2725           >
2726             <div
2727               ng-controller="ChatWebsiteofflineFormController as vm_fonc"
2728               ng-init="vm_fonc.init(vm.chatWebsite)"
2729               class="content"
2730               md-background-bg
2731               layout="column"
2732             >
2733               <div flex>
2734                 <!-- START Buttons -->
2735                 <md-button
2736                   aria-label="comment"
2737                   class="md-fab md-mini"
2738                   ng-click="vm_fonc.add(button.type)"
2739                   ng-repeat="button in vm_fonc.buttons"
2740                 >
2741                   <md-tooltip md-direction="top">{{button.name}}</md-tooltip>
2742                   <md-icon md-font-icon="{{button.icon}}"></md-icon>
2743                 </md-button>
2744                 <!-- END Buttons -->
2745               </div>
2746
2747               <div layout="row" flex>
2748                 <div flex="50">
2749                   <md-card>
2750                     <md-card-title>
2751                       <md-card-title-text>
2752                         <div
2753                           class="pb-16"
2754                           layout="row"
2755                           layout-align="start center"
2756                         >
2757                           <div
2758                             class="h2 secondary-text"
2759                             translate="CHAT.BUILDER"
2760                           >
2761                             BUILDER
2762                           </div>
2763                         </div>
2764                       </md-card-title-text>
2765                     </md-card-title>
2766                     <md-card-content>
2767                       <form name="offlineForm" novalidate>
2768                         <md-input-container class="md-block">
2769                           <md-switch
2770                             ng-model="vm_fonc.chatWebsite.forwardOffline"
2771                             aria-label="forwardOffline"
2772                             ><span translate="CHAT.FORWARD_OFFLINE"
2773                               >forwardOffline</span
2774                             ></md-switch
2775                           >
2776                         </md-input-container>
2777
2778                         <md-input-container
2779                           class="md-block"
2780                           ng-if="vm_fonc.chatWebsite.forwardOffline"
2781                         >
2782                           <label translate="CHAT.FORWARD_OFFLINE_ADDRESS"
2783                             >FORWARD OFFLINE ADDRESS</label
2784                           >
2785                           <input
2786                             type="text"
2787                             name="forwardOfflineAddress"
2788                             ng-model="vm_fonc.chatWebsite.forwardOfflineAddress"
2789                           />
2790                           <div class="hint">
2791                             <span translate="CHAT.HELP.FORWARD_OFFLINE"></span>
2792                           </div>
2793                           <div
2794                             ng-messages="offlineForm['forwardOfflineAddress'].$error"
2795                             ng-show="offlineForm['forwardOfflineAddress'].$touched"
2796                             role="alert"
2797                           >
2798                             <div ng-message="email">
2799                               <span translate="CHAT.ERRORS.EMAIL_MUST_BE_VALID"
2800                                 >forwardOffline must be a valid e-mail
2801                                 address</span
2802                               >
2803                             </div>
2804                           </div>
2805                         </md-input-container>
2806
2807                         <md-input-container class="md-block">
2808                           <md-switch
2809                             ng-model="vm_fonc.chatWebsite.openNewInteraction"
2810                             aria-label="openNewInteraction"
2811                           >
2812                             <span translate="CHAT.OPEN_NEW_INTERACTION"
2813                               >openNewInteraction</span
2814                             >
2815                           </md-switch>
2816                         </md-input-container>
2817
2818                         <md-input-container
2819                           class="md-block"
2820                           ng-if="vm_fonc.chatWebsite.openNewInteraction"
2821                         >
2822                           <label translate="CHAT.EMAIL_ACCOUNT"
2823                             >Email account</label
2824                           >
2825                           <md-select
2826                             ng-model="vm_fonc.chatWebsite.MailAccountId"
2827                           >
2828                             <md-option ng-value="null">None</md-option>
2829                             <md-option
2830                               ng-repeat="account in vm_fonc.email_accounts"
2831                               ng-value="account.id"
2832                               >{{ account.name }}</md-option
2833                             >
2834                           </md-select>
2835                         </md-input-container>
2836
2837                         <!-- START MapKey -->
2838                         <md-input-container
2839                           class="md-block"
2840                           ng-if="vm_fonc.chatWebsite.offlineForm.items.length"
2841                         >
2842                           <label translate="CHAT.HELP.MAPKEY">MapKey</label>
2843                           <md-select
2844                             ng-model="vm_fonc.chatWebsite.mapKeyOffline"
2845                           >
2846                             <md-option ng-value="null">None</md-option>
2847
2848                             <md-optgroup label="standard">
2849                               <md-option
2850                                 ng-repeat="field in vm_fonc.fields"
2851                                 ng-value="field.key"
2852                                 >{{ field.value }}</md-option
2853                               >
2854                             </md-optgroup>
2855
2856                             <md-optgroup
2857                               label="custom"
2858                               ng-if="vm_fonc.customFields.length"
2859                             >
2860                               <md-option
2861                                 ng-repeat="field in vm_fonc.customFields"
2862                                 ng-value="field.key"
2863                                 >{{ field.value }}</md-option
2864                               >
2865                             </md-optgroup>
2866                           </md-select>
2867                         </md-input-container>
2868                         <!-- END MapKey -->
2869
2870                         <!-- START FromKey -->
2871                         <md-input-container
2872                           class="md-block"
2873                           ng-if="vm_fonc.chatWebsite.offlineForm.items.length"
2874                         >
2875                           <label translate="CHAT.HELP.FROMKEY">FromKey</label>
2876                           <md-select
2877                             ng-model="vm_fonc.chatWebsite.offlineForm.fromKey"
2878                             md-selected-text="vm_fonc.chatWebsite.offlineForm.fromKey != null ? vm_fonc.chatWebsite.offlineForm.items[vm_fonc.chatWebsite.offlineForm.fromKey].props.title : 'None'"
2879                           >
2880                             <md-option ng-value="null">None</md-option>
2881                             <md-option
2882                               ng-repeat="item in vm_fonc.chatWebsite.offlineForm.items"
2883                               ng-if="item.props.title"
2884                               ng-value="$index"
2885                               >{{ item.props.title }}</md-option
2886                             >
2887                           </md-select>
2888                         </md-input-container>
2889                         <!-- END FromKey -->
2890
2891                         <!-- START EXPANSION PANELS -->
2892                         <md-expansion-panel
2893                           ng-repeat="item in vm_fonc.chatWebsite.offlineForm.items track by $index"
2894                           md-component-id="{{'offlinePanel' + $index}}"
2895                         >
2896                           <md-expansion-panel-collapsed md-no-sticky="true">
2897                             <md-button
2898                               class="md-icon-button"
2899                               aria-label="Down"
2900                               ng-click="vm_fonc.down(item, $index); $event.stopPropagation()"
2901                             >
2902                               <md-icon
2903                                 md-font-icon="icon-arrow-down-bold-circle-outline"
2904                               ></md-icon>
2905                             </md-button>
2906                             <md-button
2907                               class="md-icon-button"
2908                               aria-label="Up"
2909                               ng-click="vm_fonc.up(item, $index); $event.stopPropagation()"
2910                             >
2911                               <md-icon
2912                                 md-font-icon="icon-arrow-up-bold-circle-outline"
2913                               ></md-icon>
2914                             </md-button>
2915
2916                             <div class="md-title">
2917                               {{item.props.title || item.type}}
2918                             </div>
2919
2920                             <div flex></div>
2921                             <md-button
2922                               class="md-icon-button"
2923                               aria-label="Collapse"
2924                               ng-click="$panel.collapse()"
2925                             >
2926                               <md-icon
2927                                 md-font-icon="icon-chevron-down"
2928                               ></md-icon>
2929                             </md-button>
2930                           </md-expansion-panel-collapsed>
2931
2932                           <md-expansion-panel-expanded>
2933                             <md-expansion-panel-header>
2934                               <md-button
2935                                 class="md-icon-button"
2936                                 aria-label="Down"
2937                                 ng-click="vm_fonc.down(item, $index)"
2938                               >
2939                                 <md-icon
2940                                   md-font-icon="icon-arrow-down-bold-circle-outline"
2941                                 ></md-icon>
2942                               </md-button>
2943                               <md-button
2944                                 class="md-icon-button"
2945                                 aria-label="Up"
2946                                 ng-click="vm_fonc.up(item, $index)"
2947                               >
2948                                 <md-icon
2949                                   md-font-icon="icon-arrow-up-bold-circle-outline"
2950                                 ></md-icon>
2951                               </md-button>
2952
2953                               <div class="md-title">
2954                                 {{item.props.title || item.type}}
2955                               </div>
2956
2957                               <div flex></div>
2958
2959                               <md-button
2960                                 class="md-icon-button md-warn"
2961                                 aria-label="Remove"
2962                                 ng-click="vm_fonc.remove($index)"
2963                               >
2964                                 <md-icon md-font-icon="icon-delete"></md-icon>
2965                               </md-button>
2966                               <md-button
2967                                 class="md-icon-button"
2968                                 aria-label="Collapse"
2969                                 ng-click="$panel.collapse()"
2970                               >
2971                                 <md-icon
2972                                   md-font-icon="icon-chevron-up"
2973                                 ></md-icon>
2974                               </md-button>
2975                             </md-expansion-panel-header>
2976
2977                             <md-expansion-panel-content>
2978                               <form-item
2979                                 type="{{item.type}}"
2980                                 item="item"
2981                                 index="$index"
2982                               ></form-item>
2983
2984                               <md-input-container class="md-block">
2985                                 <label translate="CHAT.CM_FIELD"
2986                                   >Contact Manager Field</label
2987                                 >
2988                                 <md-select ng-model="item.cmField">
2989                                   <md-option ng-value="null">None</md-option>
2990
2991                                   <md-optgroup label="standard">
2992                                     <md-option
2993                                       ng-repeat="field in vm_fonc.fields"
2994                                       ng-value="field.key"
2995                                       >{{ field.value }}</md-option
2996                                     >
2997                                   </md-optgroup>
2998
2999                                   <md-optgroup
3000                                     label="custom"
3001                                     ng-if="vm_fonc.customFields.length"
3002                                   >
3003                                     <md-option
3004                                       ng-repeat="field in vm_fonc.customFields"
3005                                       ng-value="field.key"
3006                                       >{{ field.value }}</md-option
3007                                     >
3008                                   </md-optgroup>
3009                                 </md-select>
3010                               </md-input-container>
3011                             </md-expansion-panel-content>
3012                           </md-expansion-panel-expanded>
3013                         </md-expansion-panel>
3014                         <!-- END EXPANSION PANELS -->
3015                       </form>
3016                     </md-card-content>
3017                   </md-card>
3018                 </div>
3019                 <div flex="50">
3020                   <md-card>
3021                     <md-card-title>
3022                       <md-card-title-text>
3023                         <div
3024                           class="pb-16"
3025                           layout="row"
3026                           layout-align="start center"
3027                         >
3028                           <div
3029                             class="h2 secondary-text"
3030                             translate="CHAT.PREVIEW"
3031                           >
3032                             PREVIEW
3033                           </div>
3034                         </div>
3035                       </md-card-title-text>
3036                     </md-card-title>
3037                     <md-card-content flex>
3038                       <form-view
3039                         form="vm_fonc.chatWebsite.offlineForm"
3040                         flex="100"
3041                       ></form-view>
3042                     </md-card-content>
3043                   </md-card>
3044                 </div>
3045               </div>
3046             </div>
3047           </div>
3048         </md-tab-body>
3049       </md-tab>
3050       <md-tab>
3051         <md-tab-label>
3052           <span translate="CHAT.PROACTIVEACTIONS">PROACTIVEACTIONS</span>
3053         </md-tab-label>
3054         <md-tab-body>
3055           <div
3056             class="chatWebsite-detail-form-container proactive md-background-bg md-whiteframe-1dp"
3057           >
3058             <div
3059               ng-controller="ChatWebsiteProactiveActionsController as vm_dc"
3060               ng-init="vm_dc.init(vm.chatWebsite, vm.crudPermissions)"
3061             >
3062               <md-toolbar
3063                 class="md-table-toolbar md-default"
3064                 ng-hide="vm_dc.selectedChatWebsiteProactiveActions.length"
3065               >
3066                 <div class="md-toolbar-tools">
3067                   <span class="md-subhead" translate="CHAT.PROACTIVEACTIONS"
3068                     >ProactiveActions</span
3069                   >
3070                   <ms-search-bar
3071                     on-search="vm_dc.getChatWebsiteProactiveActions()"
3072                     query="vm_dc.query"
3073                     display-on="vm_dc.isSearchBarVisible"
3074                     ng-disabled="vm_dc.query.search"
3075                     debounce="300"
3076                     direction="down"
3077                     min-chars="5"
3078                   ></ms-search-bar>
3079                   <div flex></div>
3080                   <md-button
3081                     ng-if="vm_dc.crudPermissions.canEdit"
3082                     class="md-icon-button"
3083                     ng-click="vm_dc.createOrEditChatWebsiteChatProactiveAction($event)"
3084                     aria-label="add chatProactiveAction"
3085                     translate
3086                     translate-attr-label="CHAT.ADD_CHATPROACTIVEACTION"
3087                   >
3088                     <md-icon md-font-icon="icon-plus"></md-icon>
3089                   </md-button>
3090                 </div>
3091               </md-toolbar>
3092               <md-toolbar
3093                 class="md-table-toolbar md-accent"
3094                 ng-show="vm_dc.selectedChatWebsiteProactiveActions.length"
3095               >
3096                 <div class="md-toolbar-tools">
3097                   <span class="md-subhead"
3098                     >{{vm_dc.selectedChatWebsiteProactiveActions.length}}
3099                     {{vm_dc.selectedChatWebsiteProactiveActions.length > 1 ?
3100                     'items' : 'item'}} selected</span
3101                   >
3102                   <div flex></div>
3103                   <button
3104                     class="md-icon-button"
3105                     ng-csv="vm_dc.exportSelectedChatWebsiteProactiveActions"
3106                     csv-label="true"
3107                     filename="chatWebsites.csv"
3108                   >
3109                     <md-icon md-font-icon="icon-file-excel"></md-icon>
3110                   </button>
3111                   <md-button
3112                     ng-if="vm_dc.crudPermissions.canDelete"
3113                     class="md-icon-button"
3114                     ng-click="vm_dc.deleteSelectedChatWebsiteProactiveActions($event)"
3115                     aria-label="delete selected"
3116                     translate
3117                     translate-attr-label="CHAT.DELETE_SELECTED"
3118                   >
3119                     <md-icon md-font-icon="icon-delete"></md-icon>
3120                   </md-button>
3121                 </div>
3122               </md-toolbar>
3123               <md-table-container class="font-size-12">
3124                 <table
3125                   md-table
3126                   md-row-select
3127                   multiple
3128                   ng-model="vm_dc.selectedChatWebsiteProactiveActions"
3129                   md-progress="vm_dc.promise"
3130                 >
3131                   <thead
3132                     md-head
3133                     md-order="vm_dc.query.sort"
3134                     md-on-reorder="vm_dc.getChatWebsiteProactiveActions"
3135                   >
3136                     <tr md-row>
3137                       <th md-column md-order-by="id">
3138                         {{ 'CHAT.ID' | translate }}
3139                       </th>
3140                       <th md-column md-order-by="name">
3141                         {{ 'CHAT.NAME' | translate }}
3142                       </th>
3143                       <th md-column md-order-by="type">
3144                         {{ 'CHAT.TYPE' | translate }}
3145                       </th>
3146                       <th md-column md-order-by="selector">
3147                         {{ 'CHAT.SELECTOR' | translate }}
3148                       </th>
3149                       <th md-column md-order-by="timeout">
3150                         {{ 'CHAT.TIMEOUT' | translate }}
3151                       </th>
3152                       <th md-column md-order-by="createdAt">
3153                         {{ 'CHAT.CREATED_AT' | translate }}
3154                       </th>
3155                       <th md-column width="10px"></th>
3156                     </tr>
3157                   </thead>
3158                   <tbody md-body>
3159                     <tr
3160                       md-row
3161                       md-select="chatProactiveAction"
3162                       md-select-id="id"
3163                       ng-repeat="chatProactiveAction in vm_dc.chatWebsiteProactiveActions.rows"
3164                     >
3165                       <td
3166                         ng-click="vm_dc.createOrEditChatWebsiteChatProactiveAction($event, chatProactiveAction)"
3167                         md-cell
3168                       >
3169                         {{chatProactiveAction.id}}
3170                       </td>
3171                       <td
3172                         ng-click="vm_dc.createOrEditChatWebsiteChatProactiveAction($event, chatProactiveAction)"
3173                         md-cell
3174                       >
3175                         {{chatProactiveAction.name}}
3176                       </td>
3177                       <td
3178                         ng-click="vm_dc.createOrEditChatWebsiteChatProactiveAction($event, chatProactiveAction)"
3179                         md-cell
3180                       >
3181                         {{ 'CHAT.' +
3182                         vm_dc.arraytype[chatProactiveAction.type].option |
3183                         uppercase | translate }}
3184                       </td>
3185
3186                       <td
3187                         ng-click="vm_dc.createOrEditChatWebsiteChatProactiveAction($event, chatProactiveAction)"
3188                         md-cell
3189                       >
3190                         {{chatProactiveAction.selector}}
3191                       </td>
3192                       <td
3193                         ng-click="vm_dc.createOrEditChatWebsiteChatProactiveAction($event, chatProactiveAction)"
3194                         md-cell
3195                       >
3196                         {{chatProactiveAction.timeout}}
3197                       </td>
3198                       <td
3199                         ng-click="vm_dc.createOrEditChatWebsiteChatProactiveAction($event, chatProactiveAction)"
3200                         md-cell
3201                       >
3202                         {{ chatProactiveAction.createdAt | formatdate }}
3203                       </td>
3204                       <td
3205                         md-cell
3206                         class="actions"
3207                         ng-if="!vm_dc.crudPermissions.readOnly"
3208                       >
3209                         <md-menu>
3210                           <md-button
3211                             class="md-icon-button"
3212                             aria-label="More"
3213                             translate
3214                             translate-attr-aria-label="CHAT.MORE"
3215                             ng-click="$mdMenu.open($event)"
3216                           >
3217                             <md-icon
3218                               md-font-icon="icon-dots-vertical"
3219                             ></md-icon>
3220                           </md-button>
3221
3222                           <md-menu-content width="3">
3223                             <md-menu-item ng-if="vm_dc.crudPermissions.canEdit">
3224                               <md-button
3225                                 ng-click="vm_dc.createOrEditChatWebsiteChatProactiveAction($event, chatProactiveAction)"
3226                                 translate="CHAT.EDIT_CHATPROACTIVEACTION"
3227                               >
3228                                 Edit ChatProactiveAction
3229                               </md-button>
3230                             </md-menu-item>
3231                             <md-menu-item
3232                               ng-if="vm_dc.crudPermissions.canDelete"
3233                             >
3234                               <md-button
3235                                 ng-click="vm_dc.deleteConfirm(chatProactiveAction, $event)"
3236                                 translate="CHAT.DELETE_CHATPROACTIVEACTION"
3237                               >
3238                                 Delete ChatProactiveAction
3239                               </md-button>
3240                             </md-menu-item>
3241                           </md-menu-content>
3242                         </md-menu>
3243                       </td>
3244                     </tr>
3245                     <tr
3246                       md-row
3247                       ng-if="!vm_dc.chatWebsiteProactiveActions.rows.length"
3248                     >
3249                       <td md-cell colspan="8">
3250                         <div layout="row" layout-align="center center">
3251                           <span
3252                             class="text-boxed-light"
3253                             translate="CHAT.NO_CHATPROACTIVEACTION_AVAILABLE"
3254                             >No chatproactiveaction available</span
3255                           >
3256                         </div>
3257                       </td>
3258                     </tr>
3259                   </tbody>
3260                 </table>
3261               </md-table-container>
3262               <md-table-pagination
3263                 md-label="{page: '{{'CHAT.PAGE' | translate}}:', rowsPerPage: '{{'CHAT.ROWSPERPAGE' | translate}}:', of: '{{'CHAT.OF' | translate}}'}"
3264                 md-limit="vm_dc.query.limit"
3265                 md-limit-options="[10, 15, 20, 50, 100, 250]"
3266                 md-page="vm_dc.query.page"
3267                 md-total="{{vm_dc.chatWebsiteProactiveActions.count}}"
3268                 md-on-paginate="vm_dc.getChatWebsiteProactiveActions"
3269                 md-page-select
3270               ></md-table-pagination>
3271             </div>
3272           </div>
3273         </md-tab-body>
3274       </md-tab>
3275       <md-tab>
3276         <md-tab-label>
3277           <span translate="CHAT.DISPOSITIONS">DISPOSITIONS</span>
3278         </md-tab-label>
3279         <md-tab-body>
3280           <div
3281             ng-controller="ChatWebsiteDispositionsController as vm_dc"
3282             ng-init="vm_dc.init(vm.chatWebsite, vm.crudPermissions)"
3283           >
3284             <div layout="row">
3285               <div class="column" flex="20">
3286                 <md-card class="mt-0">
3287                   <md-card-content>
3288                     <button
3289                       layout-align="center center"
3290                       md-mini-fab
3291                       ng-click="vm_dc.query.level = null; vm_dc.getDispositions()"
3292                     >
3293                       <div layout="row" layout-align="start center">
3294                         <md-icon md-font-icon="icon-refresh"></md-icon>
3295                         <span class="ph-5"
3296                           >{{ 'TOOLS.ALL_DISPOSITIONS' | translate }}</span
3297                         >
3298                       </div>
3299                     </button>
3300                   </md-card-content>
3301                 </md-card>
3302                 <md-card>
3303                   <md-card-content>
3304                     <md-input-container class="md-block" flex-gt-sm="">
3305                       <label translate="TOOLS.SELECT_LEVEL"
3306                         >Select a level</label
3307                       >
3308                       <md-select
3309                         placeholder="{{ 'TOOLS.SELECT_LEVEL' | translate }}"
3310                         ng-model="vm_dc.query.level"
3311                         ng-change="vm_dc.getDispositions()"
3312                       >
3313                         <md-option ng-value="null"
3314                           ><em translate="TOOLS.ALL">All</em></md-option
3315                         >
3316                         <md-option
3317                           ng-value="key"
3318                           ng-repeat="(key, value) in vm_dc.levels"
3319                           >{{ value }}</md-option
3320                         >
3321                       </md-select>
3322                     </md-input-container>
3323                   </md-card-content>
3324                 </md-card>
3325               </div>
3326               <div
3327                 class="chatWebsite-detail-form-container chatdispositions md-background-bg md-whiteframe-1dp"
3328                 flex="80"
3329               >
3330                 <md-toolbar
3331                   class="md-table-toolbar md-default"
3332                   ng-hide="vm_dc.selectedChatWebsiteDispositions.length"
3333                 >
3334                   <div class="md-toolbar-tools">
3335                     <span class="md-subhead" translate="CHAT.DISPOSITIONS"
3336                       >Dispositions</span
3337                     >
3338                     <ms-search-bar
3339                       on-search="vm_dc.getDispositions()"
3340                       query="vm_dc.query"
3341                       debounce="300"
3342                       direction="down"
3343                     ></ms-search-bar>
3344                     <div flex></div>
3345                     <md-button
3346                       ng-if="vm_dc.crudPermissions.canEdit"
3347                       class="md-icon-button"
3348                       ng-click="vm_dc.createOrEditDisposition($event)"
3349                       aria-label="Add chat dispositions"
3350                       translate
3351                       translate-attr-label="CHAT.ADD_DISPOSITION"
3352                     >
3353                       <md-icon md-font-icon="icon-plus"></md-icon>
3354                     </md-button>
3355                   </div>
3356                 </md-toolbar>
3357                 <md-toolbar
3358                   class="md-table-toolbar md-accent"
3359                   ng-show="vm_dc.selectedDispositions.length"
3360                 >
3361                   <div class="md-toolbar-tools">
3362                     <span class="md-subhead"
3363                       >{{vm_dc.selectedDispositions.length}}
3364                       {{vm_dc.selectedDispositions.length > 1 ? 'items' :
3365                       'item'}} selected</span
3366                     >
3367                     <div flex></div>
3368                     <button
3369                       class="md-icon-button"
3370                       ng-csv="vm_dc.exportSelectedDispositions"
3371                       csv-label="true"
3372                       filename="chatWebsites.csv"
3373                     >
3374                       <md-icon md-font-icon="icon-file-excel"></md-icon>
3375                     </button>
3376                     <md-button
3377                       ng-if="vm_dc.crudPermissions.canDelete"
3378                       class="md-icon-button"
3379                       ng-click="vm_dc.deleteSelectedDispositions($event)"
3380                       aria-label="delete selected"
3381                       translate
3382                       translate-attr-label="CHAT.DELETE_SELECTED"
3383                     >
3384                       <md-icon md-font-icon="icon-delete"></md-icon>
3385                     </md-button>
3386                   </div>
3387                 </md-toolbar>
3388                 <md-table-container>
3389                   <table
3390                     md-table
3391                     md-row-select
3392                     multiple
3393                     ng-model="vm_dc.selectedDispositions"
3394                     md-progress="vm_dc.promise"
3395                   >
3396                     <thead
3397                       md-head
3398                       md-order="vm_dc.query.sort"
3399                       md-on-reorder="vm_dc.getDispositions"
3400                     >
3401                       <tr md-row>
3402                         <th md-column md-order-by="id">
3403                           {{ 'CHAT.ID' | translate }}
3404                         </th>
3405                         <th md-column md-order-by="level">
3406                           {{ 'TOOLS.LEVEL' | translate }}
3407                         </th>
3408                         <th md-column md-order-by="name">
3409                           {{ 'CHAT.NAME' | translate }}
3410                         </th>
3411                         <th md-column md-order-by="description">
3412                           {{ 'CHAT.DESCRIPTION' | translate }}
3413                         </th>
3414                         <th md-column width="10px"></th>
3415                       </tr>
3416                     </thead>
3417                     <tbody md-body>
3418                       <tr md-row ng-hide="vm_dc.dispositions.rows.length">
3419                         <td md-cell colspan="5">
3420                           <div layout="row" layout-align="center center">
3421                             <span translate="CHAT.NO_AVAILABLE_INFO"
3422                               >No Available Info</span
3423                             >
3424                           </div>
3425                         </td>
3426                       </tr>
3427                       <tr
3428                         md-row
3429                         md-select="disposition"
3430                         md-select-id="id"
3431                         ng-repeat="disposition in vm_dc.dispositions.rows"
3432                       >
3433                         <td
3434                           ng-click="vm_dc.createOrEditDisposition($event, disposition)"
3435                           md-cell
3436                           class="id"
3437                         >
3438                           {{disposition.id}}
3439                         </td>
3440                         <td
3441                           ng-click="vm_dc.createOrEditDisposition($event, disposition)"
3442                           md-cell
3443                           class="level"
3444                         >
3445                           {{ vm_dc.levels[disposition.level] }}
3446                         </td>
3447                         <td
3448                           ng-click="vm_dc.createOrEditDisposition($event, disposition)"
3449                           md-cell
3450                           class="name"
3451                         >
3452                           {{disposition.name}}
3453                         </td>
3454                         <td
3455                           ng-click="vm_dc.createOrEditDisposition($event, disposition)"
3456                           md-cell
3457                           class="description"
3458                         >
3459                           {{disposition.description}}
3460                         </td>
3461                         <td
3462                           md-cell
3463                           class="actions"
3464                           ng-if="!vm_dc.crudPermissions.readOnly"
3465                         >
3466                           <md-menu>
3467                             <md-button
3468                               class="md-icon-button"
3469                               aria-label="More"
3470                               translate
3471                               translate-attr-aria-label="CHAT.MORE"
3472                               ng-click="$mdMenu.open($event)"
3473                             >
3474                               <md-icon
3475                                 md-font-icon="icon-dots-vertical"
3476                               ></md-icon>
3477                             </md-button>
3478                             <md-menu-content width="3">
3479                               <!-- SUBACTIONS -->
3480                               <!-- ACTIONS -->
3481                               <md-menu-item
3482                                 ng-if="vm_dc.crudPermissions.canEdit"
3483                               >
3484                                 <md-button
3485                                   ng-click="vm_dc.createOrEditDisposition($event, disposition)"
3486                                   translate="TOOLS.EDIT_DISPOSITION"
3487                                 >
3488                                   Edit Disposition
3489                                 </md-button>
3490                               </md-menu-item>
3491                               <!-- SUBACTIONS -->
3492                               <!-- ACTIONS -->
3493                               <md-menu-item
3494                                 ng-if="vm_dc.crudPermissions.canDelete"
3495                               >
3496                                 <md-button
3497                                   ng-click="vm_dc.deleteConfirm(disposition, $event)"
3498                                   translate="TOOLS.DELETE_DISPOSITION"
3499                                 >
3500                                   Delete Disposition
3501                                 </md-button>
3502                               </md-menu-item>
3503                             </md-menu-content>
3504                           </md-menu>
3505                         </td>
3506                       </tr>
3507                     </tbody>
3508                   </table>
3509                 </md-table-container>
3510                 <md-table-pagination
3511                   md-label="{page: '{{'CHAT.PAGE' | translate}}:', rowsPerPage: '{{'CHAT.ROWSPERPAGE' | translate}}:', of: '{{'CHAT.OF' | translate}}'}"
3512                   md-limit="vm_dc.query.limit"
3513                   md-limit-options="[10, 15, 20, 50, 100, 250]"
3514                   md-page="vm_dc.query.page"
3515                   md-total="{{vm_dc.dispositions.count}}"
3516                   md-on-paginate="vm_dc.getDispositions"
3517                   md-page-select
3518                 >
3519                 </md-table-pagination>
3520               </div>
3521             </div>
3522           </div>
3523         </md-tab-body>
3524       </md-tab>
3525       <md-tab>
3526         <md-tab-label>
3527           <span translate="CHAT.CANNEDANSWERS">CANNEDANSWERS</span>
3528         </md-tab-label>
3529         <md-tab-body>
3530           <div
3531             class="chatWebsite-detail-form-container chatcannedanswers md-background-bg md-whiteframe-1dp"
3532           >
3533             <div
3534               ng-controller="ChatWebsiteChatCannedAnswersController as vm_dc"
3535               ng-init="vm_dc.init(vm.chatWebsite, vm.crudPermissions)"
3536             >
3537               <md-toolbar
3538                 class="md-table-toolbar md-default"
3539                 ng-hide="vm_dc.selectedChatWebsiteChatCannedAnswers.length"
3540               >
3541                 <div class="md-toolbar-tools">
3542                   <span class="md-subhead" translate="CHAT.CHATCANNEDANSWERS"
3543                     >ChatCannedAnswers</span
3544                   >
3545                   <ms-search-bar
3546                     on-search="vm_dc.getChatWebsiteChatCannedAnswers()"
3547                     query="vm_dc.query"
3548                     display-on="vm_dc.isSearchBarVisible"
3549                     ng-disabled="vm_dc.query.search"
3550                     debounce="300"
3551                     direction="down"
3552                     min-chars="5"
3553                   ></ms-search-bar>
3554                   <div flex></div>
3555                   <md-button
3556                     ng-if="vm_dc.crudPermissions.canEdit"
3557                     class="md-icon-button"
3558                     ng-click="vm_dc.createOrEditChatWebsiteChatCannedAnswer($event)"
3559                     aria-label="add chatCannedAnswer"
3560                     translate
3561                     translate-attr-label="CHAT.ADD_CHATCANNEDANSWER"
3562                   >
3563                     <md-icon md-font-icon="icon-plus"></md-icon>
3564                   </md-button>
3565                 </div>
3566               </md-toolbar>
3567               <md-toolbar
3568                 class="md-table-toolbar md-accent"
3569                 ng-show="vm_dc.selectedChatWebsiteChatCannedAnswers.length"
3570               >
3571                 <div class="md-toolbar-tools">
3572                   <span class="md-subhead"
3573                     >{{vm_dc.selectedChatWebsiteChatCannedAnswers.length}}
3574                     {{vm_dc.selectedChatWebsiteChatCannedAnswers.length > 1 ?
3575                     'items' : 'item'}} selected</span
3576                   >
3577                   <div flex></div>
3578                   <button
3579                     class="md-icon-button"
3580                     ng-csv="vm_dc.exportSelectedChatWebsiteChatCannedAnswers"
3581                     csv-label="true"
3582                     filename="chatWebsites.csv"
3583                   >
3584                     <md-icon md-font-icon="icon-file-excel"></md-icon>
3585                   </button>
3586                   <md-button
3587                     ng-if="vm_dc.crudPermissions.canDelete"
3588                     class="md-icon-button"
3589                     ng-click="vm_dc.deleteSelectedChatWebsiteChatCannedAnswers($event)"
3590                     aria-label="delete selected"
3591                     translate
3592                     translate-attr-label="CHAT.DELETE_SELECTED"
3593                   >
3594                     <md-icon md-font-icon="icon-delete"></md-icon>
3595                   </md-button>
3596                 </div>
3597               </md-toolbar>
3598               <md-table-container class="font-size-12">
3599                 <table
3600                   md-table
3601                   md-row-select
3602                   multiple
3603                   ng-model="vm_dc.selectedChatWebsiteChatCannedAnswers"
3604                   md-progress="vm_dc.promise"
3605                 >
3606                   <thead
3607                     md-head
3608                     md-order="vm_dc.query.sort"
3609                     md-on-reorder="vm_dc.getChatWebsiteChatCannedAnswers"
3610                   >
3611                     <tr md-row>
3612                       <th md-column md-order-by="id">
3613                         {{ 'CHAT.ID' | translate }}
3614                       </th>
3615                       <th md-column md-order-by="key">
3616                         {{ 'CHAT.KEY' | translate }}
3617                       </th>
3618                       <th md-column md-order-by="value">
3619                         {{ 'CHAT.VALUE' | translate }}
3620                       </th>
3621                       <th md-column md-order-by="description">
3622                         {{ 'CHAT.DESCRIPTION' | translate }}
3623                       </th>
3624                       <th md-column md-order-by="createdAt">
3625                         {{ 'CHAT.CREATED_AT' | translate }}
3626                       </th>
3627                       <th md-column width="10px"></th>
3628                     </tr>
3629                   </thead>
3630                   <tbody md-body>
3631                     <tr
3632                       md-row
3633                       md-select="chatCannedAnswer"
3634                       md-select-id="id"
3635                       ng-repeat="chatCannedAnswer in vm_dc.chatWebsiteChatCannedAnswers.rows"
3636                     >
3637                       <td
3638                         ng-click="vm_dc.createOrEditChatWebsiteChatCannedAnswer($event, chatCannedAnswer)"
3639                         md-cell
3640                       >
3641                         {{chatCannedAnswer.id}}
3642                       </td>
3643                       <td
3644                         ng-click="vm_dc.createOrEditChatWebsiteChatCannedAnswer($event, chatCannedAnswer)"
3645                         md-cell
3646                       >
3647                         {{chatCannedAnswer.key}}
3648                       </td>
3649                       <td
3650                         ng-click="vm_dc.createOrEditChatWebsiteChatCannedAnswer($event, chatCannedAnswer)"
3651                         md-cell
3652                       >
3653                         {{chatCannedAnswer.value}}
3654                       </td>
3655                       <td
3656                         ng-click="vm_dc.createOrEditChatWebsiteChatCannedAnswer($event, chatCannedAnswer)"
3657                         md-cell
3658                       >
3659                         {{chatCannedAnswer.description}}
3660                       </td>
3661                       <td
3662                         ng-click="vm_dc.createOrEditChatWebsiteChatCannedAnswer($event, chatCannedAnswer)"
3663                         md-cell
3664                       >
3665                         {{ chatCannedAnswer.createdAt | formatdate }}
3666                       </td>
3667                       <td
3668                         md-cell
3669                         class="actions"
3670                         ng-if="!vm_dc.crudPermissions.readOnly"
3671                       >
3672                         <md-menu>
3673                           <md-button
3674                             class="md-icon-button"
3675                             aria-label="More"
3676                             translate
3677                             translate-attr-aria-label="CHAT.MORE"
3678                             ng-click="$mdMenu.open($event)"
3679                           >
3680                             <md-icon
3681                               md-font-icon="icon-dots-vertical"
3682                             ></md-icon>
3683                           </md-button>
3684
3685                           <md-menu-content width="3">
3686                             <md-menu-item ng-if="vm_dc.crudPermissions.canEdit">
3687                               <md-button
3688                                 ng-click="vm_dc.createOrEditChatWebsiteChatCannedAnswer($event, chatCannedAnswer)"
3689                                 translate="CHAT.EDIT_CHATCANNEDANSWER"
3690                               >
3691                                 Edit ChatCannedAnswer
3692                               </md-button>
3693                             </md-menu-item>
3694                             <md-menu-item
3695                               ng-if="vm_dc.crudPermissions.canDelete"
3696                             >
3697                               <md-button
3698                                 ng-click="vm_dc.deleteConfirm(chatCannedAnswer, $event)"
3699                                 translate="CHAT.DELETE_CHATCANNEDANSWER"
3700                               >
3701                                 Delete ChatCannedAnswer
3702                               </md-button>
3703                             </md-menu-item>
3704                           </md-menu-content>
3705                         </md-menu>
3706                       </td>
3707                     </tr>
3708                     <tr
3709                       md-row
3710                       ng-if="!vm_dc.chatWebsiteChatCannedAnswers.rows.length"
3711                     >
3712                       <td md-cell colspan="7">
3713                         <div layout="row" layout-align="center center">
3714                           <span
3715                             class="text-boxed-light"
3716                             translate="CHAT.NO_CHATCANNEDANSWER_AVAILABLE"
3717                             >No chatcannedanswer available</span
3718                           >
3719                         </div>
3720                       </td>
3721                     </tr>
3722                   </tbody>
3723                 </table>
3724               </md-table-container>
3725               <md-table-pagination
3726                 md-label="{page: '{{'CHAT.PAGE' | translate}}:', rowsPerPage: '{{'CHAT.ROWSPERPAGE' | translate}}:', of: '{{'CHAT.OF' | translate}}'}"
3727                 md-limit="vm_dc.query.limit"
3728                 md-limit-options="[10, 15, 20, 50, 100, 250]"
3729                 md-page="vm_dc.query.page"
3730                 md-total="{{vm_dc.chatWebsiteChatCannedAnswers.count}}"
3731                 md-on-paginate="vm_dc.getChatWebsiteChatCannedAnswers"
3732                 md-page-select
3733               ></md-table-pagination>
3734             </div>
3735           </div>
3736         </md-tab-body>
3737       </md-tab>
3738       <md-tab>
3739         <md-tab-label>
3740           <span translate="CHAT.VIDEO">VIDEO</span>
3741         </md-tab-label>
3742         <md-tab-body>
3743           <div
3744             class="chatWebsite-detail-form-container vidaoo md-background-bg md-whiteframe-1dp"
3745           >
3746             <div class="pb-16" layout="row" layout-align="start center">
3747               <div class="h2 secondary-text" translate="CHAT.VIDAOO">
3748                 VIDAOO
3749               </div>
3750             </div>
3751             <form name="vidaooForm" novalidate>
3752               <md-input-container class="md-block">
3753                 <md-switch
3754                   ng-model="vm.chatWebsite.vidaooEscalation"
3755                   aria-label="vidaooEscalation"
3756                   ng-disabled="!vm.crudPermissions.canEdit"
3757                   ><span translate="CHAT.VIDAOOESCALATION"
3758                     >vidaooEscalation</span
3759                   ></md-switch
3760                 >
3761               </md-input-container>
3762               <md-input-container
3763                 ng-if="vm.chatWebsite.vidaooEscalation == true"
3764                 class="md-block"
3765               >
3766                 <label translate="CHAT.VIDAOOAPIKEY">vidaooApiKey</label>
3767                 <input
3768                   type="text"
3769                   name="vidaooApiKey"
3770                   ng-model="vm.chatWebsite.vidaooApiKey"
3771                   ng-required="true"
3772                   ng-disabled="!vm.crudPermissions.canEdit"
3773                 />
3774
3775                 <div
3776                   ng-messages="vidaooForm['vidaooApiKey'].$error"
3777                   ng-show="vidaooForm['vidaooApiKey'].$touched"
3778                   role="alert"
3779                 >
3780                   <div ng-message="required">
3781                     <span translate="CHAT.ERRORS.VIDAOOAPIKEY_REQUIRED"
3782                       >vidaooApiKey field is required</span
3783                     >
3784                   </div>
3785                 </div>
3786               </md-input-container>
3787             </form>
3788           </div>
3789         </md-tab-body>
3790       </md-tab>
3791       <md-tab>
3792         <md-tab-label>
3793           <span translate="CHAT.ACTIONS">ACTIONS</span>
3794         </md-tab-label>
3795         <md-tab-body>
3796           <div
3797             class="chatWebsite-detail-form-container actions md-background-bg md-whiteframe-1dp"
3798           >
3799             <div
3800               ng-controller="ChatWebsiteActionsController as vm_ac"
3801               ng-init="vm_ac.init(vm.chatWebsite, vm.crudPermissions)"
3802               class="content"
3803               md-background-bg
3804               layout="row"
3805               layout-align="start start"
3806             >
3807               <!-- SIDENAV -->
3808               <div
3809                 class="navigation-simple sidenav main-sidenav md-background-bg md-whiteframe-1dp"
3810                 ms-scroll
3811                 layout="column"
3812                 flex="20"
3813                 ng-if="vm_ac.crudPermissions.canEdit"
3814               >
3815                 <!-- SIDENAV CONTENT -->
3816                 <md-list class="no-padding">
3817                   <md-subheader class="md-no-sticky">
3818                     <span translate="VOICE.APPLICATIONS_LIST">
3819                       Applications List
3820                     </span>
3821                   </md-subheader>
3822                 </md-list>
3823                 <md-divider></md-divider>
3824                 <md-list ng-sortable="vm_ac.list">
3825                   <md-list-item class="handle" ng-repeat="a in vm_ac.apps">
3826                     <md-icon md-font-icon="{{a.icon}}" class="s16"></md-icon>
3827                     <p
3828                       class="text-truncate"
3829                       translate="CHAT.{{(a.alias || a.appType) | uppercase}}"
3830                     >
3831                       {{a.alias || a.appType}}
3832                     </p>
3833                   </md-list-item>
3834                 </md-list>
3835                 <!-- / SIDENAV CONTENT -->
3836               </div>
3837               <!-- / SIDENAV -->
3838               <div flex></div>
3839               <!-- MAIN -->
3840               <div
3841                 class="main scrollable md-background-bg md-whiteframe-1dp"
3842                 ms-scroll
3843                 layout="column"
3844                 flex="{{vm_ac.crudPermissions.canEdit ? 75 : 100}}"
3845               >
3846                 <md-toolbar
3847                   class="md-table-toolbar md-default"
3848                   ng-hide="vm_ac.selectedChatWebsiteApps.length"
3849                 >
3850                   <div class="md-toolbar-tools">
3851                     <span class="md-subhead">Drag & Drop Routing</span>
3852                     <div flex></div>
3853                     <ms-search-bar
3854                       on-search="vm_ac.getChatWebsiteApps()"
3855                       query="vm_ac.query"
3856                       debounce="300"
3857                     ></ms-search-bar>
3858                   </div>
3859                 </md-toolbar>
3860                 <md-toolbar
3861                   class="md-table-toolbar md-accent"
3862                   ng-show="vm_ac.selectedChatWebsiteApps.length"
3863                 >
3864                   <div class="md-toolbar-tools">
3865                     <span class="md-subhead"
3866                       >{{vm_ac.selectedChatWebsiteApps.length}}
3867                       {{vm_ac.selectedChatWebsiteApps.length > 1 ? 'items' :
3868                       'item'}} selected</span
3869                     >
3870                     <div flex></div>
3871                     <md-button
3872                       ng-if="vm_ac.crudPermissions.canDelete"
3873                       class="md-icon-button"
3874                       ng-click="vm_ac.deleteSelectedChatWebsiteApps($event)"
3875                       aria-label="delete selected"
3876                       translate
3877                       translate-attr-label="CHAT.DELETE_SELECTED"
3878                     >
3879                       <md-icon md-font-icon="icon-delete"></md-icon>
3880                     </md-button>
3881                   </div>
3882                 </md-toolbar>
3883
3884                 <!-- QUEUES TABLE -->
3885                 <md-table-container>
3886                   <table
3887                     md-table
3888                     md-row-select
3889                     multiple
3890                     ng-model="vm_ac.selectedChatWebsiteApps"
3891                   >
3892                     <thead md-head>
3893                       <tr md-row>
3894                         <th md-column width="10px"></th>
3895                         <th md-column width="10px">
3896                           <span translate="VOICE.PRIORITY">Priority</span>
3897                         </th>
3898                         <th md-column>
3899                           <span>Type</span>
3900                         </th>
3901                         <th md-column>
3902                           <span>Appdata</span>
3903                         </th>
3904                         <th md-column>
3905                           <span>Interval</span>
3906                         </th>
3907                         <th md-column width="10px"></th>
3908                         <th md-column width="10px"></th>
3909                       </tr>
3910                     </thead>
3911                     <tbody md-body ng-sortable="vm_ac.applications">
3912                       <tr
3913                         md-row
3914                         md-select="app"
3915                         md-select-id="id"
3916                         ng-repeat="app in vm_ac.chatWebsiteApps.rows | filter: vm_ac.query.filter"
3917                       >
3918                         <td md-cell>
3919                           <md-icon
3920                             md-font-icon="icon-drag-vertical"
3921                             class="s16 handle"
3922                           ></md-icon>
3923                         </td>
3924                         <td
3925                           md-cell
3926                           ng-click="vm_ac.editChatWebsiteApp($event, $index)"
3927                         >
3928                           <span>{{app.priority}}</span>
3929                         </td>
3930                         <td
3931                           md-cell
3932                           ng-click="vm_ac.editChatWebsiteApp($event, $index)"
3933                         >
3934                           {{app.app.toLowerCase() === 'agi' ? 'Cally-Square' :
3935                           app.app | ucfirst}}<span
3936                             ng-if="app.appType.toLowerCase() === 'custom'"
3937                             >*</span
3938                           >
3939                         </td>
3940                         <td
3941                           md-cell
3942                           ng-click="vm_ac.editChatWebsiteApp($event, $index)"
3943                         >
3944                           <span class="text-truncate" style="width: 200px"
3945                             >{{app.appdata}}</span
3946                           >
3947                         </td>
3948                         <td
3949                           md-cell
3950                           ng-click="vm_ac.editInterval($event, $index)"
3951                         >
3952                           {{app.IntervalId ? 'From List' : app.interval}}
3953                         </td>
3954                         <td md-cell>
3955                           <md-button
3956                             ng-click="vm_ac.editInterval($event, $index)"
3957                             class="md-icon-button"
3958                             aria-label="Interval"
3959                           >
3960                             <md-icon md-font-icon="icon-timer"></md-icon>
3961                             <md-tooltip>
3962                               {{app.IntervalId ? 'From List' : (app.interval ===
3963                               '*,*,*,*' ? 'Always' : 'Custom')}}
3964                             </md-tooltip>
3965                           </md-button>
3966                         </td>
3967                         <td
3968                           md-cell
3969                           class="actions"
3970                           ng-if="!vm_ac.crudPermissions.readOnly"
3971                         >
3972                           <md-menu>
3973                             <md-button
3974                               class="md-icon-button"
3975                               aria-label="More"
3976                               translate
3977                               translate-attr-aria-label="VOICE.MORE"
3978                               ng-click="$mdMenu.open($event)"
3979                             >
3980                               <md-icon
3981                                 md-font-icon="icon-dots-vertical"
3982                               ></md-icon>
3983                             </md-button>
3984
3985                             <md-menu-content width="3">
3986                               <md-menu-item
3987                                 ng-if="vm_ac.crudPermissions.canEdit"
3988                               >
3989                                 <md-button
3990                                   ng-click="vm_ac.editChatWebsiteApp($event, $index)"
3991                                   translate="VOICE.EDIT_APP"
3992                                 >
3993                                   Edit App
3994                                 </md-button>
3995                               </md-menu-item>
3996                               <md-menu-item
3997                                 ng-if="vm_ac.crudPermissions.canEdit"
3998                               >
3999                                 <md-button
4000                                   ng-click="vm_ac.editInterval($event, $index)"
4001                                   translate="VOICE.EDIT_INTERVAL"
4002                                 >
4003                                   Edit Interval
4004                                 </md-button>
4005                               </md-menu-item>
4006                               <md-menu-item
4007                                 ng-if="vm_ac.crudPermissions.canDelete"
4008                               >
4009                                 <md-button
4010                                   ng-click="vm_ac.deleteConfirm(app, $index, $event)"
4011                                   translate="VOICE.DELETE_APP"
4012                                 >
4013                                   Delete App
4014                                 </md-button>
4015                               </md-menu-item>
4016                             </md-menu-content>
4017                           </md-menu>
4018                         </td>
4019                       </tr>
4020                       <tr md-row ng-hide="vm_ac.chatWebsiteApps.rows.length">
4021                         <td md-cell colspan="7">
4022                           <span
4023                             class="text-boxed-light"
4024                             translate="VOICE.NO_APPS_AVAILABLE"
4025                             >No apps available</span
4026                           >
4027                         </td>
4028                       </tr>
4029                     </tbody>
4030                   </table>
4031                 </md-table-container>
4032                 <!-- / QUEUES TABLE -->
4033
4034                 <!-- NO RESULTS -->
4035
4036                 <!-- / NO RESULTS -->
4037               </div>
4038               <!-- / MAIN -->
4039             </div>
4040           </div>
4041         </md-tab-body>
4042       </md-tab>
4043       <md-tab>
4044         <md-tab-label>
4045           <span translate="CHAT.INTERACTIONS">INTERACTIONS</span>
4046         </md-tab-label>
4047         <md-tab-body>
4048           <div
4049             class="chatWebsite-detail-form-container interactions md-background-bg md-whiteframe-1dp"
4050           >
4051             <div
4052               ng-controller="ChatWebsiteInteractionsController as vm_dc"
4053               ng-init="vm_dc.init(vm.chatWebsite, vm.crudPermissions)"
4054             >
4055               <md-toolbar
4056                 class="md-table-toolbar md-default"
4057                 ng-hide="vm_dc.selectedChatWebsiteInteractions.length"
4058               >
4059                 <div class="md-toolbar-tools">
4060                   <span class="md-subhead" translate="CHAT.INTERACTIONS"
4061                     >Interactions</span
4062                   >
4063                   <ms-search-bar
4064                     on-search="vm_dc.getChatWebsiteInteractions()"
4065                     query="vm_dc.query"
4066                     display-on="vm_dc.isSearchBarVisible"
4067                     ng-disabled="vm_dc.query.search"
4068                     debounce="300"
4069                     direction="down"
4070                     min-chars="5"
4071                   ></ms-search-bar>
4072                   <div flex></div>
4073                   <ms-quick-filter
4074                     filters="vm_dc.quickFilters"
4075                     query="vm_dc.query"
4076                     search="vm_dc.getChatWebsiteInteractions()"
4077                   ></ms-quick-filter>
4078                   <div layout="column">
4079                     <md-button
4080                       class="md-icon-button advanced-search"
4081                       ng-class="{ 'md-fab md-mini md-accent-bg': vm_dc.query.search }"
4082                       aria-label="Filter"
4083                       translate
4084                       translate-attr-aria-label="DASHBOARDS.FILTER"
4085                       ng-click="vm_dc.openAdvancedSearch()"
4086                     >
4087                       <md-icon
4088                         md-font-icon="{{ vm_dc.query.search ? 'icon-filter' : 'icon-filter-outline' }}"
4089                         ng-class="{ 'blink': vm_dc.query.search }"
4090                       ></md-icon>
4091                     </md-button>
4092                   </div>
4093                   <md-button
4094                     class="md-icon-button"
4095                     ng-click="vm_dc.getChatWebsiteInteractions()"
4096                     aria-label="refresh Interactions"
4097                     translate
4098                     translate-attr-label="CHAT.REFRESH_INTERACTIONS"
4099                   >
4100                     <md-icon md-font-icon="icon-refresh"></md-icon>
4101                   </md-button>
4102                 </div>
4103               </md-toolbar>
4104               <md-toolbar
4105                 class="md-table-toolbar md-accent"
4106                 ng-show="vm_dc.selectedChatWebsiteInteractions.length"
4107               >
4108                 <div class="md-toolbar-tools">
4109                   <span class="md-subhead"
4110                     >{{vm_dc.selectedChatWebsiteInteractions.length}}
4111                     {{vm_dc.selectedChatWebsiteInteractions.length > 1 ? 'items'
4112                     : 'item'}} selected</span
4113                   >
4114                   <div flex></div>
4115                   <button
4116                     class="md-icon-button"
4117                     ng-csv="vm_dc.exportSelectedChatWebsiteInteractions"
4118                     csv-label="true"
4119                     filename="chatWebsites.csv"
4120                   >
4121                     <md-icon md-font-icon="icon-file-excel"></md-icon>
4122                   </button>
4123                   <md-button
4124                     ng-if="vm_dc.crudPermissions.canDelete"
4125                     class="md-icon-button"
4126                     ng-click="vm_dc.deleteSelectedChatWebsiteInteractions($event)"
4127                     aria-label="delete selected"
4128                     translate
4129                     translate-attr-label="CHAT.DELETE_SELECTED"
4130                   >
4131                     <md-icon md-font-icon="icon-delete"></md-icon>
4132                   </md-button>
4133                 </div>
4134               </md-toolbar>
4135               <md-table-container class="font-size-12">
4136                 <table
4137                   md-table
4138                   md-row-select
4139                   multiple
4140                   ng-model="vm_dc.selectedChatWebsiteInteractions"
4141                   md-progress="vm_dc.promise"
4142                 >
4143                   <thead
4144                     md-head
4145                     md-order="vm_dc.query.sort"
4146                     md-on-reorder="vm_dc.getChatWebsiteInteractions"
4147                   >
4148                     <tr md-row>
4149                       <th md-column md-order-by="id">
4150                         {{ 'CHAT.ID' | translate }}
4151                       </th>
4152                       <th md-column class="no-padding">
4153                         <md-icon md-font-icon="icon-eye" class="s16"></md-icon>
4154                       </th>
4155                       <th md-column class="no-padding"></th>
4156                       <th md-column class="no-padding"></th>
4157                       <th md-column md-order-by="contactName">
4158                         {{ 'CHAT.CONTACT' | translate }}
4159                       </th>
4160                       <th md-column md-order-by="createdAt">
4161                         {{ 'CHAT.STARTEDAT' | translate }}
4162                       </th>
4163                       <th md-column md-order-by="lastMsgAt">
4164                         {{ 'CHAT.LASTMESSAGE' | translate }}
4165                       </th>
4166                       <th md-column md-order-by="closed">
4167                         {{ 'CHAT.STATUS' | translate }}
4168                       </th>
4169                       <th md-column>{{ 'CHAT.AGENT' | translate }}</th>
4170                       <th md-column md-order-by="tag">
4171                         {{ 'CHAT.TAGS' | translate }}
4172                       </th>
4173                       <th md-column width="10px"></th>
4174                     </tr>
4175                   </thead>
4176                   <tbody md-body>
4177                     <tr
4178                       md-row
4179                       md-select="interaction"
4180                       md-select-id="id"
4181                       ng-repeat="interaction in vm_dc.chatWebsiteInteractions.rows"
4182                       ng-class="{'text-bold text-italic': interaction.unreadMessages > 0}"
4183                     >
4184                       <td md-cell>{{interaction.id}}</td>
4185                       <td md-cell class="no-padding">
4186                         <div
4187                           ng-if="!interaction.closed && interaction.Users.length"
4188                         >
4189                           <md-icon
4190                             md-font-icon="icon-eye"
4191                             class="s16"
4192                           ></md-icon>
4193                           <md-tooltip>
4194                             <span ng-repeat="user in interaction.Users"
4195                               >{{ user.fullname | translate }}
4196                               <span ng-if="!$last">, </span>
4197                             </span>
4198                           </md-tooltip>
4199                         </div>
4200                       </td>
4201                       <td md-cell class="no-padding">
4202                         <div
4203                           ng-if="interaction.unreadMessages > 0"
4204                           layout="row"
4205                           layout-align="start center"
4206                         >
4207                           <span
4208                             class="badge white-fg md-primary-bg"
4209                             layout-margin
4210                             >{{ interaction.unreadMessages}}</span
4211                           >
4212                         </div>
4213                       </td>
4214                       <td md-cell class="no-padding">
4215                         <div ng-if="interaction.attach">
4216                           <md-icon
4217                             md-font-icon="icon-paperclip"
4218                             class="s16"
4219                           ></md-icon>
4220                         </div>
4221                       </td>
4222                       <td md-cell privacy ng-cloak>
4223                         <div layout="column" layout-align="start start">
4224                           <span
4225                             class="font-size-12 text-truncate contact-text"
4226                             ng-class="{'margin-bottom-0' : interaction.contactInfo}"
4227                             layout-margin
4228                             >{{ interaction.contactName }}</span
4229                           >
4230                           <span
4231                             ng-if="interaction.contactInfo"
4232                             class="font-size-12 text-truncate contact-text margin-top-0"
4233                             layout-margin
4234                             >{{ interaction.contactInfo }}</span
4235                           >
4236                         </div>
4237                       </td>
4238                       <td md-cell>{{ interaction.createdAt | formatdate }}</td>
4239                       <td md-cell>
4240                         <div layout="row">
4241                           <span>
4242                             <md-icon
4243                               md-font-icon="{{interaction.lastMsgDirection == 'in' ? 'icon-arrow-down-bold blue-grey-800-fg' : 'icon-arrow-up-bold blue-grey-300-fg'}}"
4244                             ></md-icon>
4245                           </span>
4246                           <div layout="column" layout-align="center center">
4247                             <span class="text-truncate"
4248                               >{{ interaction.lastMsgAt | formatdate }}</span
4249                             >
4250                           </div>
4251                         </div>
4252                       </td>
4253                       <td md-cell>
4254                         <span ng-if="interaction.closed === 0" class="green-fg">
4255                           {{ 'CHAT.OPENED' | translate }}
4256                           <span ng-if="interaction.substatus">
4257                             - {{ interaction.substatus }}
4258                           </span>
4259                         </span>
4260                         <span ng-if="interaction.closed === 1" class="red-fg">
4261                           {{ 'CHAT.CLOSED' | translate }}
4262                           <span ng-if="interaction.disposition">
4263                             - {{ interaction.thirdDisposition ||
4264                             interaction.secondDisposition ||
4265                             interaction.disposition }}
4266                           </span>
4267                           <md-tooltip class="multiline">
4268                             <div layout="column">
4269                               <div layout="column">
4270                                 <span
4271                                   >{{ 'DASHBOARDS.CLOSED_AT' |
4272                                   translate}}:</span
4273                                 >
4274                                 <span class="text-bold"
4275                                   >{{ interaction.closedAt | formatdate }}</span
4276                                 >
4277                               </div>
4278                               <div
4279                                 ng-if="interaction.disposition"
4280                                 layout="column"
4281                               >
4282                                 <span
4283                                   >{{ 'DASHBOARDS.DISPOSITION' |
4284                                   translate}}:</span
4285                                 >
4286                                 <span class="text-bold"
4287                                   >{{ interaction.disposition }}</span
4288                                 >
4289                               </div>
4290                               <div
4291                                 ng-if="interaction.secondDisposition"
4292                                 layout="column"
4293                               >
4294                                 <span
4295                                   >{{ 'DASHBOARDS.SECOND_LEVEL_DISPOSITION' |
4296                                   translate}}:</span
4297                                 >
4298                                 <span class="text-bold"
4299                                   >{{ interaction.secondDisposition }}</span
4300                                 >
4301                               </div>
4302                               <div
4303                                 ng-if="interaction.thirdDisposition"
4304                                 layout="column"
4305                               >
4306                                 <span
4307                                   >{{ 'DASHBOARDS.THIRD_LEVEL_DISPOSITION' |
4308                                   translate}}:</span
4309                                 >
4310                                 <span class="text-bold"
4311                                   >{{ interaction.thirdDisposition }}</span
4312                                 >
4313                               </div>
4314                             </div>
4315                           </md-tooltip>
4316                         </span>
4317                       </td>
4318
4319                       <td md-cell>{{interaction.Owner.name}}</td>
4320                       <td md-cell>
4321                         <div ng-if="interaction.Tags.length">
4322                           <md-tooltip md-direction="left" layout="row">
4323                             <span ng-repeat="tag in interaction.Tags"
4324                               >{{tag.name}}<span ng-if="!$last">, </span></span
4325                             >
4326                           </md-tooltip>
4327                           <md-icon
4328                             md-font-icon="icon-tag"
4329                             ng-style="{'color': interaction.Tags.length == 1 && interaction.Tags[0].color }"
4330                           >
4331                           </md-icon>
4332                         </div>
4333                       </td>
4334                       <td md-cell class="actions">
4335                         <md-menu>
4336                           <md-button
4337                             class="md-icon-button"
4338                             aria-label="More"
4339                             translate
4340                             translate-attr-aria-label="CHAT.MORE"
4341                             ng-click="$mdMenu.open($event)"
4342                           >
4343                             <md-icon
4344                               md-font-icon="icon-dots-vertical"
4345                             ></md-icon>
4346                           </md-button>
4347
4348                           <md-menu-content width="3">
4349                             <md-menu-item>
4350                               <md-button
4351                                 ng-click="vm_dc.spychatInteraction($event, interaction)"
4352                                 translate="CHAT.SPYINTERACTION"
4353                               >
4354                                 Spy Interaction
4355                               </md-button>
4356                             </md-menu-item>
4357                             <md-menu-item>
4358                               <md-button
4359                                 class="md-primary"
4360                                 ng-click="vm_dc.chatInteractionDownload(interaction, $event, true)"
4361                                 translate="CHAT.DOWNLOAD_WITH_ATTACHMENTS"
4362                               >
4363                                 Download with attachments
4364                               </md-button>
4365                             </md-menu-item>
4366                             <md-menu-item>
4367                               <md-button
4368                                 class="md-primary"
4369                                 ng-click="vm_dc.chatInteractionDownload(interaction, $event)"
4370                                 translate="CHAT.DOWNLOAD_WITHOUT_ATTACHMENTS"
4371                               >
4372                                 Download without attachments
4373                               </md-button>
4374                             </md-menu-item>
4375                             <md-menu-item
4376                               ng-if="vm_dc.crudPermissions.canDelete"
4377                             >
4378                               <md-button
4379                                 ng-click="vm_dc.deleteConfirm(interaction, $event)"
4380                                 translate="CHAT.DELETE_INTERACTION"
4381                               >
4382                                 Delete Interaction
4383                               </md-button>
4384                             </md-menu-item>
4385                           </md-menu-content>
4386                         </md-menu>
4387                       </td>
4388                     </tr>
4389                     <tr
4390                       md-row
4391                       ng-if="!vm_dc.chatWebsiteInteractions.rows.length"
4392                     >
4393                       <td md-cell colspan="12">
4394                         <div layout="row" layout-align="center center">
4395                           <span
4396                             class="text-boxed-light"
4397                             translate="CHAT.NO_INTERACTION_AVAILABLE"
4398                             >No interaction available</span
4399                           >
4400                         </div>
4401                       </td>
4402                     </tr>
4403                   </tbody>
4404                 </table>
4405               </md-table-container>
4406               <md-table-pagination
4407                 md-label="{page: '{{'CHAT.PAGE' | translate}}:', rowsPerPage: '{{'CHAT.ROWSPERPAGE' | translate}}:', of: '{{'CHAT.OF' | translate}}'}"
4408                 md-limit="vm_dc.query.limit"
4409                 md-limit-options="[10, 15, 20, 50, 100, 250]"
4410                 md-page="vm_dc.query.page"
4411                 md-total="{{vm_dc.chatWebsiteInteractions.count}}"
4412                 md-on-paginate="vm_dc.getChatWebsiteInteractions"
4413                 md-page-select
4414               ></md-table-pagination>
4415             </div>
4416           </div>
4417         </md-tab-body>
4418       </md-tab>
4419       <md-tab>
4420         <md-tab-label>
4421           <span translate="CHAT.OFFLINEMESSAGES">OFFLINEMESSAGES</span>
4422         </md-tab-label>
4423         <md-tab-body>
4424           <div
4425             class="chatWebsite-detail-form-container offlinemessages md-background-bg md-whiteframe-1dp"
4426           >
4427             <div
4428               ng-controller="ChatWebsiteOfflineMessagesController as vm_dc"
4429               ng-init="vm_dc.init(vm.chatWebsite, vm.crudPermissions)"
4430             >
4431               <md-toolbar
4432                 class="md-table-toolbar md-default"
4433                 ng-hide="vm_dc.selectedChatWebsiteOfflineMessages.length"
4434               >
4435                 <div class="md-toolbar-tools">
4436                   <span class="md-subhead" translate="CHAT.OFFLINEMESSAGES"
4437                     >OfflineMessages</span
4438                   >
4439                   <ms-search-bar
4440                     on-search="vm_dc.getChatWebsiteOfflineMessages()"
4441                     query="vm_dc.query"
4442                     display-on="vm_dc.isSearchBarVisible"
4443                     ng-disabled="vm_dc.query.search"
4444                     debounce="300"
4445                     direction="down"
4446                     min-chars="5"
4447                   ></ms-search-bar>
4448                   <div flex></div>
4449                 </div>
4450               </md-toolbar>
4451               <md-toolbar
4452                 class="md-table-toolbar md-accent"
4453                 ng-show="vm_dc.selectedChatWebsiteOfflineMessages.length"
4454               >
4455                 <div class="md-toolbar-tools">
4456                   <span class="md-subhead"
4457                     >{{vm_dc.selectedChatWebsiteOfflineMessages.length}}
4458                     {{vm_dc.selectedChatWebsiteOfflineMessages.length > 1 ?
4459                     'items' : 'item'}} selected</span
4460                   >
4461                   <div flex></div>
4462                   <button
4463                     class="md-icon-button"
4464                     ng-csv="vm_dc.exportSelectedChatWebsiteOfflineMessages"
4465                     csv-label="true"
4466                     filename="chatWebsites.csv"
4467                   >
4468                     <md-icon md-font-icon="icon-file-excel"></md-icon>
4469                   </button>
4470                   <md-button
4471                     ng-if="vm_dc.crudPermissions.canDelete"
4472                     class="md-icon-button"
4473                     ng-click="vm_dc.deleteSelectedChatWebsiteOfflineMessages($event)"
4474                     aria-label="delete selected"
4475                     translate
4476                     translate-attr-label="CHAT.DELETE_SELECTED"
4477                   >
4478                     <md-icon md-font-icon="icon-delete"></md-icon>
4479                   </md-button>
4480                 </div>
4481               </md-toolbar>
4482               <md-table-container class="font-size-12">
4483                 <table
4484                   md-table
4485                   md-row-select
4486                   multiple
4487                   ng-model="vm_dc.selectedChatWebsiteOfflineMessages"
4488                   md-progress="vm_dc.promise"
4489                 >
4490                   <thead
4491                     md-head
4492                     md-order="vm_dc.query.sort"
4493                     md-on-reorder="vm_dc.getChatWebsiteOfflineMessages"
4494                   >
4495                     <tr md-row>
4496                       <th md-column md-order-by="id">
4497                         {{ 'CHAT.ID' | translate }}
4498                       </th>
4499                       <th md-column>{{ 'CHAT.CONTACT' | translate }}</th>
4500                       <th md-column md-order-by="createdAt">
4501                         {{ 'CHAT.CREATED_AT' | translate }}
4502                       </th>
4503                       <th md-column width="10px"></th>
4504                     </tr>
4505                   </thead>
4506                   <tbody md-body>
4507                     <tr
4508                       md-row
4509                       md-select="offlineMessage"
4510                       md-select-id="id"
4511                       ng-repeat="offlineMessage in vm_dc.chatWebsiteOfflineMessages.rows"
4512                     >
4513                       <td md-cell>{{offlineMessage.id}}</td>
4514                       <td md-cell privacy ng-cloak>
4515                         <md-icon
4516                           ng-if="offlineMessage.Attachments.length > 0"
4517                           class="no-margin material-icons"
4518                           aria-label="Attachment"
4519                           >attach_file</md-icon
4520                         ><span
4521                           ng-if="offlineMessage.Attachments.length === 0"
4522                           style="width: 24px; display: inline-block"
4523                         ></span
4524                         >{{offlineMessage.Contact.firstName}}
4525                       </td>
4526                       <td md-cell>
4527                         {{ offlineMessage.createdAt | formatdate }}
4528                       </td>
4529                       <td md-cell class="actions">
4530                         <md-menu>
4531                           <md-button
4532                             class="md-icon-button"
4533                             aria-label="More"
4534                             translate
4535                             translate-attr-aria-label="CHAT.MORE"
4536                             ng-click="$mdOpenMenu($event)"
4537                           >
4538                             <md-icon
4539                               md-font-icon="icon-dots-vertical"
4540                             ></md-icon>
4541                           </md-button>
4542
4543                           <md-menu-content width="3">
4544                             <md-menu-item>
4545                               <md-button
4546                                 ng-click="vm_dc.showOfflineMessageChatWebsiteOfflineMessage($event, offlineMessage)"
4547                                 translate="CHAT.SHOW_OFFLINEMESSAGE"
4548                               >
4549                                 SHOW OfflineMessage
4550                               </md-button>
4551                             </md-menu-item>
4552                             <md-menu-item
4553                               ng-if="vm_dc.crudPermissions.canDelete"
4554                             >
4555                               <md-button
4556                                 ng-click="vm_dc.deleteConfirm(offlineMessage, $event)"
4557                                 translate="CHAT.DELETE_OFFLINEMESSAGE"
4558                               >
4559                                 Delete OfflineMessage
4560                               </md-button>
4561                             </md-menu-item>
4562                           </md-menu-content>
4563                         </md-menu>
4564                       </td>
4565                     </tr>
4566                     <tr
4567                       md-row
4568                       ng-if="!vm_dc.chatWebsiteOfflineMessages.rows.length"
4569                     >
4570                       <td md-cell colspan="5">
4571                         <div layout="row" layout-align="center center">
4572                           <span
4573                             class="text-boxed-light"
4574                             translate="CHAT.NO_OFFLINEMESSAGE_AVAILABLE"
4575                             >No offlinemessage available</span
4576                           >
4577                         </div>
4578                       </td>
4579                     </tr>
4580                   </tbody>
4581                 </table>
4582               </md-table-container>
4583               <md-table-pagination
4584                 md-label="{page: '{{'CHAT.PAGE' | translate}}:', rowsPerPage: '{{'CHAT.ROWSPERPAGE' | translate}}:', of: '{{'CHAT.OF' | translate}}'}"
4585                 md-limit="vm_dc.query.limit"
4586                 md-limit-options="[10, 15, 20, 50, 100, 250]"
4587                 md-page="vm_dc.query.page"
4588                 md-total="{{vm_dc.chatWebsiteOfflineMessages.count}}"
4589                 md-on-paginate="vm_dc.getChatWebsiteOfflineMessages"
4590                 md-page-select
4591               ></md-table-pagination>
4592             </div>
4593           </div>
4594         </md-tab-body>
4595       </md-tab>
4596     </md-tabs>
4597   </div>
4598   <!-- / CONTENT -->
4599 </div>