<div class="header motion-header">
  <div class="title">
    <div class="submenu">
      <a ng-if="motion.isAmendment" ui-sref="motions.motion.amendment-list({id: motion.getParentMotion().id })"
        class="btn btn-sm btn-default">
        <i class="fa fa-angle-double-left fa-lg"></i>
        <translate>Back to overview</translate>
      </a>
      <a ng-if="!motion.isAmendment" ui-sref="motions.motion.list"
        class="btn btn-sm btn-default">
        <i class="fa fa-angle-double-left fa-lg"></i>
        <translate>Back to overview</translate>
      </a>
      <a ng-if="motion.hasAmendments()" ui-sref="motions.motion.amendment-list({id: motion.id})"
        class="btn btn-sm btn-default">
        <i class="fa fa-book fa-lg"></i>
        <translate>Amendments</translate>
      </a>
      <!-- List of speakers -->
      <a ui-sref="agenda.item.detail({id: motion.agenda_item_id})"
          os-perms="agenda.can_see" class="btn btn-sm btn-default">
        <i class="fa fa-microphone fa-lg"></i>
        <translate>List of speakers</translate>
      </a>
      <!-- project button -->
      <div class="btn-group button" uib-dropdown
           uib-tooltip="{{ 'Projector' | translate }} {{ motion.isProjected()[0] || '' }} ({{ projectionMode.label | translate }})"
        tooltip-enable="motion.isProjected().length"
        os-perms="core.can_manage_projector">
        <button type="button" class="btn btn-default btn-sm"
            title="{{ 'Project' | translate }}"
            ng-click="motion.project(defaultProjectorId, projectionMode.mode)"
            ng-class="{ 'btn-primary': motion.isProjected().length && inArray(motion.isProjected(), defaultProjectorId)}">
          <i class="fa fa-video-camera"></i>
        </button>
        <button type="button" class="btn btn-default btn-sm slimDropDown" uib-dropdown-toggle
            ng-if="projectors.length > 1 || has_proposed_changes"
            ng-class="{ 'btn-primary': motion.isProjected().length && !inArray(motion.isProjected(), defaultProjectorId)}">
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="split-button"
          ng-if="projectors.length > 1 || has_proposed_changes">
          <li role="menuitem" ng-repeat="mode in projectionModes" ng-if="has_proposed_changes">
            <a href="" ng-click="setProjectionMode(mode); $event.stopPropagation();">
              <i class="fa" ng-class="mode.mode == $parent.projectionMode.mode ? 'fa-check-square-o' : 'fa-square-o'"></i>
              <span ng-if="mode.mode!='agreed'">{{ mode.label | translate }}</span>
              <span ng-if="mode.mode=='agreed'"><translate translate-context="resolution">Final version</translate></span>
            </a>
          </li>
          <li class="divider" ng-show="projectors.length > 1 && has_proposed_changes"></li>
          <li role="menuitem" ng-repeat="projector in projectors | orderBy:'id'" ng-show="projectors.length > 1">
            <a href="" ng-click="motion.project(projector.id, projectionMode.mode)"
              ng-class="{ 'projected': inArray(motion.isProjected(), projector.id) }">
              <i class="fa fa-video-camera" ng-show="inArray(motion.isProjected(), projector.id) "></i>
              {{ projector.name | translate }}
              <span ng-if="projector.id === defaultProjectorId">(<translate>Default</translate>)</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- edit -->
      <a ng-if="motion.isAllowed('update')" ng-click="openDialog(motion)"
          class="btn btn-default btn-sm"
          title="{{ 'Edit' | translate}}">
        <i class="fa fa-pencil"></i>
      </a>
      <!-- pdf -->
      <a ng-click="pdfExport()" class="btn btn-default btn-sm"
          title="{{ 'Export as PDF' | translate}}">
        <i class="fa fa-file-pdf-o fa-lg"></i>
        <translate>PDF</translate>
      </a>
    </div>

    <h1 class="motion-title">
        <span ng-if="!motion.isAmendment && viewChangeRecommendations.mode == 'original'">
          <span class="title-change-indicator" ng-if="title_change_recommendation"
                ng-click="viewChangeRecommendations.scrollToDiffBox(title_change_recommendation.id)"></span>
          <span class="change-title" ng-if="motion.isAllowed('update') && !title_change_recommendation"></span>
        </span>

        {{ motion.getTitleWithChanges(viewChangeRecommendations.mode) }}

        <i class="fa pointer" ng-class="motion.personalNote.star ? 'fa-star' : 'fa-star-o'"
           ng-if="operator.user"
           title="{{ 'Set as favorite' | translate }}" ng-click="toggleStar()"></i>
    </h1>

    <div class="row">
      <div class="col-sm-6">
        <h2>
            <translate>Motion</translate> {{ motion.identifier }}
            <span ng-if="motion.versions.length > 1" >| Version {{ motion.getVersion(version).version_number }}</span>
            <span ng-if="motion.active_version != version" class="label label-warning">
              <i class="fa fa-exclamation-triangle"></i>
              <translate>This version is not permitted.</translate>
            </span>
            <small>
              <translate>Sequential number</translate> {{ motion.getSequentialNumber() }}

              <span ng-if="motion.isAmendment">
                &middot;
                <a ui-sref="motions.motion.detail({id: motion.getParentMotion().id })" ng-if="motion.isAmendment">
                  <translate>Amendment to</translate>
                  {{ motion.getParentMotion().identifier || motion.getParentMotion().getTitle() }}
                </a>
              </span>
            </small>
        </h2>
      </div>
      <div class="col-sm-6">
        <span class="pull-right" ng-if="navigation.count > 2">
          <a ui-sref="motions.motion.detail({id: navigation.previousMotion.id})"
            class="btn btn-default btn-sm" ng-disabled="!navigation.previousMotion">
            <i class="fa fa-angle-double-left"></i>
            <translate>Motion</translate> {{ navigation.previousMotion.identifier }}
          </a>
          <a ui-sref="motions.motion.detail({id: navigation.nextMotion.id})"
            class="btn btn-default btn-sm" ng-disabled="!navigation.nextMotion">
            <translate>Motion</translate> {{ navigation.nextMotion.identifier }}
            <i class="fa fa-angle-double-right"></i>
          </a>
        </span>
      </div>
    </div>
  </div>
