<div class="motion-toolbar">
    <!-- inline editing for original mode -->
    <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 && !has_proposed_changes" ng-click="enableMotionInlineEditing()"
                class="btn btn-sm btn-default">
            <i class="fa fa-pencil-square-o"></i>
            <translate>Inline editing</translate>
        </button>
        <button ng-if="inlineEditing.active && !has_proposed_changes" ng-click="disableMotionInlineEditing()"
                class="btn btn-sm btn-default">
            <i class="fa fa-times-circle"></i>
            <translate>Inline editing</translate>
        </button>
        <button ng-if="has_proposed_changes" 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>

    <!-- inline editing for modified agreed view -->
    <div class="pull-right inline-editing-activator"
         ng-if="motion.isAllowed('update') && version == motion.getVersion(-1).id && viewChangeRecommendations.mode == 'modified_agreed'">
        <button ng-if="!modifiedFinalVersionInlineEditing.active"
                ng-click="modifiedFinalVersionInlineEditing.enable()"
                class="btn btn-sm btn-default">
            <i class="fa fa-pencil-square-o"></i>
            <translate>Inline editing</translate>
        </button>
        <button ng-if="modifiedFinalVersionInlineEditing.active"
                ng-click="modifiedFinalVersionInlineEditing.disable()"
                class="btn btn-sm btn-default">
            <i class="fa fa-times-circle"></i>
            <translate>Inline editing</translate>
        </button>
    </div>

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

        <ng-include src="'static/templates/motions/motion-detail/toolbar-line-numbering.html'"></ng-include>

        <!-- 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>
            <div class="btn-group" ng-if="lineNumberMode != 'none'">
              <button type="button" class="btn btn-sm btn-default" ng-click="lineNumberForm.$show()">
                  <i class="fa fa-share"></i>
                  <translate>go</translate>
              </button>
              <button type="button" class="btn btn-sm btn-default"
                      ng-if="lineNumberMode != 'none' && motion.isProjected().length &&
                      operator.hasPerms('core.can_manage_projector')"
                      ng-click="toggleLinesForProjector()"
                      uib-tooltip="{{ 'Show highlighted line also on projector.' | translate }}">
                  <i class="fa" ng-class="linesForProjector ? 'fa-check-square-o' : 'fa-square-o'"></i>&nbsp;
                  <i class="fa fa-video-camera"></i>
              </button>
            </div>
        </div>
    </div>
</div>

<!-- View Modes (Original, Diff, Changed) -->
<div class="motion-toolbar" ng-if="has_proposed_changes">
    <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>
            <label class="btn btn-sm btn-default" os-perms="motions.can_manage"
                   ng-show="motion.getModifiedFinalVersion()"
                   ng-class="{active: (viewChangeRecommendations.mode == 'modified_agreed')}"
                   ng-click="viewChangeRecommendations.mode = 'modified_agreed'">
                <input type="radio" name="viewChangeRecommendations.mode" value="modified_agreed"
                       ng-model="viewChangeRecommendations.mode"
                       ng-checked="viewChangeRecommendations.mode == 'modified_agreed'">
                <translate>Final print template</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-left" 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>
            <li os-perms="motions.can_manage">
              <a href="" ng-click="viewChangeRecommendations.mode = 'modified_agreed'">
                <i class="fa fa-check" ng-if="viewChangeRecommendations.mode == 'modified_agreed'"></i>
                <translate>Final print template</translate>
              </a>
          </ul>
        </div>
    </div>
</div>
