<div id="bootstrap-theme" class="crm-search">
  <h1 crm-page-title>{{ $ctrl.entityTitle + ': ' + $ctrl.savedSearch.label }}</h1>
  <div crm-ui-debug="$ctrl.savedSearch"></div>

  <!--This warning will show if bootstrap is unavailable. Normally it will be hidden by the bootstrap .collapse class.-->
  <div class="messages warning no-popup collapse">
    <p>
      <i class="crm-i fa-exclamation-triangle" aria-hidden="true"></i>
      <strong>{{:: ts('Bootstrap theme not found.') }}</strong>
    </p>
    <p>{{:: ts('This screen may not work correctly without a bootstrap-based theme such as Shoreditch installed.') }}</p>
  </div>

  <form>
    <div class="crm-flex-box crm-search-admin-outer">
      <div class="crm-flex-1">
        <input id="crm-saved-search-label" class="form-control" ng-model="$ctrl.savedSearch.label" type="text" required placeholder="{{:: ts('Untitled Search') }}" ng-model-options="$ctrl.debounceMode" title="{{:: ts('Saved Search label')}}">
      </div>
      <div class="crm-flex-1 form-inline">
        <div class="btn-group">
          <button type="button" class="btn" ng-class="{'btn-primary': status === 'unsaved', 'btn-warning': status === 'saving', 'btn-success': status === 'saved'}" ng-disabled="status !== 'unsaved'" ng-click="$ctrl.save()">
            <i class="crm-i" ng-class="{'fa-check': status !== 'saving', 'fa-spin fa-spinner': status === 'saving'}"></i>
            <span ng-if="status === 'saved'">{{:: ts('Saved') }}</span>
            <span ng-if="status === 'unsaved'">{{:: ts('Save') }}</span>
            <span ng-if="status === 'saving'">{{:: ts('Saving...') }}</span>
          </button>
        </div>

        <div class="form-group pull-right">

          <div class="btn-group" ng-if="$ctrl.afformEnabled && $ctrl.savedSearch.id">
            <button type="button" ng-click="$ctrl.openAfformMenu = true;" class="btn dropdown-toggle btn-primary-outline" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="crm-i fa-list-alt"></i>
              {{ ($ctrl.afformCount !== undefined) ? ($ctrl.afformCount === 1 ? ts('1 Form') : ts('%1 Forms', {1: $ctrl.afformCount})) : ts('Forms...') }}
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" ng-if=":: $ctrl.openAfformMenu">
              <li ng-if=":: $ctrl.afformAdminEnabled">
                <a target="_blank" ng-href="{{:: $ctrl.afformPath + '#/create/search/' + $ctrl.savedSearch.name }}">
                  <i class="fa fa-plus"></i> {{:: ts('Create form for search results table') }}
                </a>
              </li>
              <li ng-repeat="display in $ctrl.savedSearch.displays" ng-if="$ctrl.afformAdminEnabled && display.id">
                <a target="_blank" ng-href="{{:: $ctrl.afformPath + '#/create/search/' + $ctrl.savedSearch.name + '.' + display.name }}">
                  <i class="fa fa-plus"></i> {{:: ts('Create form for %1', {1: display.label}) }}
                </a>
              </li>
              <li class="divider" role="separator" ng-if="$ctrl.afformAdminEnabled && $ctrl.afforms.length">
              </li>
              <li ng-if="!$ctrl.afforms" class="disabled">
                <a href>
                  <i class="crm-i fa-spinner fa-spin"></i>
                </a>
              </li>
              <li ng-repeat="afform in $ctrl.afforms" title="{{:: $ctrl.afformAdminEnabled ? ts('Edit form') : '' }}">
                <a target="_blank" ng-href="{{:: afform.link }}">
                  <i class="crm-i {{:: $ctrl.afformAdminEnabled ? 'fa-pencil-square-o' : 'fa-list-alt' }}"></i>
                  {{:: afform.title }}
                </a>
              </li>
            </ul>
          </div>

          <div class="btn-group crm-search-admin-links" ng-if="$ctrl.savedSearch.id">
            <a ng-href="{{ $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name }}" target="_blank" class="btn btn-primary-outline" title="{{:: ts('View search results table') }}">
              <i class="crm-i fa-external-link"></i>
              {{:: ts('View Results') }}
            </a>
            <button type="button" ng-click="$ctrl.openDisplayMenu = true;" class="btn btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="caret"></span>
              <span class="sr-only">{{:: ts('View results using display')}}</span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" ng-if=":: $ctrl.openDisplayMenu">
              <li title="{{:: ts('View search results table') }}">
                <a ng-href="{{ $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name }}" target="_blank">
                  <i class="crm-i fa-table"></i>
                  {{:: ts('Search results table') }}
                </a>
              </li>
              <li ng-repeat="display in $ctrl.savedSearch.displays" ng-if="display.id" ng-class="{disabled: display.acl_bypass}" title="{{:: display.acl_bypass ? ts('Display has permissions disabled') : ts('View display') }}">
                <a ng-href="{{ display.acl_bypass ? '' : $ctrl.searchDisplayPath + '#/display/' + $ctrl.savedSearch.name + '/' + display.name }}" target="_blank">
                  <i class="crm-i {{ display.acl_bypass ? 'fa-unlock' : $ctrl.displayTypes[display.type].icon }}"></i>
                  {{ display.label }}
                </a>
              </li>
            </ul>
          </div>

        </div>

      </div>
    </div>

    <div class="crm-flex-box crm-search-admin-outer">
      <nav class="crm-search-admin-main-tabs">
        <ul class="nav nav-pills nav-stacked" role="tablist" aria-orientation="vertical" ng-include="'~/crmSearchAdmin/tabs.html'"></ul>
      </nav>
      <div class="crm-flex-4 panel panel-default">
        <div ng-if="!$ctrl.selectedDisplay()" class="panel-body" role="tabpanel">
          <div ng-include="'~/crmSearchAdmin/crmSearch-' + controls.tab + '.html'" class="crm-search-admin-relative"></div>
        </div>
        <div ng-if="$ctrl.selectedDisplay()" class="panel-body" role="tabpanel">
          <div ng-repeat="display in $ctrl.savedSearch.displays" ng-if="controls.tab === ('display_' + $index)">
            <crm-search-admin-display class="crm-search-admin-relative" display="display" saved-search="$ctrl.savedSearch"></crm-search-admin-display>
          </div>
        </div>
      </div>
    </div>

    <div ng-if="!$ctrl.selectedDisplay()">
      <crm-search-admin-results-table search="$ctrl.savedSearch" debug="$ctrl.debug"></crm-search-admin-results-table>
    </div>

  </form>
</div>
