<div class="header">
  <div class="title">
    <div class="submenu">
      <!-- new -->
      <a ng-click="newDialog()" os-perms="agenda.can_manage"
          class="btn btn-primary btn-sm">
        <i class="fa fa-plus fa-lg"></i>
        <translate>New</translate>
      </a>
      <!-- import -->
      <span os-perms="agenda.can_manage">
        <a ui-sref="topics.topic.import"
          os-perms="agenda.can_see_internal_items"
          class="btn btn-default btn-sm">
          <i class="fa fa-download fa-lg"></i>
          <translate>Import</translate>
        </a>
      </span>
      <!-- current list of speakers -->
      <a ui-sref="agenda.current-list-of-speakers" os-perms="users.can_see_name"
          class="btn btn-default btn-sm">
        <i class="fa fa-microphone fa-lg"></i>
        <translate>Current list of speakers</translate>
      </a>
      <!-- project agenda button -->
      <div class="btn-group button" uib-dropdown
        uib-tooltip="{{ 'Projector' | translate }} {{ isAgendaProjected(mainListTree)[0] || '' }}"
        tooltip-enable="isAgendaProjected(mainListTree).length"
        os-perms="core.can_manage_projector">
        <button type="button" class="btn btn-default btn-sm"
            title="{{ 'Project agenda' | translate }}"
            ng-click="projectAgenda(defaultProjectorId_all_items, mainListTree)"
            ng-class="{ 'btn-primary': isAgendaProjected(mainListTree).length && inArray(isAgendaProjected(mainListTree), defaultProjectorId_all_items)}">
          <i class="fa fa-video-camera"></i>
          <translate>Agenda</translate>
        </button>
        <button type="button" class="btn btn-default btn-sm" uib-dropdown-toggle
            ng-class="{ 'btn-primary': isAgendaProjected(mainListTree).length && !inArray(isAgendaProjected(mainListTree), defaultProjectorId_all_items)}"
            ng-if="agendaHasSubitems || projectors.length > 1">
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="split-button" ng-if="agendaHasSubitems || projectors.length > 1">
          <li role="menuitem" ng-show="agendaHasSubitems">
            <a href="" ng-click="changeMainListTree(); $event.stopPropagation();">
              <i class="fa" ng-class="mainListTree ? 'fa-square-o' : 'fa-check-square-o'"></i>
              <translate>Only main agenda items</translate>
            </a>
          </li>
          <li class="divider" ng-show="agendaHasSubitems && projectors.length > 1"></li>
          <li role="menuitem" ng-repeat="projector in projectors | orderBy:'id'" ng-show="projectors.length > 1">
            <a href="" ng-click="projectAgenda(projectorId=projector.id, tree=mainListTree)"
              ng-class="{ 'projected': inArray(isAgendaProjected(mainListTree), projector.id) }">
              <i class="fa fa-video-camera" ng-show="inArray(isAgendaProjected(mainListTree), projector.id) "></i>
              {{ projector.name | translate }}
              <span ng-if="projector.id == defaultProjectorId_all_items">(<translate>Default</translate>)</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <h1 translate>Agenda</h1>
  </div>
</div>

