<div class="btn-toolbar bibiscoNotSelectableText richtexteditor-toolbar">
  <div class="btn-group">
    <button class="btn btn-default btn-sm" ng-click="$ctrl.undo()"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.undo'+$ctrl.os | translate}}">
      <i class="fa fa-rotate-left" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-sm" ng-click="$ctrl.redo()"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.redo'+$ctrl.os | translate}}">
      <i class="fa fa-rotate-right" aria-hidden="true"></i>
    </button>
  </div>
  <div class="btn-group">
    <button class="btn btn-default btn-sm" ng-click="$ctrl.print()"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.print'+$ctrl.os | translate}}">
      <i class="fa fa-print" aria-hidden="true"></i>
    </button>
  </div>
  <div class="btn-group">
    <button class="btn btn-default btn-sm" ng-click="$ctrl.copy()"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.copy'+$ctrl.os | translate}}">
      <i class="fa fa-copy" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-sm" ng-click="$ctrl.cut()"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.cut'+$ctrl.os | translate}}">
      <i class="fa fa-cut" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-sm" ng-click="$ctrl.paste()"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.paste'+$ctrl.os | translate}}">
      <i class="fa fa-paste" aria-hidden="true"></i>
    </button>
  </div>
  <div class="btn-group" data-toggle="buttons-checkbox">
    <button class="btn btn-default btn-sm" ng-click="$ctrl.bold()"
      ng-class="{ 'active': $ctrl.boldactive == true }"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.bold'+$ctrl.os | translate}}">
      <i class="fa fa-bold" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-sm" ng-click="$ctrl.italic()"
      ng-class="{ 'active': $ctrl.italicactive == true }"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.italic'+$ctrl.os | translate}}">
      <i class="fa fa-italic" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-sm" ng-click="$ctrl.underline()"
      ng-class="{ 'active': $ctrl.underlineactive == true }"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.underline'+$ctrl.os | translate}}">
      <i class="fa fa-underline" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-sm" ng-click="$ctrl.strikethrough()"
      ng-class="{ 'active': $ctrl.strikethroughactive == true }"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.strike'+$ctrl.os | translate}}">
      <i class="fa fa-strikethrough" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-sm" ng-click="$ctrl.highlight()"
      ng-class="{ 'active': $ctrl.highlightactive == true }"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.highlightText'+$ctrl.os | translate}}">
      <i class="fa fa-pencil" aria-hidden="true"></i>
    </button>
  </div>
  <div class="btn-group">
    <button class="btn btn-default btn-sm" ng-click="$ctrl.leftguillemet()"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.angledbracketleft'+$ctrl.os | translate}}">
      <strong>&laquo;</strong>
    </button>
    <button class="btn btn-default btn-sm" ng-click="$ctrl.rightguillemet()"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.angledbracketright'+$ctrl.os | translate}}">
      <strong>&raquo;</strong>
    </button>
    <button class="btn btn-default btn-sm" ng-click="$ctrl.emdash()"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.longdash'+$ctrl.os | translate}}">
      <strong>&mdash;</strong>
    </button>
  </div>
  <div class="btn-group" data-toggle="buttons-checkbox">
    <button class="btn btn-default btn-sm" ng-click="$ctrl.orderedlist()"
      ng-class="{ 'active': $ctrl.orderedlistactive == true }"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.numberedlist' | translate}}">
      <i class="fa fa-list-ol" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-sm" ng-click="$ctrl.unorderedlist()"
      ng-class="{ 'active': $ctrl.unorderedlistactive == true }"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.bulletedlist' | translate}}">
      <i class="fa fa-list" aria-hidden="true"></i>
    </button>
  </div>
  <div class="btn-group" data-toggle="buttons-checkbox">
    <button class="btn btn-default btn-sm" ng-click="$ctrl.alignleft()"
      ng-class="{ 'active': $ctrl.alignleftactive == true }"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.justifyleft' | translate}}">
      <i class="fa fa-align-left" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-sm" ng-click="$ctrl.aligncenter()"
      ng-class="{ 'active': $ctrl.aligncenteractive == true }"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.justifycenter' | translate}}">
      <i class="fa fa-align-center" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-sm" ng-click="$ctrl.alignright()"
      ng-class="{ 'active': $ctrl.alignrightactive == true }"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.justifyright' | translate}}">
      <i class="fa fa-align-right" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-sm" ng-click="$ctrl.justify()"
      ng-class="{ 'active': $ctrl.justifyactive == true }"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.justifyblock' | translate}}">
      <i class="fa fa-align-justify" aria-hidden="true"></i>
    </button>
  </div>
  <div class="btn-group">
    <button class="btn btn-default btn-sm" ng-click="$ctrl.toggleFindReplaceToolbar()" 
      ng-class="{ 'btn-info': $ctrl.showfindreplacetoolbar, 'btn-unselected': !$ctrl.showfindreplacetoolbar }" 
      uib-tooltip="{{'find_replace'+$ctrl.os | translate}}">
      <i class="fa fa-search" aria-hidden="true"></i>
    </button>
  </div>
  <div class="btn-group">
    <button class="btn btn-default btn-sm" ng-click="$ctrl.fullscreen()"
      uib-tooltip="{{'full_screen_mode'+$ctrl.os | translate}}">
      <i class="fa fa-arrows-alt" aria-hidden="true"></i>
    </button>
  </div>
  <div class="btn-group">
    <button class="btn btn-default btn-sm" ng-click="$ctrl.opensettings()"
      uib-tooltip="{{'tag.bibiscoRichTextEditor.dialog.richTextEditorSettings.title' | translate}}">
      <i class="fa fa-cog" aria-hidden="true"></i>
    </button>
  </div>
