<div class="motion-toolbar">
    <!-- inline editing -->
    <div class="pull-right inline-editing-activator"
         ng-if="motion.isAllowed('update') && version == motion.getVersion(-1).id && viewChangeRecommendations.mode == 'original'">
        <button ng-if="!inlineEditing.active && change_recommendations.length == 0" ng-click="inlineEditing.enable()"
                class="btn btn-sm btn-default">
            <i class="fa fa-pencil-square-o"></i>
            <translate>Inline editing</translate>
        </button>
        <button ng-if="inlineEditing.active && change_recommendations.length == 0" ng-click="inlineEditing.disable()"
                class="btn btn-sm btn-default">
            <i class="fa fa-times-circle"></i>
            <translate>Inline editing</translate>
        </button>
        <button ng-if="change_recommendations.length > 0" class="btn btn-sm btn-default" disabled
                title="{{ 'Editing the text is not possible anymore once there are change recommendations.' | translate }}">
            <i class="fa fa-pencil-square-o"></i>
            <translate>Inline editing</translate>
        </button>
    </div>

    <div class="toolbar-left {{ lineNumberMode }}">

        <!-- line number mode for resonsive size medium/large (button group) -->
        <div class="btn-group hidden-sm hidden-xs" data-toggle="buttons">
            <span class="btn btn-sm btn-default disabled">
                <i class="fa fa-list-ol" aria-hidden="true"></i>
                <translate>Line numbering</translate>:
            </span>
            <label class="btn btn-sm btn-default" ng-class="{active: (lineNumberMode == 'none')}"
                   ng-click="setLineNumberMode('none')">
                <input type="radio" name="lineNumberMode" value="none" ng-model="lineNumberMode"
                       ng-checked="lineNumberMode == 'none'">
                <translate>none</translate>
            </label>
            <label class="btn btn-sm btn-default" ng-class="{active: (lineNumberMode == 'inline')}"
                   ng-click="setLineNumberMode('inline')">
                <input type="radio" name="lineNumberMode" value="inline" ng-model="lineNumberMode"
                       ng-checked="lineNumberMode == 'inline'">
                <translate>inline</translate>
            </label>
            <label class="btn btn-sm btn-default" ng-class="{active: (lineNumberMode == 'outside')}"
                   ng-click="setLineNumberMode('outside')">
                <input type="radio" name="lineNumberMode" value="outside" ng-model="lineNumberMode"
                       ng-checked="lineNumberMode == 'outside'">
                <translate>outside</translate>
            </label>
        </div>
        <!-- line number mode for resonsive size small/extra small (dropdown) -->
        <div class="dropdown hidden-md hidden-lg" uib-dropdown>
          <button type="button" class="btn btn-default btn-sm" id="dropdownLineMode" uib-dropdown-toggle>
            <i class="fa fa-list-ol" aria-hidden="true"></i>
            <translate>Line numbering</translate>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownLineMode">
            <li>
              <a href="" ng-click="setLineNumberMode('none')">
                <i class="fa fa-check" ng-if="lineNumberMode == 'none'"></i>
                <translate>none</translate>
              </a>
            <li>
              <a href="" ng-click="setLineNumberMode('inline')">
                <i class="fa fa-check" ng-if="lineNumberMode == 'inline'"></i>
                <translate>inline</translate>
              </a>
            <li>
              <a href="" ng-click="setLineNumberMode('outside')">
                <i class="fa fa-check" ng-if="lineNumberMode == 'outside'"></i>
                <translate>outside</translate>
              </a>
          </ul>
        </div>

        <!-- go to line number -->
        <div class="popover-wrapper">
            <span editable-number="gotoLinenumber" e-min="1" e-form="lineNumberForm"
              e-placeholder="{{ 'Line' | translate }}"
              e-formclass="small-form"
              onaftersave="scrollToAndHighlight(gotoLinenumber)">
            </span>
            <button type="button" class="btn btn-sm btn-default"
                ng-click="lineNumberForm.$show()"
                ng-if="lineNumberMode != 'none'"
                uib-tooltip="{{ 'Jump to a given line number' | translate }}"
                tooltip-placement="bottom">
                <i class="fa fa-share"></i>
                <translate>go</translate>
            </button>
        </div>
    </div>
