<div ng-controller="MotionListCtrl">
<div ng-controller="MotionAmendmentListCtrl">
<div class="header">
  <div class="title">
    <div class="submenu">
      <a ui-sref="motions.motion.list" class="btn btn-sm btn-default">
        <i class="fa fa-angle-double-left fa-lg"></i>
        <translate>Back to motions overview</translate>
      </a>
      <button type="button" class="btn btn-sm"
        ng-class="expandContent ? 'btn-primary' : 'btn-default'"
        ng-click="toggleExpandContent(); saveExpandState(expandContent)">
        <i class="fa fa-arrows-h fa-lg"></i>
        <span ng-if="!expandContent" translate>Expand</span>
        <span ng-if="expandContent" translate>Reduce</span>
      </button>
    </div>
    <h1 translate>Amendments</h1>
    <div ng-mouseover="selectHover=true" ng-mouseleave="selectHover=false"
        class="dropdown-hover-space">
      <h3>
        <a ui-sref="motions.motion.detail({id: leadMotion.id})" ng-if="leadMotion">
          <span ng-if="leadMotion.identifier">
            {{ leadMotion.identifier }} &mdash;
          </span>
          {{ leadMotion.getTitle() }}
        </a>
        <span ng-if="!leadMotion" translate>
          All motions
        </span>
        <span ng-class="{'hiddenDiv': !selectHover}" uib-dropdown>
          <i class="fa fa-cog pointer" uib-dropdown-toggle id="selectDropdown"></i>
          <ul class="dropdown-menu" aria-labelledby="selectDropdown">
            <li>
              <a href ng-click="selectLeadMotion(null)" translate>
                All motions
              </a>
            </li>
            <li class="divider"></li>
            <li ng-repeat="motion in leadMotions">
              <a href ng-click="selectLeadMotion(motion)">
                <span ng-if="motion.identifier">
                  {{ motion.identifier }} &mdash;
                </span>
                {{ motion.getTitle() | limitTo: 35 }}{{ motion.getTitle().length > 35 ? '...' : '' }}
              </a>
            </li>
          </ul>
        </span>
      </h3>
    </div>
  </div>
</div>