</div>
<div ng-if="$ctrl.showfindreplacetoolbar"
  class="bibiscoNotSelectableText richtexteditor-toolbar richtexteditor-find-replace-toolbar">
  <form class="form-inline">
      
      <div class="form-group">
        <div class="input-group">
          <span class="input-group-btn">
            <button class="btn btn-default btn-sm" data-toggle="buttons-checkbox"
              uib-tooltip="{{'common_case_sensitive' | translate}}"
              ng-click="$ctrl.toggleCaseSensitive()"
              ng-class="{ 'active': $ctrl.casesensitiveactive == true }">
              <strong id="richtexteditorcasesensitiveicon">Aa</strong>
            </button>
            <button class="btn btn-default btn-sm" data-toggle="buttons-checkbox"
              uib-tooltip="{{'common_whole_word' | translate}}"
              ng-click="$ctrl.toggleWholeWord()"
              ng-class="{ 'active': $ctrl.wholewordactive == true }">
              <strong id="richtexteditorwholewordicon">|ab|</strong>
            </button>
          </span>
          <input type="text" class="form-control input-sm" maxlength="30"
            id="richtexteditortexttofind"
            ng-change="$ctrl.texttofindChange()" 
            ng-model="$ctrl.texttofind" placeholder="{{'common_find' | translate}}">
          </input>
          <span class="richtexteditor-find-counter">{{$ctrl.currentmatch}}/{{$ctrl.totalmatch}}</span>
          <span class="input-group-btn">
            <button class="btn btn-default btn-sm" 
              ng-disabled="$ctrl.totalmatch == 0"
              uib-tooltip="{{'previous_match_tooltip' | translate}}"
              ng-click="$ctrl.previousMatch()">
              <i class="fa fa-chevron-up" aria-hidden="true"></i></button>
            <button class="btn btn-default btn-sm" 
              ng-disabled="$ctrl.totalmatch == 0"
              uib-tooltip="{{'next_match_tooltip' | translate}}"
              ng-click="$ctrl.nextMatch()">
              <i class="fa fa-chevron-down" aria-hidden="true"></i></button>
          </span>
        </div>
      </div>
      <div class="form-group">
        <div class="input-group">
          <input type="text" class="form-control input-sm" maxlength="30"
            ng-click="$ctrl.clearCurrentMatch()"
            ng-model="$ctrl.texttoreplace" placeholder="{{'common_replace' | translate}}">
          <span class="input-group-btn">
            <button class="btn btn-default btn-sm"
              ng-disabled="$ctrl.totalmatch == 0 || !$ctrl.texttoreplace"
              uib-tooltip="{{'common_replaceone' | translate}}"
              ng-click="$ctrl.replaceNext()"
              ><i class="fa fa-reply" aria-hidden="true"></i>
            </button>
            <button class="btn btn-default btn-sm"
              ng-disabled="$ctrl.totalmatch == 0 || !$ctrl.texttoreplace"
              uib-tooltip="{{'common_replaceall' | translate}}"
              ng-click="$ctrl.replaceAll()">
              <i class="fa fa-reply-all" aria-hidden="true"></i>
            </button>
          </span>
        </div>
      </div>
    </div>
  </form>
  </div>
</div>
<div id="richtexteditorcontainer" 
  ng-class="{ 'richtexteditor-contenteditable-container-findreplace': $ctrl.showfindreplacetoolbar, 
  'richtexteditor-contenteditable-container-nofindreplace': !$ctrl.showfindreplacetoolbar,
  'fullscreen': $root.fullscreen }" 
  class="richtexteditor-contenteditable-container">
  <div contenteditable="{{$ctrl.contenteditable}}" 
    ng-model="$ctrl.content" ng-change="$ctrl.contentChanged()"
    spellcheck="{{$ctrl.spellcheckenabled}}"
    class="richtexteditor-contenteditable {{$ctrl.fontclass}} {{$ctrl.indentclass}} mousetrap"
    id="richtexteditor"
    ng-blur="$ctrl.blur()"
    ng-click="$ctrl.clickoneditor()"
    ng-keyup="$ctrl.checkselectionstate()"
    ng-mouseup="$ctrl.checkselectionstate()"
    ng-paste="$ctrl.sanitizePaste($event)">
  </div>
  
</div>
<div ng-if="$ctrl.exitfullscreenmessage" class="exitfullscreenmessage">
  <h1>{{'exit_full_screen_mode' | translate}}</h1>
</div>