</div>

<!-- View Modes (Original, Diff, Changed) -->
<div class="motion-toolbar" ng-if="change_recommendations.length > 0">
    <div class="toolbar-left">

        <!-- change recommendations for resonsive size medium/large (button group) -->
        <div class="btn-group hidden-sm hidden-xs" data-toggle="buttons">
            <span class="btn btn-sm btn-default disabled">
                <i class="fa fa-edit" aria-hidden="true"></i>
                <translate>Change recommendations</translate>:
            </span>
            <label class="btn btn-sm btn-default" ng-class="{active: (viewChangeRecommendations.mode == 'original')}"
                   ng-click="viewChangeRecommendations.mode = 'original';">
                <input type="radio" name="viewChangeRecommendations.mode" value="none"
                       ng-model="viewChangeRecommendations.mode"
                       ng-checked="viewChangeRecommendations.mode == 'original'">
                <translate>Original version</translate>

            </label>
            <label class="btn btn-sm btn-default" ng-class="{active: (viewChangeRecommendations.mode == 'changed')}"
                   ng-click="viewChangeRecommendations.mode = 'changed'">
                <input type="radio" name="viewChangeRecommendations.mode" value="changed"
                       ng-model="viewChangeRecommendations.mode"
                       ng-checked="viewChangeRecommendations.mode == 'changed'">
                <translate>Changed version</translate>
            </label>
            <label class="btn btn-sm btn-default" ng-class="{active: (viewChangeRecommendations.mode == 'diff')}"
                   ng-click="viewChangeRecommendations.mode = 'diff'">
                <input type="radio" name="viewChangeRecommendations.mode" value="diff" ng-model="lineNumberMode"
                       ng-checked="viewChangeRecommendations.mode == 'diff'">
                <translate>Diff version</translate>
            </label>
            <label class="btn btn-sm btn-default" ng-class="{active: (viewChangeRecommendations.mode == 'agreed')}"
                   ng-click="viewChangeRecommendations.mode = 'agreed'">
                <input type="radio" name="viewChangeRecommendations.mode" value="agreed"
                       ng-model="viewChangeRecommendations.mode"
                       ng-checked="viewChangeRecommendations.mode == 'agreed'">
                <translate>Final version</translate>
            </label>
        </div>

        <!-- change recommendations for resonsive size small/extra small (dropdown) -->
        <div class="dropdown hidden-md hidden-lg" uib-dropdown>
          <button type="button" class="btn btn-default btn-sm" id="dropdownChangeVersion" uib-dropdown-toggle>
            <i class="fa fa-edit"></i>
            <translate>Change recommendations</translate>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownChangeVersion">
            <li>
              <a href="" ng-click="viewChangeRecommendations.mode = 'original'">
                <i class="fa fa-check" ng-if="viewChangeRecommendations.mode == 'original'"></i>
                <translate>Original version</translate>
              </a>
            <li>
              <a href="" ng-click="viewChangeRecommendations.mode = 'changed'">
                <i class="fa fa-check" ng-if="viewChangeRecommendations.mode == 'changed'"></i>
                <translate>Changed version</translate>
              </a>
            <li>
              <a href="" ng-click="viewChangeRecommendations.mode = 'diff'">
                <i class="fa fa-check" ng-if="viewChangeRecommendations.mode == 'diff'"></i>
                <translate>Diff version</translate>
              </a>
            <li>
              <a href="" ng-click="viewChangeRecommendations.mode = 'agreed'">
                <i class="fa fa-check" ng-if="viewChangeRecommendations.mode == 'agreed'"></i>
                <translate>Final version</translate>
              </a>
          </ul>
        </div>
    </div>
</div>
