<ng-form name="config_form">

  <div class="form-group">
    <label for="af_config_form_title">
      {{:: editor.meta.afform_fields.title.title }} <span class="crm-marker">*</span>
      <a crm-ui-help="hs({id: 'title', title: editor.meta.afform_fields.title.title})"></a>
    </label>
    <input ng-model="editor.afform.title" class="form-control" id="af_config_form_title" required title="{{:: ts('Required') }}" ng-model-options="editor.debounceMode" >
  </div>

  <div class="form-group" ng-if="editor.meta.locales && editor.meta.locales.length">
    <label for="afform_locale">
      {{:: editor.meta.afform_fields.afform_locale.title }} <span class="crm-marker">*</span>
    </label>
    <a crm-ui-help="hs({id: 'afform_locale', title: editor.meta.afform_fields.afform_locale.title})"></a>
    <input ng-list crm-ui-select="{multiple: false, data: editor.meta.locales}" class="form-control" id="afform_locale" ng-model="editor.afform.locale">
  </div>

  <div class="form-group">
    <label for="af_config_form_description">
      {{:: editor.meta.afform_fields.description.title }}
      <a crm-ui-help="hs({id: 'description', title: editor.meta.afform_fields.description.title})"></a>
    </label>
    <textarea ng-model="editor.afform.description" class="form-control" id="af_config_form_description" ng-model-options="editor.debounceMode" rows="1"></textarea>
    <!-- Description is "semi-private": not generally public, but not audited for secrecy -->
  </div>

  <!-- Form permissions do not apply to blocks -->
  <div class="form-group" ng-if=":: editor.afform.type !== 'block'">
    <label for="af_config_form_permission">
      {{:: editor.meta.afform_fields.permission.title }}
      <a crm-ui-help="hs({id: 'permission', title: editor.meta.afform_fields.permission.title})"></a>
    </label>
    <div class="form-inline" >
      <input ng-model="editor.afform.permission" class="form-control" id="af_config_form_permission" crm-ui-select="{data: editor.meta.permissions, multiple: true, separator: '\u0001'}" ng-list="" >
      <label class="sr-only" for="af_config_form_permission_operator">
        {{:: editor.meta.afform_fields.permission_operator.title }}
      </label>
      <select ng-model="editor.afform.permission_operator" class="form-control" id="af_config_form_permission_operator" >
        <option ng-repeat="opt in editor.meta.afform_fields.permission_operator.options" value="{{ opt.id }}">{{ opt.label }}</option>
      </select>
    </div>
  </div>

  <div class="form-group">
    <label for="afform_tags">
      {{:: editor.meta.afform_fields.tags.title }}
      <a crm-ui-help="hs({id: 'tags', title: editor.meta.afform_fields.tags.title})"></a>
    </label>
    <input ng-list crm-ui-select="{multiple: true, data: editor.afformTags, placeholder: ts('None')}" class="form-control" id="afform_tags" ng-model="editor.afform.tags">
  </div>

  <!-- Placement options do not apply to blocks -->
  <fieldset ng-if=":: editor.afform.type !== 'block'">
    <legend>{{:: ts('Placement Options') }}</legend>

    <div class="form-group" ng-class="{'has-error': !!config_form.server_route.$error.pattern}">
      <label for="af_config_form_server_route">
        {{:: editor.meta.afform_fields.server_route.title }}
        <a crm-ui-help="hs({id: 'server_route', title: editor.meta.afform_fields.server_route.title})"></a>
      </label>
      <input ng-model="editor.afform.server_route" name="server_route" class="form-control" id="af_config_form_server_route" pattern="^civicrm\/[\-0-9a-zA-Z\/_]+$" onfocus="this.value = this.value || 'civicrm/'" onblur="if (this.value === 'civicrm/') this.value = ''" title="{{:: ts('Path must begin with &quot;civicrm/&quot;') }}" placeholder="{{:: ts('None') }}" ng-model-options="editor.debounceMode" ng-required="!!editor.placementRequiresServerRoute()">
    </div>

    <div class="form-group" ng-show="!!editor.afform.server_route">
      <label>
        {{:: ts('Frontend or backend?') }}
        <a crm-ui-help="hs({id: 'server_route_is_public', title: ts('Frontend or backend?')})"></a>
        <div class="crm-form-toggle-container">
          <input type="checkbox" class="crm-form-toggle" ng-model="editor.afform.is_public">
          <span class="crm-form-toggle-text crm-form-toggle-text-off">{{:: ts('Backend') }}</span>
          <span class="crm-form-toggle-text crm-form-toggle-text-on">{{:: ts('Frontend') }}</span>
        </div>
      </label>
    </div>

    <div class="form-group">
      <div class="form-inline">
        <label ng-class="{disabled: !editor.afform.server_route}">
          <input type="checkbox" ng-checked="editor.afform.server_route && editor.afform.navigation" ng-disabled="!editor.afform.server_route" ng-click="editor.toggleNavigation()">
          {{:: ts('Add to Navigation Menu') }}
        </label>
        <div class="form-group" ng-if="editor.afform.navigation">
          <input class="form-control" ng-model="editor.afform.navigation.label" ng-model-options="editor.debounceMode" placeholder="{{:: ts('Title') }}" required>
          <span ng-if="!editor.navigationMenu">
            <input class="form-control loading" disabled crm-ui-select="{placeholder: ts('Loading menu items'), data: []}">
          </span>
          <span ng-if="editor.navigationMenu">
            <input class="form-control" ng-model="editor.afform.navigation.parent"
                   crm-ui-select="{allowClear: true, placeholder: ts('Top Level'), data: editor.navigationMenu || []}">
          </span>
          <label for="afform-admin-navigation-weight">{{:: ts('Order') }}</label>
          <input class="form-control" id="afform-admin-navigation-weight" type="number" placeholder="{{:: ts('Order') }}" min="0" step="1" ng-model="editor.afform.navigation.weight" required>
        </div>
      </div>
      <p class="help-block disabled" ng-if="!editor.afform.server_route">{{:: ts('Requires a page route') }}</p>
    </div>

    <div class="form-group" ng-show="!!editor.afform.navigation || editor.hasPlacementEntities()">
      <div class="form-inline">
        <label for="afform_icon">
          {{:: editor.meta.afform_fields.icon.title }}
        </label>
        <input required id="afform_icon" ng-model="editor.afform.icon" crm-ui-icon-picker class="form-control">
      </div>
    </div>

    <div class="form-group">
      <label for="afform_placement">
        {{:: editor.meta.afform_fields.placement.title }}
        <a crm-ui-help="hs({id: 'placement', title: editor.meta.afform_fields.placement.title})"></a>
      </label>
      <input ng-list crm-ui-select="{multiple: true, data: editor.meta.afform_placement, placeholder: ts('None')}" class="form-control" id="afform_placement" ng-model="editor.afform.placement" ng-change="editor.onChangePlacement()">
      <p class="text-warning" ng-if="!editor.afform.server_route && editor.placementRequiresServerRoute()">
        <i class="crm-i fa-exclamation-triangle" role="img" aria-hidden="true"></i>{{ ts('%1 placement requires a page route.', {1: editor.placementRequiresServerRoute()}) }}
      </p>
    </div>

    <div class="form-group" ng-if="editor.afform.placement.length">
      <div class="form-inline" ng-repeat="entity in editor.getPlacementEntities()">
        <label for="placement-filter-{{:: entity.filter.name }}">{{:: entity.filter.label }}</label>
        <input class="form-control" ng-list crm-ui-select="{multiple: true, placeholder: ts('Any'), data: entity.filter.options}" id="placement-filter-{{:: entity.filter.name }}" ng-model="editor.afform.placement_filters[entity.filter.name]" >
      </div>
      <div class="form-inline">
        <label for="afform_placement_weight">
          {{:: editor.meta.afform_fields.placement_weight.title }}
          <a crm-ui-help="hs({id: 'placement_weight', title: editor.meta.afform_fields.placement_weight.title})"></a>
        </label>
        <input class="form-control six" type="number" id="afform_placement_weight" ng-model="editor.afform.placement_weight" placeholder="{{:: ts('Auto') }}">
      </div>
    </div>

  </fieldset>

  <!--  Submit actions are only applicable to form types with a submit button (exclude blocks and search forms) -->
  <fieldset ng-if=":: editor.afform.type === 'form'">
    <legend class="form-inline">
      {{:: ts('Submissions') }}
    </legend>

    <p class="form-inline">
      <label class="radio">
        <input class="crm-form-radio" type="radio" name="submit_enabled" ng-model="editor.afform.submit_enabled" ng-value="true">
        {{:: ts('Open') }}
      </label>
      <label class="radio">
        <input class="crm-form-radio" type="radio" name="submit_enabled" ng-model="editor.afform.submit_enabled" ng-value="false">
        {{:: ts('Closed') }}
      </label>
    </p>

    <div ng-if="editor.afform.submit_enabled">
      <div class="form-group">
        <label>
          <input type="checkbox" ng-model="editor.afform.autosave_draft">
          {{:: editor.meta.afform_fields.autosave_draft.title }}
          <a crm-ui-help="hs({id: 'autosave_draft', title: editor.meta.afform_fields.autosave_draft.title})"></a>
        </label>
      </div>

      <div class="form-group">
        <label>
          <input type="checkbox" ng-model="editor.afform.create_submission" ng-class="{'disabled': !!editor.afform.require_email_confirmation}">
          {{:: editor.meta.afform_fields.create_submission.title }}
          <a crm-ui-help="hs({id: 'create_submission', title: editor.meta.afform_fields.create_submission.title})"></a>
        </label>
      </div>

      <div class="crm-flex-box" ng-if="editor.afform.create_submission">
        <div class="form-group">
          <label for="submit_limit">{{:: ts('Max Submissions (total)') }}</label>
          <input class="form-control eight" type="number" min="1" step="1" id="submit_limit" ng-model="editor.afform.submit_limit" placeholder="{{:: ts('Unlimited') }}">
        </div>
        <div class="form-group">
          <label for="submit_limit_per_user">{{:: ts('Max Submissions (per user)') }}</label>
          <input class="form-control eight" type="number" min="1" step="1" id="submit_limit_per_user" ng-model="editor.afform.submit_limit_per_user" placeholder="{{:: ts('Unlimited') }}">
        </div>
      </div>

      <div class="form-group">
        <label>
          <input type="checkbox" ng-model="editor.afform.manual_processing" ng-click="editor.toggleManualProcessing()" ng-class="{'disabled': !!editor.afform.allow_verification_by_email}">
          {{:: editor.meta.afform_fields.manual_processing.title }}
          <a crm-ui-help="hs({id: 'manual_processing', title: editor.meta.afform_fields.manual_processing.title})"></a>
        </label>
      </div>

      <div class="form-group" ng-if="!!editor.afform.manual_processing">
        <label>
          <input type="checkbox" ng-model="editor.afform.allow_verification_by_email" ng-click="editor.toggleEmailVerification()">
          {{:: editor.meta.afform_fields.allow_verification_by_email.title }}
          <a crm-ui-help="hs({id: 'allow_verification_by_email', title: editor.meta.afform_fields.allow_verification_by_email.title})"></a>
        </label>
        <div class="form-inline" ng-if="editor.afform.allow_verification_by_email">
          <label>{{:: editor.meta.afform_fields.email_confirmation_template_id.title }}</label>
          <input class="form-control" crm-autocomplete="'MessageTemplate'" id="afform_email_confirmation_template_id" ng-model="editor.afform.email_confirmation_template_id" auto-open="true" placeholder="{{:: ts('Select') }}">
        </div>
      </div>

      <div class="form-group">
        <label>
          {{:: editor.meta.afform_fields.confirmation_type.title }}
          <a crm-ui-help="hs({id: 'confirmation_type', title: editor.meta.afform_fields.confirmation_type.title})"></a>
        </label>
        <p class="form-inline">
          <label class="radio" ng-repeat="ctype in editor.meta.afform_fields.confirmation_type.options">
            <input class="crm-form-radio" type="radio" name="confirmation_type" ng-model="editor.afform.confirmation_type" ng-value="ctype.id">
            {{:: ctype.label }}
          </label>
        </p>
      </div>

      <div class="form-group" ng-class="{'has-error': !!config_form.redirect.$error.pattern}" ng-if="editor.afform.confirmation_type === 'redirect_to_url'">
        <label for="af_config_redirect">
          {{:: editor.meta.afform_fields.redirect.title }}
        </label>
        <div class="input-group">
          <input ng-model="editor.afform.redirect" name="redirect" class="form-control" id="af_config_redirect" title="{{:: ts('Post-Submit Page') }}" pattern="^((http|https):\/\/|\/|civicrm\/)[-0-9a-zA-Z\/_.]\S+$" title="{{:: ts('Post-Submit Page must be either an absolute url, a relative url or a path starting with CiviCRM') }}" ng-model-options="editor.debounceMode" >
          <af-gui-token-select class="input-group-addon" model="editor.afform" field="redirect"></af-gui-token-select>
        </div>
        <p class="help-block">{{:: ts('Enter a URL or path that the form should redirect to following a successful submission.') }}</p>
      </div>
    </div>

    <div class="form-group" ng-if="editor.afform.confirmation_type === 'show_confirmation_message'">
      <label for="af_config_confirmation_message">
        {{:: editor.meta.afform_fields.confirmation_message.title }}
      </label>
      <af-gui-token-select class="pull-right" model="editor.afform" field="confirmation_message"></af-gui-token-select>
      <textarea ng-model="editor.afform.confirmation_message" class="form-control" id="af_config_confirmation_message" ng-model-options="editor.debounceMode"></textarea>
      <p class="help-block">{{:: ts("This message wil be displayed when the form is submitted.") }}</p>
    </div>

  </fieldset>
</ng-form>