</div>

<div class="meta motion-detail">
  <div class="title" ng-click="isMeta = !isMeta">
    <div class="name">
      <i class="fa fa-info-circle"></i>
      <translate>Meta information</translate>
    </div>
    <div class="icon">
      <i class="fa fa-lg" ng-class="isMeta ? 'fa-angle-down' : 'fa-angle-up'"></i>
    </div>
  </div>
  <div class="detail" uib-collapse="isMeta">
    <div class="row">
      <div class="col-sm-4">
          <!-- submitters -->
          <h3 ng-if="!motion.isAllowed('update_submitters')" class="heading" translate>Submitters</h3>
          <h3 ng-if="motion.isAllowed('update_submitters')" class="heading">
            <translate>Submitters</translate>
            <a ui-sref="motions.motion.submitters({id: motion.id})" uib-tooltip="{{ 'Sort submitters' | translate }}">
              <i class="fa fa-cog"></i>
            </a>
          </h3>
          <div ng-repeat="submitter in motion.submitters | orderBy: 'weight'">
            {{ submitter.user.get_full_name() }}
          </div>

          <!-- supporters -->
          <div ng-if="config('motions_min_supporters') > 0">
            <h3 translate>Supporters</h3>
            <ol>
              <li ng-repeat="supporters in motion.supporters">
                {{ supporters.get_full_name() }}
            </ol>
            <!-- support button -->
            <button ng-if="motion.isAllowed('support')" ng-click="support()" class="btn btn-default btn-sm">
              <i class="fa fa-heart"></i>
              <translate>Support motion</translate>
            </button>
            <!-- unsupport button -->
            <button ng-if="motion.isAllowed('unsupport')" ng-click="unsupport()" class="btn btn-default btn-sm">
              <i class="fa fa-heart-o"></i>
              <translate>Unsupport motion</translate>
            </button>
          </div>

          <!-- Amendments -->
          <div ng-if="!motion.isAmendment && motion.isAllowed('can_see_amendments')">
            <h3 translate>Amendments</h3>
            <a ng-if="motion.hasAmendments()" ui-sref="motions.motion.amendment-list({id: motion.id})">
              {{ motion.getAmendments().length }} {{ (motion.getAmendments().length === 1 ? 'Amendment' : 'Amendments') | translate }}<br>
            </a>
            <button ng-if="motion.isAllowed('can_create_amendment')" ng-click="newAmendment()" class="btn btn-default btn-sm">
              <i class="fa fa-plus"></i>
              <translate>New amendment</translate>
            </button>
          </div>
      </div>
      <div class="col-sm-4">
          <!-- State -->
          <h3 ng-if="!motion.isAllowed('change_state')" class="heading" translate>State</h3>
          <div ng-if="motion.isAllowed('change_state')" class="heading">
            <span uib-dropdown>
              <span id="state-dropdown" class="drop-down-name pointer" uib-dropdown-toggle>
                <translate>State</translate>
                <i class="fa fa-cog"></i>
              </span>
              <ul uib-dropdown-menu class="dropdown-menu" aria-labelledby="state-dropdown">
                <li ng-repeat="state in motion.state.getNextStates()">
                  <a href ng-click="motion.setState(state.id)">
                    {{ state.action_word | translate }}
                    <span ng-if="state.show_state_extension_field">...</span>
                  </a>
                <li class="divider" ng-if="motion.state.getNextStates().length && motion.isAllowed('reset_state')">
                <li ng-if="motion.isAllowed('reset_state')">
                  <a href ng-click="motion.setState(null)">
                    <i class="fa fa-exclamation-triangle"></i>
                    <translate>Reset state</translate>
                  </a>
              </ul>
            </span>
          </div>
          <div class="label" ng-class="'label-'+motion.state.css_class">
            {{ motion.getStateName() }}
          </div>
          <div os-perms="motions.can_manage" class="input-group spacer"
              ng-show="motion.state.show_state_extension_field">
            <label class="sr-only" for="stateExtensionField">{{ commentsFields[commentFieldForStateId].name }}</label>
            <input type="text" ng-model="stateExtension"
                id="stateNameExtensionField" class="form-control input-sm"
                placeholder="{{ commentsFields[commentFieldForStateId].name }}">
            <span class="input-group-btn">
              <button ng-click="saveAdditionalStateField(stateExtension)" class="btn btn-default btn-sm">
                <i class="fa fa-check"></i>
              </button>
            </span>
          </div>

          <!-- Recommendation -->
          <div ng-if="config('motions_recommendations_by')">
            <h3 ng-if="!motion.isAllowed('change_recommendation')" class="heading">
              {{ config('motions_recommendations_by') }}
            </h3>
            <div ng-if="motion.isAllowed('change_recommendation')" class="heading">
              <span uib-dropdown>
                <span id="recommendation-dropdown" class="drop-down-name pointer" uib-dropdown-toggle>
                  {{ config('motions_recommendations_by') | translate }}
                  <i class="fa fa-cog"></i>
                </span>
                <ul uib-dropdown-menu class="dropdown-menu" aria-labelledby="recommendation-dropdown">
                  <li ng-repeat="recommendation in motion.state.getRecommendations()">
                    <a href ng-click="motion.setRecommendation(recommendation.id)">
                      {{ recommendation.recommendation_label | translate }}
                      <span ng-if="recommendation.show_recommendation_extension_field">...</span>
                    </a>
                  <li class="divider" ng-if="motion.state.getRecommendations().length && motion.recommendation">
                  <li ng-if="motion.recommendation">
                    <a href ng-click="motion.setRecommendation(null)">
                      <i class="fa fa-exclamation-triangle"></i>
                      <translate>Reset recommendation</translate>
                    </a>
                </ul>
              </span>
            </div>
            <div class="label" ng-if="motion.recommendation" ng-class="'label-'+motion.recommendation.css_class">
              {{ motion.getRecommendationName() }}
            </div>
            <div os-perms="motions.can_manage" class="input-group spacer"
                ng-show="motion.recommendation.show_recommendation_extension_field">
              <label class="sr-only" for="recommendationExtensionField">
                {{ commentsFields[commentFieldForRecommendationId].name }}
              </label>
              <input type="text" ng-model="$parent.$parent.recommendationExtension"
                  id="recommendationExtensionField" class="form-control input-sm"
                  placeholder="{{ commentsFields[commentFieldForRecommendationId].name }}">
              <span class="input-group-btn">
                <button ng-click="saveAdditionalRecommendationField(recommendationExtension)" class="btn btn-default btn-sm">
                  <i class="fa fa-check"></i>
                </button>
              </span>
              <span class="input-group-btn">
                <span uib-dropdown>
                  <span id="motion-dropdown" class="drop-down-name btn btn-default btn-sm" uib-dropdown-toggle>
                    <i class="fa fa-plus"></i>
                    <translate>Motion</translate>
                  </span>
                  <ul uib-dropdown-menu class="dropdown-menu" aria-labelledby="motion-dropdown">
                    <li ng-repeat="m in motions | orderBy: 'identifier'">
                      <a href ng-click="addMotionToRecommendationField(m)">
                        {{ m.identifier ? m.identifier + ':' : '' }}
                        {{ m.getTitle() | limitTo: 35 }}{{ m.getTitle().length > 35 ? '...' : '' }}
                      </a>
                    </li>
                  </ul>
                </span>
              </span>
            </div>
            <button
                ng-if="motion.recommendation &&
                       motion.isAllowed('change_state') &&
                       motion.state.next_states_id.indexOf(motion.recommendation.id) !== -1"
                ng-click="followRecommendation()"
                class="btn btn-default btn-sm">
              <i class="fa fa-magic"></i>
              <translate>Follow recommendation</translate>
            </button>
          </div>

          <!-- Category -->
          <h3 class="heading" os-perms="!motions.can_manage" ng-show="motion.category" translate>Category</h3>
          <div class="heading" os-perms="motions.can_manage" ng-show="categories.length > 0">
            <span uib-dropdown>
              <span id="category-dropdown" class="drop-down-name pointer" uib-dropdown-toggle>
                <translate>Category</translate>
                <i class="fa fa-cog"></i>
              </span>
              <ul class="dropdown-menu" aria-labelledby="category-dropdown">
                <li ng-repeat="category in categories | orderBy: config('motions_export_category_sorting')">
                  <a href ng-click="toggleCategory(category)">
                    <i class="fa fa-check" ng-if="category.id == motion.category.id"></i>
                    {{ category.prefix }} &ndash; {{ category.name }}
                  </a>
                </li>
              </ul>
            </span>
          </div>
          <div ng-show="motion.category">
            {{ motion.category.prefix }} &ndash; {{ motion.category.name }}
          </div>

          <!-- Motion block -->
          <h3 class="heading" os-perms="!motions.can_manage" ng-show="motion.motionBlock" translate>Motion block</h3>
          <div class="heading" os-perms="motions.can_manage" ng-show="motionBlocks.length > 0">
            <span uib-dropdown>
              <span id="motionBlock-dropdown" class="drop-down-name pointer" uib-dropdown-toggle>
                <translate>Motion block</translate>
                <i class="fa fa-cog"></i>
              </span>
              <ul class="dropdown-menu" aria-labelledby="motionBlock-dropdown">
                <li ng-repeat="motionBlock in motionBlocks">
                  <a href ng-click="toggleMotionBlock(motionBlock)">
                    <i class="fa fa-check" ng-if="motionBlock.id == motion.motionBlock.id"></i>
                    {{ motionBlock.title }}
                  </a>
                </li>
              </ul>
            </span>
          </div>
          <a ui-sref="motions.motionBlock.detail({id: motion.motionBlock.id})"
              os-perms="motions.can_manage">{{ motion.motionBlock.title }}</a>
          <span os-perms="!motions.can_manage">{{ motion.motionBlock.title }}</span>

          <!-- Tags -->
          <h3 class="heading" os-perms="!motions.can_manage" ng-show="motion.tags.length" translate>Tags</h3>
          <div class="heading" os-perms="motions.can_manage" ng-show="tags.length > 0">
            <span uib-dropdown>
              <span id="tag-dropdown" class="drop-down-name pointer" uib-dropdown-toggle>
                <translate>Tags</translate>
                <i class="fa fa-cog"></i>
              </span>
              <ul class="dropdown-menu" aria-labelledby="tag-dropdown">
                <li ng-repeat="tag in tags">
                  <a href ng-click="toggleTag(tag)">
                    <i class="fa fa-check" ng-if="inArray(motion.tags_id, tag.id)"></i>
                    {{ tag.name }}
                  </a>
                </li>
              </ul>
            </span>
          </div>
          <span ng-repeat="tag in motion.tags">
            {{ tag.name }}{{$last ? '' : ', '}}
          </span>

          <!-- Origin -->
          <h3 ng-if="motion.origin" translate>Origin</h3>
          {{ motion.origin }}

      </div>
      <div class="col-sm-4">
          <h3 ng-if="motion.polls.length > 0" translate>Voting result</h3>
          <template-hook hook-name="motionPollVotingHeader"></template-hook>
          <ol>
            <li ng-controller="MotionPollDetailCtrl" ng-repeat="poll in motion.polls" class="spacer"
                ng-if="poll.has_votes || operator.hasPerms('motions.can_manage')">
              <strong translate-comment='ballot of a motion' translate>Vote</strong>

              <!-- Edit poll -->
              <button os-perms="motions.can_manage" ng-click="openPollDialog(poll, $index+1)"
                  class="btn btn-default btn-xs" title="{{ 'Edit' | translate }}">
                <i class="fa fa-pencil"></i>
              </button>

              <!-- Delete poll -->
              <button os-perms="motions.can_manage" class="btn btn-default btn-xs"
                  ng-bootbox-confirm="{{ 'Are you sure you want to delete this poll?' | translate }}"
                  ng-bootbox-confirm-action="delete_poll(poll)"
                  title="{{ 'Delete' | translate }}">
                <i class="fa fa-times"></i>
              </button>

              <!-- Print poll PDF -->
              <a os-perms="motions.can_manage" ng-click="createPollPdf()" class="btn btn-default btn-xs"
                  title="{{ 'Print ballot paper' | translate }}">
                <i class="fa fa-file-pdf-o"></i>
              </a>

              <!-- Template hook for motion poll buttons -->
              <template-hook hook-name="motionPollSmallButtons"></template-hook>

              <!-- Poll results -->
              <div ng-show="poll.has_votes" class="pollresults">
                <table class="table">
                  <!-- yes -->
                  <tr>
                    <td class="icon">
                      <i class="fa fa-thumbs-up fa-2x"></i>
                    <td ng-init="voteYes = poll.getVote(poll.yes, 'yes')">
                      <span class="result-label"><translate>Yes</translate>:</span>
                      <span class="result_value">
                        {{ voteYes.value | number:votesPrecision }} {{ voteYes.percentStr }}
                      </span>
                      <div ng-if="voteYes.percentNumber">
                        <uib-progressbar value="voteYes.percentNumber" type="success"></uib-progressbar>
                      </div>
                  <!-- no -->
                  <tr>
                    <td class="icon">
                      <i class="fa fa-thumbs-down fa-2x"></i>
                    <td ng-init="voteNo = poll.getVote(poll.no, 'no')">
                      <span class="result-label"><translate>No</translate>:</span>
                      <span class="result_value" >
                        {{ voteNo.value | number:votesPrecision }} {{ voteNo.percentStr }}
                      </span>
                      <div ng-if="voteNo.percentNumber">
                        <uib-progressbar value="voteNo.percentNumber" type="danger"></uib-progressbar>
                      </div>
                  <!-- abstain -->
                  <tr>
                    <td class="icon">
                      <strong style="font-size: 26px">&empty;</strong>
                    <td ng-init="voteAbstain = poll.getVote(poll.abstain, 'abstain')">
                      <span class="result-label"><translate>Abstain</translate>:</span>
                      <span class="result_value">
                        {{ voteAbstain.value | number:votesPrecision }} {{ voteAbstain.percentStr }}
                      </span>
                      <div ng-if="voteAbstain.percentNumber">
                        <uib-progressbar value="voteAbstain.percentNumber" type="warning"></uib-progressbar>
                      </div>
                  <!-- valid votes -->
                  <tr ng-if="poll.votesvalid !== null">
                    <td class="icon">
                      <i class="fa fa-check fa-lg"></i>
                    <td ng-init="votesValid = poll.getVote(poll.votesvalid, 'votesvalid')">
                      <span class="result-label"><translate>Valid votes</translate>:</span>
                      <span class="result_value">
                        {{ votesValid.value | number:votesPrecision }} {{ votesValid.percentStr }}
                      </span>
                  <!-- invalid votes -->
                  <tr ng-if="poll.votesinvalid !== null">
                    <td class="icon">
                      <i class="fa fa-ban fa-lg"></i>
                    <td ng-init="votesInvalid = poll.getVote(poll.votesinvalid, 'votesinvalid')">
                      <span class="result-label"><translate>Invalid votes</translate>:</span>
                      <span class="result_value">
                        {{ votesInvalid.value | number:votesPrecision }} {{ votesInvalid.percentStr }}
                      </span>
                  <!-- votes cast -->
                  <tr class="total" ng-if="poll.votescast !== null">
                    <td class="icon">
                      <strong style="font-size: 16px">&sum;</strong>
                    <td ng-init="votesCast = poll.getVote(poll.votescast, 'votescast')">
                      <span class="result-label"><translate>Votes cast</translate>:</span>
                      <span class="result_value">
                        {{ votesCast.value | number:votesPrecision }} {{ votesCast.percentStr }}
                      </span>

                  <!-- majority calculation -->
                  <tr>
                    <td>
                    <td>
                      <div os-perms="motions.can_manage"
                           ng-hide="hideMajorityCalculation()"
                           ng-cloak>
                        <div class="input-group">
                          <span><translate>Required majority</translate>: </span>
                          <select ng-model="$parent.method"
                                  ng-options="option.value as option.display_name | translate for option in methodChoices">
                        </div>
                      </div>
                  <tr>
                    <td>
                    <td>
                      <div os-perms="motions.can_manage">
                        <span class="text-success" ng-if="isReached() >= 0" translate>
                          Quorum ({{ (voteYes.value - isReached()) | number:votesPrecision }}) reached.
                        </span>
                        <span class="text-danger" ng-if="isReached() < 0" translate>
                          Quorum ({{ (voteYes.value - isReached()) | number:votesPrecision }}) not reached.
                       </span>
                      </div>

                </table>
          </ol>

          <template-hook hook-name="motionPollNewVoteButton">
            <button ng-if="motion.isAllowed('create_poll')" ng-click="create_poll()" class="btn btn-default btn-sm">
              <i class="fa fa-bar-chart fa-lg"></i>
              <translate>New vote</translate>
            </button>
          </template-hook>

          <div class="spacer-top pull-right nobr">
            <a href ng-click="gotoPersonalNote()" translate>Personal note</a>
            <span ng-click="pinPersonalNote()" class="spacer-left pointer" title="{{ 'Pin personal note' || translate }}">
              <i class="fa fa-thumb-tack" ng-class="{'rotate-45-deg-right': !personalNotePinned}"></i>
            </span>
          </div>
      </div>
    </div>
  </div>
