<div ng-controller="SlideMotionCtrl" class="content">
  <div id="sidebox" ng-if="!config('motions_disable_sidebox_on_projector')">
    <!-- State -->
    <h3 translate>State</h3>
    {{ motion.getStateName() }}

    <!-- Recommendation -->
    <div ng-if="motion.getRecommendationName() != '' && !config('motions_disable_recommendation_on_projector')">
      <h3>{{ config('motions_recommendations_by') }}</h3>
      {{ motion.getRecommendationName() }}
    </div>

    <!-- Submitters -->
    <h3 ng-if="motion.submitters.length > 0" translate>Submitters</h3>
    <div ng-repeat="submitter in motion.submitters">
      {{ submitter.get_full_name() }}<br>
    </div>

    <!-- Poll results -->
    <h3 ng-if="motion.polls.length > 0 && motion.polls[0].has_votes" translate>Voting result</h3>
      <div ng-repeat="poll in motion.polls | orderBy:'-id'" class="spacer">
        <div ng-show="poll.has_votes" class="pollresults">
          <strong ng-if="motion.polls.length > 1">
            <translate>Vote</translate> {{ motion.polls.length - $index }}:
          </strong>
          <table class="transparentTable spacer">
            <!-- yes -->
            <tr>
              <td class="icon">
                <i class="fa fa-thumbs-up fa-lg"></i>
              <td ng-init="voteYes = poll.getVote(poll.yes, 'yes')">
                <span class="result_label"><translate>Yes</translate>:</span>
                <span class="result_value">
                  {{ voteYes.value }} {{ 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-lg"></i>
              <td ng-init="voteNo = poll.getVote(poll.no, 'no')">
                <span class="result_label"><translate>No</translate>:</span>
                <span class="result_value" >
                  {{ voteNo.value }} {{ 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 }} {{ voteAbstain.percentStr }}
                </span>
                <div ng-if="voteAbstain.percentNumber">
                  <uib-progressbar value="voteAbstain.percentNumber" type="warning"></uib-progressbar>
                </div>
          </table>
        </div>
      </div>
  </div>

  <div ng-style="{'width': config('motions_disable_sidebox_on_projector') ? '100%' : 'calc(100% - 230px)'}"
      class="scrollcontent">
    <!-- Title -->
    <div id="title">
      <h1>{{ motion.getTitleWithChanges(mode) }}</h1>
      <h2>
        <translate>Motion</translate> {{ motion.identifier }}
        <span ng-if="motion.versions.length > 1" >| Version {{ motion.getVersion().version_number }}</span>
      </h2>
    </div>

    <div class="zoomcontent">
      <!-- Preamble -->
      <div><p>{{ config('motions_preamble') | translate }}</p></div><br>

      <!-- Text -->
      <!-- Original view -->
      <div ng-if="mode == 'original'">
        <div id="view-original-inline-editor" ng-bind-html="motion.getTextWithLineBreaks(null, line) | trusted"
          class="motion-text motion-text-original line-numbers-{{ config('motions_default_line_numbering') }}"
          contenteditable="false"></div>
      </div>

      <!-- Diff View -->
      <div ng-if="mode == 'diff'">
          <div ng-if="title_change_recommendation" class="diff-box-{{ title_change_recommendation.id }} diff-box-title">
              <div class="motion-text motion-text-diff line-numbers-{{ lineNumberMode }}">
                  <div class="description">
                      <translate>New title</translate>:
                  </div>
                  <div>{{ title_change_recommendation.text }}</div>
              </div>
          </div>

        <!-- The actual diff view -->
        <div class="motion-text-with-diffs line-numbers-{{ config('motions_default_line_numbering') }}">
          <div ng-repeat="change in (changes = (change_recommendations | orderBy: 'line_from')) ">

            <div class="motion-text original-text line-numbers-{{ config('motions_default_line_numbering') }}"
              ng-bind-html="motion.getTextBetweenChangeRecommendations(null, changes[$index - 1], change, line) | trusted">
            </div>
            <div class="diff-box diff-box-{{ change.id }} clearfix motion-text motion-text-diff line-numbers-{{ config('motions_default_line_numbering') }}">
              <div ng-bind-html="change.getDiff(motion, null, line) | trusted"></div>
            </div>
          </div>
          <div class="motion-text original-text line-numbers-{{ config('motions_default_line_numbering') }}"
            ng-bind-html="motion.getTextRemainderAfterLastChangeRecommendation(null, changes, line) | trusted">
          </div>

        </div>
      </div>

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

      <!-- Agreed View -->
      <div ng-if="mode == 'agreed'">
        <div ng-bind-html="motion.getTextByMode('agreed', null, line) | trusted"
          class="motion-text motion-text-changed line-numbers-{{ config('motions_default_line_numbering') }}"></div>
      </div>

      <!-- Reason -->
      <div ng-if="motion.getReason() && !config('motions_disable_reason_on_projector')">
        <h3 translate>Reason</h3>
        <div ng-bind-html="motion.getReason() | trusted"></div>
      </div>
    </div>
  </div>
</div>