<div class="details">

  <div class="row">
    <div class="col-sm-12">
      <!-- select mode -->
      <button os-perms="motions.can_manage" class="btn btn-sm"
          ng-class="$parent.isSelectMode ? 'btn-primary' : 'btn-default'"
          ng-click="$parent.isSelectMode = !$parent.isSelectMode; uncheckAll()">
        <i class="fa fa-check-square-o"></i>
        <translate>Select ...</translate>
      </button>
      <!-- Export dropdown -->
      <div class="pull-right" uib-dropdown>
        <button type="button" class="btn btn-default btn-sm" id="dropdownExport" uib-dropdown-toggle>
          <i class="fa fa-upload"></i>
          <span ng-if="amendmentsFiltered.length === amendments.length" translate>
            Export all
          </span>
          <span ng-if="amendmentsFiltered.length !== amendments.length" translate>
            Export filtered
          </span>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownExport">
          <!-- PDF export -->
          <li os-perms="motions.can_manage">
            <a href="" ng-click="openExportDialog(amendmentsFiltered)">
              <i class="fa fa-file-pdf-o"></i>
              <translate>Export dialog</translate>
            </a>
          </li>
          <li os-perms="!motions.can_manage">
            <a href="" ng-click="pdfExport(amendmentsFiltered)">
              <i class="fa fa-file-pdf-o"></i>
              PDF
            </a>
          </li>
          <!-- amendment PDF export -->
          <li>
            <a href="" ng-click="amendmentPdfExport(amendmentsFiltered)">
              <i class="fa fa-file-pdf-o"></i>
              <translate>Amendment list PDF</translate>
            </a>
          </li>
          <!-- CSV export -->
          <li>
            <a href="" ng-click="exportCsv(amendmentsFiltered)">
              <i class="fa fa-file-text-o"></i>
              CSV
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div uib-collapse="!isSelectMode" class="row spacer">
    <div class="col-sm-12 text-left form-inline" ng-show="isSelectMode" os-perms="motions.can_manage">
      <!-- actions -->
      <select ng-model="selectedAction" class="form-control input-sm">
        <option value="" translate>--- Select action ---</option>
        <option value="delete" translate>Delete</option>
        <option value="setStatus" translate>Set status</option>
        <option value="setCategory" ng-if="categories.length" translate>Set category</option>
        <option value="setMotionBlock" ng-if="motionBlocks.length" translate>Set motion block</option>
      </select>
      <!-- state select -->
      <select ng-show="selectedAction == 'setStatus'" ng-model="selectedState" class="form-control input-sm">
        <option value="" translate>--- Select state ---</option>
        <option ng-repeat="state in states" ng-if="!state.divider" ng-disabled="state.workflowHeader" value="{{ state.id }}">
          {{ (state.workflowHeader ? state.headername : state.name) | translate }}
        </option>
      </select>
      <!-- set state button -->
      <a ng-show="selectedAction == 'setStatus' && selectedState"
          ng-click="setStatusMultiple(amendmentsFiltered, selectedState)" class="btn btn-default btn-sm">
        <translate>Set status</translate>
      </a>
      <!-- category select -->
      <select ng-show="selectedAction == 'setCategory'" ng-model="selectedCategory" class="form-control input-sm">
        <option value="" translate>--- Select category ---</option>
        <option ng-repeat="category in categories | orderBy: config('motions_export_category_sorting')"
            value="{{ category.id }}">
          {{ category.prefix }} &ndash; {{ category.name }}
        </option>
        <option value="no_category_selected" translate>No category</option>
      </select>
      <!-- set category button -->
      <a ng-show="selectedAction == 'setCategory' && selectedCategory"
          ng-click="setCategoryMultiple(amendmentsFiltered, selectedCategory)" class="btn btn-default btn-sm">
        <translate>Set category</translate>
      </a>
      <!-- motionBlock select -->
      <select ng-show="selectedAction == 'setMotionBlock'" ng-model="selectedMotionBlock" class="form-control input-sm">
        <option value="" translate>--- Select motion block ---</option>
        <option ng-repeat="motionBlock in motionBlocks" value="{{ motionBlock.id }}">
          {{ motionBlock.title }}
        </option>
        <option value="no_motionBlock_selected" translate>No motion block</option>
      </select>
      <!-- set motion block button -->
      <a ng-show="selectedAction == 'setMotionBlock' && selectedMotionBlock"
         ng-click="setMotionBlockMultiple(amendmentsFiltered, selectedMotionBlock)" class="btn btn-default btn-sm">
        <translate>Set motion block</translate>
      </a>
      <!-- delete button -->
      <a ng-show="selectedAction == 'delete'"
        ng-bootbox-confirm="{{ 'Are you sure you want to delete all selected amendments?' | translate }}"
        ng-bootbox-confirm-action="deleteMultiple(amendmentsFiltered)"
        class="btn btn-default btn-sm btn-danger">
        <i class="fa fa-trash fa-lg"></i>
        <translate>Delete selected amendments</translate>
      </a>
    </div>
  </div>

  <div class="spacer-top-lg italic row">
    <div class="col-md-6">
      {{ amendmentsFiltered.length }} /
      {{ amendments.length }}
      <translate>amendments</translate><span ng-if="(amendments|filter:{selected:true}).length > 0">,
      {{(amendments|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
    </div>
    <div class="col-md-6" ng-show="amendmentsFiltered.length > pagination.itemsPerPage">
      <span class="pull-right">
        <translate>Page</translate> {{ pagination.currentPage }} /
        {{ Math.ceil(amendmentsFiltered.length/pagination.itemsPerPage) }}
      </span>
    </div>
  </div>

  <div class="os-table container-fluid">
    <div class="row header-row">
      <div class="col-xs-1 centered" ng-if="isSelectMode">
        <i class="fa text-danger pointer" ng-class=" selectedAll ? 'fa-check-square-o' : 'fa-square-o'"
          ng-click="checkAll(amendmentsFiltered)"></i>
      </div>
      <div class="col-xs-11 main-header" ng-style="{'width': isSelectMode ? '' : '100%'}">
        <ng-include src="'static/templates/motions/motion-table-filters.html'"></ng-include>
      </div>
    </div>

    <!-- main table -->
    <div class="row data-row" ng-repeat="amendment in amendmentsFiltered = (amendments
      | osFilter: filter.filterString : filter.getObjectQueryString
      | MultiselectFilter: stateFilter : getItemId.state
      | MultiselectFilter: filter.multiselectFilters.comment : getItemId.comment
      | MultiselectFilter: filter.multiselectFilters.category : getItemId.category
      | MultiselectFilter: filter.multiselectFilters.motionBlock : getItemId.motionBlock
      | MultiselectFilter: filter.multiselectFilters.recommendation : getItemId.recommendation
      | MultiselectFilter: filter.multiselectFilters.tag : getItemId.tag
      | filter: {star: filter.booleanFilters.isFavorite.value}
      | filter: {hasPersonalNote: filter.booleanFilters.hasPersonalNote.value}
      | filter: {isAmendment: filter.booleanFilters.isAmendment.value}
      | toArray
      | orderByEmptyLast: sort.column : sort.reverse)
      | limitTo : pagination.itemsPerPage : pagination.limitBegin"
      ng-class="{'projected': amendment.isProjected().length}">

      <!-- select column -->
      <div ng-show="isSelectMode" os-perms="motions.can_manage" class="col-xs-1 centered">
        <i class="fa text-danger pointer" ng-click="amendment.selected=!amendment.selected"
        ng-class="amendment.selected ? 'fa-check-square-o' : 'fa-square-o'"></i>
      </div>
      <!-- projector column -->
      <div class="col-xs-1 centered projector" os-perms="core.can_manage_projector">
        <projector-button model="amendment" default-projector-id="defaultProjectorId">
        </projector-button>
      </div>
      <div class="no-projector-spacer" os-perms="!core.can_manage_projector"></div>
      <!-- data -->
      <div class="col-xs-2 content">
        <div>
          <!-- ID and title -->
          <div>
            <a class="title" ui-sref="motions.motion.detail({id: amendment.id})">
              <span ng-if="amendment.identifier">{{ amendment.identifier }}</span>
              <span ng-if="!amendment.identifier">{{ amendment.getTitle() }}</span>
              <span ng-if="amendment.isParagraphBasedAmendment()"
                  ng-init="paragraph = amendment.getAmendmentParagraphsLinesDiff()[0]">
                <span ng-if="paragraph">
                  <br>
                  <span ng-if="paragraph.diffLineTo == paragraph.diffLineFrom + 1">
                    (<translate>Line</translate> {{ paragraph.diffLineFrom }})
                  </span>
                  <span ng-if="paragraph.diffLineTo != paragraph.diffLineFrom + 1">
                    (<translate>Line</translate> {{ paragraph.diffLineFrom }}-{{ paragraph.diffLineTo }})
                  </span>
                </span>
              </span>
            </a>
            <a href="" ng-click="toggleStar(amendment)">
              <i class="fa" ng-class="amendment.personalNote.star ? 'fa-star' : 'fa-star-o'"
                title="{{ 'Set as favorite' | translate }}" ng-if="(amendment.personalNote.star || amendment.hover) && operator.user"></i>
            </a>
            <i class="fa fa-paperclip" ng-if="amendment.attachments_id.length > 0"></i>
          </div>

          <!-- state -->
          <div os-perms="!motions.can_manage">
            <span class="label" ng-class="'label-'+amendment.state.css_class">
              {{ amendment.getStateName() }}
            </span>
          </div>
          <div os-perms="motions.can_manage" uib-dropdown>
            <a class="pointer label" uib-dropdown-toggle id="stateDropdown{{ amendment.id }}"
               ng-class="'label-'+amendment.state.css_class">
              {{ amendment.getStateName() }}
            </a>
            <ul class="dropdown-menu" aria-labelledby="stateDropdown{{ amendment.id }}">
              <li ng-repeat="state in amendment.state.getNextStates()">
                <a href ng-click="amendment.setState(state.id)">{{ state.action_word | translate }}</a>
              </li>
              <li class="divider" ng-if="amendment.state.getNextStates().length"></li>
              <li>
                <a href ng-if="amendment.isAllowed('reset_state')" ng-click="amendment.setState(null)">
                  <i class="fa fa-exclamation-triangle"></i>
                  <translate>Reset state</translate>
                </a>
              </li>
            </ul>
          </div>

          <!-- recommendation -->
          <div ng-if="config('motions_recommendations_by')">
            <span os-perms="!motions.can_manage">
              <span ng-if="amendment.recommendation" class="label"
                ng-class="'label-'+amendment.recommendation.css_class">
                {{ amendment.getRecommendationName() }}
              </span>
              <span ng-if="!amendment.recommendation" class="label label-default"
                uib-tooltip="{{ config('motions_recommendations_by') }}" translate>
                No recomendation set
              </span>
            </span>
            <span os-perms="motions.can_manage" uib-dropdown>
              <a class="pointer" uib-dropdown-toggle id="recommendationDropdown{{ amendment.id }}">
                <span ng-if="amendment.recommendation" class="label"
                  ng-class="'label-'+amendment.recommendation.css_class">
                  {{ amendment.getRecommendationName() }}
                </span>
                <span ng-if="!amendment.recommendation" class="label label-default"
                  uib-tooltip="{{ config('motions_recommendations_by') }}" translate>
                  No recomendation set
                </span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="recommendationDropdown{{ amendment.id }}">
                <li ng-repeat="recommendation in amendment.state.getRecommendations()">
                  <a href ng-click="amendment.setRecommendation(recommendation.id)">
                    {{ recommendation.recommendation_label | translate }}
                  </a>
                </li>
                <li class="divider" ng-if="amendment.state.getRecommendations().length && amendment.recommendation"></li>
                <li ng-if="amendment.recommendation">
                  <a href ng-click="amendment.setRecommendation(null)">
                    <i class="fa fa-exclamation-triangle"></i>
                    <translate>Reset recommendation</translate>
                  </a>
                </li>
              </ul>
            </span>
          </div>
          <!-- Submitters -->
          <div ng-if="amendment.submitters.length">
            <small>
              <span class="optional" translate>by</span>
              <span class="optional" ng-repeat="submitter in amendment.submitters | orderBy: 'weight' | limitTo:1">
                {{ submitter.user.get_full_name() }}<span ng-if="!$last">,</span></span><span ng-if="amendment.submitters.length > 1">,
                ... [+{{ amendment.submitters.length - 1 }}]</span>
              <!-- sorry for merging them together, but otherwise there would be a whitespace because of the new line -->
            </small>
          </div>
          <!-- hover menu -->
          <div ng-if="amendment.isAllowed('update')">
            <small>
              <a href="" ng-click="openDialog(amendment)" translate>Edit</a>
              <span ng-if="amendment.isAllowed('update_submitters')"> &middot;
                <a ui-sref="motions.motion.submitters({id: amendment.id})" translate>
                  Edit submitters
                </a>
              </span>
              <span ng-if="amendment.isAllowed('delete')"> &middot;
                <a href="" class="text-danger"
                    ng-bootbox-confirm="{{ 'Are you sure you want to delete this entry?' | translate }}<br><b>{{ amendment.getTitle() }}</b>"
                    ng-bootbox-confirm-action="delete(amendment)" translate>Delete</a>
              </span>
            </small>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-space">
        <!-- The diff -->
        <section class="motion-text-holder" ng-if="amendment.isParagraphBasedAmendment()"
          ng-init="paragraphs = amendment.getAmendmentParagraphsLinesDiff()">
          <div ng-if="!paragraphs.length" translate>
            No changes at the text.
          </div>
          <div ng-repeat="paragraph in paragraphs" class="motion-text motion-text-diff line-numbers-none">
            <div ng-bind-html="paragraph.text | trusted"></div>
          </div>
        </section> <!-- Diff end -->
        <div ng-if="!amendment.isParagraphBasedAmendment()">
          {{ getTextPreview(amendment.getText(), 400) }}
        </div>
      </div>
      <!-- last column -->
      <div class="col-xs-4 content" ng-style="{'width': isSelectMode ? 'calc(33.33% - 120px)' : 'calc(33.33% - 70px)'}">
        <div style="width: 90%;">
          <div ng-repeat="(id, field) in noSpecialCommentsFields">
            <div class="nobr" style="overflow: hidden;">
              <i class="fa pointer spacer-right" ng-class="field[amendment.id] ? 'fa-caret-down' : 'fa-caret-right'"
                ng-click="field[amendment.id] = !field[amendment.id]"
                ng-if="isTextExpandable(amendment.comments[id], 30)"></i>
              <strong>{{ field.name }}</strong>
            </div>
            <div ng-if="!field[amendment.id]">
              {{ getTextPreview(amendment.comments[id], 30) }}
            </div>
            <div ng-if="field[amendment.id]" ng-bind-html="amendment.comments[id]"></div>
          </div>

          <div class="spacer-top" os-perms="motions.can_manage">
            <button class="btn-link" ng-click="createModifiedAmendment(amendment)">
              <translate>Create modified amendment</translate>
            </button>
          </div>
        </div>

        <div class="pull-right" style="width: 10%;">
          <div class="centered" ng-if="config('motions_min_supporters') != 0"
            uib-tooltip="{{ amendment.supporters.length }} {{ 'Supporters' | translate }}
            {{ (config('motions_min_supporters') - amendment.supporters.length) > 0 ? '(' +  (config('motions_min_supporters') - amendment.supporters.length) + ' ' + ('needed' | translate) + ')': '' }}"
            tooltip-class="nobr">
            <span class="badge"
              ng-class="amendment.supporters.length < config('motions_min_supporters') ? 'badge-info' : 'badge-success'">
              {{ amendment.supporters.length }}
            </span>
          </div>
        </div>

      </div>
    </div>

    <ul uib-pagination
        ng-show="amendmentsFiltered.length > pagination.itemsPerPage"
        total-items="amendmentsFiltered.length"
        items-per-page="pagination.itemsPerPage"
        ng-model="pagination.currentPage"
        ng-change="pagination.pageChanged()"
        class="pagination-sm"
        direction-links="false"
        boundary-links="true"
        first-text="&laquo;"
        last-text="&raquo;">
    </ul>

  </div> <!-- container -->
</div>
</div>
</div>