<div class="details">
  <div class="row">
    <div class="col-sm-12">
      <!-- select mode -->
      <button os-perms="agenda.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>
      <!-- sort button -->
      <span os-perms="agenda.can_see_internal_items">
        <a ui-sref="agenda.item.sort" os-perms="agenda.can_manage" class="btn btn-default btn-sm">
          <i class="fa fa-sitemap fa-lg"></i>
          <translate>Sort ...</translate>
        </a>
      </span>
      <!-- auto numbering button -->
      <span ng-if="config('agenda_enable_numbering')">
        <button os-perms="agenda.can_manage" class="btn btn-default btn-sm"
          ng-bootbox-confirm="{{ 'Are you sure you want to number all agenda items?' | translate }}"
          ng-bootbox-confirm-action="autoNumbering()">
          <i class="fa fa-sort-numeric-asc"></i>
          <translate>Numbering</translate>
        </button>
      </span>
      <!-- Export drop down list (for manager) -->
      <div os-perms="motions.can_manage" 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="itemsFiltered.length == items.length" translate>
            Export all
          </span>
          <span ng-if="itemsFiltered.length != items.length" translate>
            Export filtered
          </span>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownExport">
          <!-- PDF export -->
          <li>
            <a href="" ng-click="pdfExport()">
              <i class="fa fa-file-pdf-o"></i>
              PDF
            </a>
          </li>
          <!-- CSV export -->
          <li os-perms="agenda.can_manage">
            <a href="" id="downloadLinkCSV"
              ng-click="csvExport()">
              <i class="fa fa-file-text-o"></i>
              CSV
            </a>
          </li>
          <!-- DOCX export -->
          <li>
            <a href="" ng-click="docxExport()">
              <i class="fa fa-file-word-o"></i>
              DOCX
            </a>
          </li>
        </ul>
      </div>
      <!-- Export button (for normal users) -->
      <button type="button" class="btn btn-default btn-sm pull-right"
        os-perms="!motions.can_manage" ng-click="pdfExport()">
        <i class="fa fa-file-pdf-o"></i>
        <span ng-if="itemsFiltered.length == items.length" translate>
          Export all
        </span>
        <span ng-if="itemsFiltered.length != items.length" translate>
          Export filtered
        </span>
      </button>
    </div>
  </div>
  <div uib-collapse="!isSelectMode" class="row spacer">
    <div class="col-sm-12 text-left form-inline" os-perms="agenda.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="setType" translate>Set visibility</option>
        <option value="setState" translate>Set state</option>
      </select>
      <!-- Type (visibility) -->
      <select ng-show="selectedAction == 'setType'" ng-model="selectedType" class="form-control input-sm">
        <option value="" translate>--- Select visibility ---</option>
        <option value="{{ AGENDA_ITEM }}" translate>
          Public
        </option>
        <option value="{{ INTERNAL_ITEM }}" translate>
          Internal
        </option>
        <option value="{{ HIDDEN_ITEM }}" translate>
          Hidden
        </option>
      </select>
      <!-- set type button -->
      <a ng-show="selectedAction == 'setType' && selectedType"
          ng-click="setTypeMultiple(selectedType)" class="btn btn-default btn-sm">
        <translate>Set visibility</translate>
      </a>
      <!-- set state buttons -->
      <a ng-show="selectedAction == 'setState'"
          ng-click="setStateMultiple(true)" class="btn btn-default btn-sm">
        <i class="fa fa-check-square-o"></i>
        <translate>Done</translate>
      </a>
      <a ng-show="selectedAction == 'setState'"
          ng-click="setStateMultiple(false)" class="btn btn-default btn-sm">
        <i class="fa fa-square-o"></i>
        <translate>Open</translate>
      </a>
      <!-- delete button -->
      <a ng-if="selectedAction === 'delete'"
        ng-bootbox-confirm="{{ 'Are you sure you want to delete all selected agenda items?' | translate }}"
        ng-bootbox-confirm-action="deleteMultiple()"
        class="btn btn-default btn-sm btn-danger">
        <i class="fa fa-trash fa-lg"></i>
        <translate>Delete selected items</translate>
      </a>
    </div>
  </div>

  <div class="spacer-top-lg italic row">
    <div class="col-md-6">
      <span os-perms="agenda.can_see_internal_items">{{ itemsFiltered.length }} /</span>
      {{ (items|filter:{is_hidden:false}).length }} {{ "items" | translate }}<span ng-if="(items|filter:{selected:true}).length > 0">,
      {{(items|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
      <span os-perms="agenda.can_see_internal_items" class="optional">
        <span ng-if="sumDurations() > 0">&middot;
          <translate>Duration</translate>:
          {{ sumDurations() | osMinutesToTime }}h
          <span ng-if="config('agenda_start_event_date_time')">
            (<translate>Estimated end:</translate> {{ calculateEndTime() }})
          </span>
        </span>
      </span>
      <span ng-if="agendaHasMultipleLayers() && items.length === itemsSearched.length">
        &middot;
        <a href="" ng-click="toggleCollapseState()">
          <span ng-if="collapseState" translate>Expand all</span>
          <span ng-if="!collapseState" translate>Collapse all</span>
        </a>
      </span>
    </div>
    <div class="col-md-6" ng-show="itemsFiltered.length > pagination.itemsPerPage">
      <span class="pull-right">
        <a href="" class="pagination-arrow" ng-click="pagination.prevPage()"
          ng-if="pagination.showPrevPageArrow()">
          &laquo;
        </a>
        <translate>Page</translate> {{ pagination.currentPage }} /
        {{ pagination.getPageCount(itemsFiltered) }}
        <a href="" class="pagination-arrow" ng-click="pagination.nextPage(itemsFiltered)"
          ng-if="pagination.showNextPageArrow(itemsFiltered)">
          &raquo;
        </a>
      </span>
    </div>
  </div>

  <div id="agenda-table" class="os-table container-fluid">
    <div class="row header-row">
      <div class="col-xs-1 centered" ng-show="isSelectMode">
        <i class="fa text-danger pointer" ng-class="selectedAll ? 'fa-check-square-o' : 'fa-square-o'"
          ng-click="checkAll()"></i>
      </div>
      <div class="col-xs-11 main-header">
        <span class="form-inline text-right pull-right">
          <!-- clear all filters -->
          <span class="sort-spacer pointer" ng-click="resetFilters(isSelectMode)"
            ng-if="areFiltersSet()" ng-disabled="isSelectMode"
            ng-class="{'disabled': isSelectMode}">
            <i class="fa fa-window-close"></i>
            <translate>Filter</translate>
          </span>
          <!-- boolean Filters -->
          <!-- State -->
          <span uib-dropdown>
            <span class="sort-spacer pointer" id="dropdownItems" uib-dropdown-toggle
              ng-class="{'bold': filter.booleanFilters.closed.value !== filter.booleanFilters.closed.defaultValue,
                  'disabled': isSelectMode}"
              ng-disabled="isSelectMode">
              <translate>State</translate>
              <span class="caret"></span>
            </span>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownItems">
              <li>
                <a href ng-click="filter.booleanFilters.closed.value = (filter.booleanFilters.closed.value ? undefined : true); filter.save();">
                  <i class="fa" ng-class="{'fa-check': filter.booleanFilters.closed.value === true}"></i>
                  {{ filter.booleanFilters.closed.choiceYes | translate }}
                </a>
              </li>
              <li>
                <a href ng-click="filter.booleanFilters.closed.value = (filter.booleanFilters.closed.value === false) ? undefined : false; filter.save();">
                  <i class="fa" ng-class="{'fa-check': filter.booleanFilters.closed.value === false}"></i>
                  {{ filter.booleanFilters.closed.choiceNo | translate }}
                </a>
              </li>
            </ul>
          </span>
          <!-- Visibility -->
          <span uib-dropdown>
            <span class="sort-spacer pointer" id="dropdownItems" uib-dropdown-toggle
              ng-class="{'bold': areVisibilityFiltersSet(),
                  'disabled': isSelectMode}"
              ng-disabled="isSelectMode">
              <translate>Visibility</translate>
              <span class="caret"></span>
            </span>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownItems">
              <li>
                <a href ng-click="filter.booleanFilters.is_public.value = !filter.booleanFilters.is_public.value; filter.save();">
                  <i class="fa" ng-class="{'fa-check': filter.booleanFilters.is_public.value}"></i>
                  <translate>Public items</translate>
                </a>
              </li>
              <li os-perms="agenda.can_see_internal_items">
                <a href ng-click="filter.booleanFilters.is_internal.value = !filter.booleanFilters.is_internal.value; filter.save();">
                  <i class="fa" ng-class="{'fa-check': filter.booleanFilters.is_internal.value}"></i>
                  <translate>Internal items</translate>
                </a>
              </li>
              <li os-perms="agenda.can_see_internal_items agenda.can_manage">
                <a href ng-click="filter.booleanFilters.is_hidden.value = !filter.booleanFilters.is_hidden.value; filter.save();">
                  <i class="fa" ng-class="{'fa-check': filter.booleanFilters.is_hidden.value}"></i>
                  <translate>Hidden items</translate>
                </a>
              </li>
            </ul>
          </span>
          <!-- search field -->
          <span class="form-group">
            <span class="input-group">
              <span class="input-group-addon"><i class="fa fa-search"></i></span>
              <input type="text" ng-model="filter.filterString" class="form-control"
                 placeholder="{{ 'Search' | translate}}" ng-disabled="isSelectMode"
                 ng-change="filter.save()">
            </span>
          </span>
        </span>
        <!-- show all selected multiselectoptions -->
        <span>
          <!-- for all boolean Filters -->
          <span ng-repeat="(name, booleanFilter) in filter.booleanFilters"
            ng-hide="booleanFilter.value === booleanFilter.defaultValue"
            class="pointer spacer-left-lg"
            ng-click="booleanFilter.value = booleanFilter.defaultValue; filter.save();"
            ng-class="{'disabled': isSelectMode}">
            <span class="nobr">
              <i class="fa fa-times-circle"></i>
              {{ booleanFilter.value ? booleanFilter.choiceYes : booleanFilter.choiceNo | translate }}
            </span>
          </span>
        </span>
      </div>
    </div>

    <!-- main table -->
    <div class="row data-row" ng-mouseover="item.hover=true"
      ng-mouseleave="item.hover=false"
      ng-class="{'projected': item.isProjected().length,
      'related-projected': item.isRelatedProjected().length}"
      ng-repeat="item in itemsFiltered = (itemsSearched = (items
        | osFilter : filter.filterString : filter.getObjectQueryString)
        | filter : {closed: filter.booleanFilters.closed.value}
        | itemTypeFilter : filter.booleanFilters)
        | collapsedItemFilter
        | limitTo : pagination.itemsPerPage : pagination.limitBegin">

      <!-- select column -->
      <div ng-show="isSelectMode" os-perms="agenda.can_manage" class="col-xs-1 centered">
        <i class="fa text-danger pointer" ng-click="item.selected=!item.selected"
        ng-class="item.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">
        <div class="btn-group" style="min-width:{{ (item.hasSubitems(items) || projectors.length > 1) ? '54' : '34' }}px;" uib-dropdown
          uib-tooltip="{{ 'Projector' | translate }} {{ item.isProjected(item.tree)[0] || '' }}"
          tooltip-enable="item.isProjected(item.tree).length">
          <button class="btn btn-default btn-sm"
              ng-click="item.project(getProjectionDefault(item), item.tree)"
              ng-class="{ 'btn-primary': item.isProjected(item.tree).length && inArray(item.isProjected(item.tree), getProjectionDefault(item))}">
            <i class="fa fa-video-camera"></i>
          </button>
          <button type="button" class="btn btn-default btn-sm slimDropDown"
              ng-class="{ 'btn-primary': item.isProjected(item.tree).length && !inArray(item.isProjected(item.tree), getProjectionDefault(item))}"
              ng-if="item.hasSubitems(items) || projectors.length > 1"
              uib-dropdown-toggle>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="split-button"
            ng-if="item.hasSubitems(items) || projectors.length > 1">
            <li role="menuitem" ng-show="item.hasSubitems(items)">
              <a href="" ng-click="changeItemTree(item); $event.stopPropagation();">
                <i class="fa" ng-class="item.tree ? 'fa-check-square-o' : 'fa-square-o'"></i>
                <translate>Include all sub items</translate>
              </a>
            </li>
            <li class="divider" ng-show="item.hasSubitems(items)"></li>
            <li role="menuitem" ng-repeat="projector in projectors | orderBy:'id'">
              <a href="" ng-click="item.project(projector.id, item.tree)"
                ng-class="{ 'projected': inArray(item.isProjected(item.tree), projector.id) }">
                <i class="fa fa-video-camera" ng-show="inArray(item.isProjected(item.tree), projector.id)"></i>
                {{ projector.name | translate }}
                <span ng-if="projector.id == getProjectionDefault(item)">(<translate>Default</translate>)</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="no-projector-spacer" os-perms="!core.can_manage_projector"></div>

      <!-- main content column -->
      <div class="col-xs-6 content"
        style="padding-left: calc({{ items.length === itemsSearched.length ? item.parentCount : 0 }}*25px)">
        <div class="caret-spacer" ng-if="items.length === itemsSearched.length">
          <i class="fa pointer"
            ng-style="{visibility: hasChildren(item) ? 'visible' : 'hidden'}"
            ng-class="item.hideChildren ? 'fa-caret-right' : 'fa-caret-down'"
            ng-click="item.hideChildren = !item.hideChildren"></i>
        </div>
        <div class="title-column">
          <!-- ID and title -->
          <div>
            <a class="title" ui-sref="{{ item.getContentObjectDetailState() }}" ng-show="isAllowedToSeeOpenLink(item)">
              {{ item.getListViewTitle() }}
            </a>
            <span class="title" ng-hide="isAllowedToSeeOpenLink(item)">
              {{ item.getListViewTitle() }}
            </span>
          </div>
          <!-- hover menu -->
          <div os-perms="agenda.can_see" ng-class="{'hiddenDiv': !item.hover}">
            <small>
              <a ui-sref="agenda.item.detail({id: item.id})" translate>List of speakers</a>
              <span os-perms="agenda.can_manage"> &middot;
                <a href="" ng-click="edit(item)" translate>Edit</a> &middot;
                <a href="" class="text-danger"
                  ng-bootbox-confirm="{{ 'Are you sure you want to delete this entry?' | translate }}<br>
                    <b>{{ item.getTitle() }}</b>"
                  ng-bootbox-confirm-action="deleteRelatedItem(item)" translate>Delete</a>
              </span>
            </small>
          </div>

        </div>
      </div>
      <!-- additional content column -->
      <div class="col-xs-4 content" ng-style="{'width': isSelectMode ? 'calc(50% - 120px)' : 'calc(50% - 70px)'}">
        <div style="width: 60%;" class="optional">
          <small>
            <!-- type dropdown for managers -->
            <div os-perms="agenda.can_manage">
              <div ng-mouseover="typeHover=true" ng-mouseleave="typeHover=false">
                <span uib-dropdown>
                  <span id="dropdownType{{ item.id }}" class="pointer"
                    uib-dropdown-toggle uib-tooltip="{{ 'Change visibility' | translate }}"
                    tooltip-class="nobr">
                    <span ng-if="item.is_public && item.hover">
                      <i class="fa fa-eye"></i>
                      <translate>Public</translate>
                    </span>
                    <span ng-if="item.is_internal">
                      <i class="fa fa-eye"></i>
                      <translate>Internal</translate>
                    </span>
                    <span ng-if="item.is_hidden">
                      <i class="fa fa-eye"></i>
                      <translate>Hidden</translate>
                    </span>
                    <i class="fa fa-cog fa-lg spacer-left" ng-show="typeHover"></i>
                  </span>
                  <ul class="dropdown-menu" aria-labelledby="dropdownType{{ item.id }}">
                    <li>
                      <a href ng-click="item.type = AGENDA_ITEM; save(item);" translate>
                        Public item
                      </a>
                    </li>
                    <li>
                      <a href ng-click="item.type = INTERNAL_ITEM; save(item);" translate>
                        Internal item
                      </a>
                    </li>
                    <li>
                      <a href ng-click="item.type = HIDDEN_ITEM; save(item);" translate>
                        Hidden item
                      </a>
                    </li>
                  </ul>
                </span>
              </div>
            </div>
            <!-- type for non-managers -->
            <div os-perms="!agenda.can_manage">
              <span ng-if="item.is_public && item.hover">
                <i class="fa fa-eye"></i>
                <translate>Public</translate>
              </span>
              <span ng-if="item.is_internal">
                <i class="fa fa-eye"></i>
                <translate>Internal</translate>
              </span>
              <span ng-if="item.is_hidden">
                <i class="fa fa-eye"></i>
                <translate>Hidden</translate>
              </span>
            </div>
            <!-- Duration -->
            <div ng-style="{'visibility': (item.duration || item.hover) ? 'visible' : 'hidden'}">
              <div class="popover-wrapper" os-perms="agenda.can_manage">
                <i class="fa fa-clock-o"></i>
                <span editable-text="item.durationText" e-placeholder="hh:mm"
                  onshow="generateDurationText(item)" onaftersave="setDurationText(item)">
                  <span ng-if="!item.duration" translate>Set duration ...</span>
                  <span ng-if="item.duration">
                    {{ (item.duration | osMinutesToTime)}}
                    <translate translate-comment="'h' means time in hours">h</translate>
                  </span>
                </span>
              </div>
              <div os-perms="!agenda.can_manage">
                <div os-perms="agenda.can_see_internal_items">
                  <span ng-if="item.duration">
                    <i class="fa fa-clock-o"></i> {{ item.duration | osMinutesToTime }}
                      <translate translate-comment="'h' means time in hours">h</translate>
                  </span>
                </div>
              </div>
            </div>
            <!-- Comment -->
            <div ng-style="{'visibility': (item.comment || item.hover) ? 'visible' : 'hidden'}">
              <div class="popover-wrapper" os-perms="agenda.can_manage">
                <i class="fa fa-info-circle"></i>
                <span editable-text="item.comment" onaftersave="save(item)">
                  <span ng-if="!item.comment" translate>Set comment ...</span>
                  <span ng-if="item.comment">{{ item.comment }}</span>
                </span>
              </div>
            </div>
            <!-- Number -->
            <div ng-style="{'visibility': ((item.is_public) && item.hover) ? 'visible' : 'hidden'}" os-perms="agenda.can_manage">
              <div class="popover-wrapper" os-perms="agenda.can_manage">
                <i class="fa fa-info-circle"></i>
                <span editable-text="item.item_number" onaftersave="save(item)">
                  <span ng-if="!item.item_number" translate>Set item number ...</span>
                  <span ng-if="item.item_number"><em translate>Change item number ...</em></span>
                </span>
              </div>
            </div>
            <template-hook hook-name="agendaListAdditionalContentColumn"></template-hook>
          </small>
        </div>
        <div style="width: 40%;" class="pull-right">
          <div os-perms="agenda.can_manage">
            <div class="pointer nobr" ng-click="item.closed = !item.closed; save(item);" ng-show="item.hover || item.closed">
              <i class="fa" ng-class="item.closed ? 'fa-check-square-o' : 'fa-square-o'"></i>
              <span class="spacer-left" translate>Done</span>
            </div>
          </div>
          <div os-perms="!agenda.can_manage" >
            <div ng-show="item.closed">
              <i class="fa fa-check-square-o"></i>
              <span class="spacer-left" translate>Done</span>
            </div>
          </div>
        </div>
      </div>
    </div> <!-- data row -->

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

  <ul uib-pagination
      ng-show="itemsFiltered.length > pagination.itemsPerPage"
      total-items="itemsFiltered.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> <!-- details -->