</div>

<div class="details">
  <div class="row">

    <!-- Motion toolbar -->
    <ng-include src="'static/templates/motions/motion-detail/toolbar.html'" ng-if="!motion.isParagraphBasedAmendment()"></ng-include>

    <div ng-class="{'col-sm-8': (lineNumberMode != 'outside'), 'col-sm-12': (lineNumberMode == 'outside')}"
         ng-if="!motion.isParagraphBasedAmendment()">

      <ng-include ng-if="viewChangeRecommendations.mode == 'diff'"
          src="'static/templates/motions/motion-detail/change-summary.html'"></ng-include>

      <div><p>{{ config('motions_preamble') | translate }}</p></div>

      <div class="motion-text-holder">

        <!-- Original view -->
        <ng-include src="'static/templates/motions/motion-detail/view-original.html'"></ng-include>

        <!-- Diff View -->
        <ng-include src="'static/templates/motions/motion-detail/view-diff.html'"></ng-include>

        <!-- Changed View -->
        <div ng-if="viewChangeRecommendations.mode == 'changed'">
          <div ng-bind-html="motion.getTextByMode('changed', version, highlight) | trusted"
               class="motion-text motion-text-changed line-numbers-{{ lineNumberMode }}"></div>

          <div style="text-align: right;" ng-if="motion.state.versioning && (change_recommendations | filter:{motion_version_id:version}:true).length > 0">
            <button class="btn btn-default"
                    ng-bootbox-confirm="{{ 'Do you want to create a new version of this motion based on this changes?' | translate }}"
                    ng-bootbox-confirm-action="viewChangeRecommendations.newVersionIncludingChanges(motion, version, true)">
              <i class="fa fa-file-text"></i>
              <translate>New version on these changes</translate>
            </button>
          </div>
        </div>

        <!-- Agreed View -->
        <div ng-if="viewChangeRecommendations.mode == 'agreed'">
          <div class="alert alert-danger" ng-if="changed_version_has_accepted_collissions">
              <i class="fa fa-warning"></i>
              <translate>
                  At least two amendments or change recommendations affecting the same line are to be integrated.
                  This leads to undeterministic results.
                  Please resolve this conflict by not accepting multiple changes affecting the same line.
              </translate>
          </div>

          <div style="text-align: right;" ng-if="(change_recommendations | filter:{motion_version_id:version}:true).length > 0">
            <button class="btn btn-default btn-sm" os-perms="motions.can_manage"
                    ng-bootbox-confirm="{{ 'Do you want to copy the final version to the final print template?' | translate }}"
                    ng-bootbox-confirm-action="viewChangeRecommendations.copyToModifiedFinalVersion(motion, version)">
              <i class="fa fa-file-text"></i>
              <translate>Create final print template</translate>
            </button>
          </div>

          <div style="text-align: right;" ng-if="motion.state.versioning && (change_recommendations | filter:{motion_version_id:version}:true).length > 0">
            <button class="btn btn-default btn-sm"
                    ng-bootbox-confirm="{{ 'Do you want to create a new version of this motion based on this changes?' | translate }}"
                    ng-bootbox-confirm-action="viewChangeRecommendations.newVersionIncludingChanges(motion, version, false)">
              <i class="fa fa-file-text"></i>
              <translate>New version on these changes</translate>
            </button>
          </div>

          <div ng-bind-html="motion.getTextByMode('agreed', version, highlight) | trusted"
               class="motion-text motion-text-changed line-numbers-{{ lineNumberMode }}"></div>
        </div>

        <!-- modified agreed view -->
        <ng-include src="'static/templates/motions/motion-detail/view-modified-agreed.html'"></ng-include>

      </div>
    </div>

    <!-- Paragraph-based Amendments -->
    <ng-include src="'static/templates/motions/motion-detail/amendment-paragraph-diff.html'"></ng-include>

  </div>
  <div class="row">
    <div class="col-md-8">
      <!-- reason -->
      <div ng-if="motion.getReason(version) != ''">
        <h3 translate>Reason</h3>
        <div id="reason-inline-editor" ng-bind-html="motion.getReason(version) | trusted"
          contenteditable="{{ reasonInlineEditing.isEditable }}">
        </div>
      </div>

      <!-- attachments -->
      <h3 ng-if="motion.attachments.length > 0" translate>Attachments</h3>
      <ul>
        <li ng-repeat="attachment in motion.attachments">
          <a href="{{ attachment.mediafileUrl }}" target="_blank">{{ attachment.title_or_filename }}</a>
      </ul>

      <!-- version history -->
      <div ng-if="motion.versions.length > 1">
        <h3 translate>Version history</h3>
        <ul>
          <li ng-repeat="version in motion.versions">
              <span ng-if="$parent.version == version.id">
                <strong><translate>Version</translate> {{ version.version_number }}</strong>
              </span>
              <a href="" ng-if="$parent.version != version.id" ng-click="showVersion(version)">
                <translate>Version</translate> {{ version.version_number }}
              </a>
              <!-- active version -->
              <i ng-if="motion.active_version == version.id" class="fa fa-star"
                  title="{{ 'This is the last active version.' | translate }}"></i>
              <!-- permit version -->
              <button os-perms="motions.can_manage" ng-show="motion.active_version != version.id"
                  ng-click="permitVersion(version)"
                  class="btn btn-default btn-xs" title="{{ 'Permit and activate' | translate }}">
                <i class="fa fa-check"></i>
              </button>
              <!-- delete version -->
              <button os-perms="motions.can_manage" ng-show="motion.active_version != version.id"
                  class="btn btn-default btn-xs"
                  ng-bootbox-confirm="{{ 'Are you sure you want to delete this version?' | translate }}<br>
                      <strong><translate>Version</translate> {{ version.version_number }}</strong>"
                  ng-bootbox-confirm-action="deleteVersion(version)"
                  title="{{ 'Delete' | translate }}">
                <i class="fa fa-times"></i>
              </button>
            <br><translate>Last modified</translate>: {{ version.creation_time | date:'yyyy-MM-dd HH:mm:ss' }}
        </ul>
      </div>

      <!-- log -->
      <div os-perms="motions.can_manage">
        <button type="button" class="btn btn-sm btn-default spacer" ng-click="isCollapsed = !isCollapsed" translate>
          Show history
        </button>
        <div uib-collapse="isCollapsed">
          <div class="well well-sm">
            <ul class="list-unstyled">
              <li ng-repeat="message in motion.log_messages">
                <small>{{ message.message }}</small>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<!-- Comments section -->
<ng-include src="'static/templates/motions/motion-detail/comments.html'"></ng-include>

<!-- Personal note section -->
<ng-include src="'static/templates/motions/motion-detail/personal-note.html'" ng-if="operator.user"></ng-include>

<template-hook hook-name="motionDetailViewDetailContainer"></template-hook>
