<ng-form name="config_form">

  <div class="form-group">
    <label for="af_config_form_title">
      {{:: ts('Title') }} <span class="crm-marker">*</span>
    </label>
    <p class="help-block" ng-if=":: editor.afform.type !== 'block'">{{:: ts('Public title (usually displayed at the top of the form).') }}</p>
    <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">
    <label for="af_config_form_description">
      {{:: ts('Description') }}
    </label>
    <textarea ng-model="editor.afform.description" class="form-control" id="af_config_form_description" ng-model-options="editor.debounceMode"></textarea>
    <p class="help-block">{{:: ts("Internal note about the form's purpose (not displayed on form).") }}</p>
    <!-- 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">
      {{:: ts('Permission') }}
    </label>
    <input ng-model="editor.afform.permission" class="form-control" id="af_config_form_permission" crm-ui-select="{data: editor.meta.permissions}" >
    <p class="help-block">{{:: ts('What permission is required to use this form?') }}</p>
  </div>

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

    <div class="form-group" ng-class="{'has-error': !!config_form.server_route.$error.pattern}">
      <label for="af_config_form_server_route">
        {{:: ts('Page Route') }}
      </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;') }}" ng-model-options="editor.debounceMode">
      <p class="help-block">{{:: ts('Expose the form as a standalone webpage. (Example: "civicrm/my-form")') }}</p>
    </div>

    <div class="form-group" ng-if="!!editor.afform.server_route">
      <label>
        <input type="checkbox" ng-model="editor.afform.is_public">
        {{:: ts('Accessible on front-end of website') }}
      </label>
    </div>

    <div class="form-group" ng-if="!!editor.afform.server_route">
      <label>
        <input type="checkbox" ng-model="editor.afform.is_token">
        {{:: ts('Provide Email Token') }}
      </label>
      <p class="help-block">{{:: ts('Allows CiviMail authors to easily link to this page') }}</p>
    </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.afform.contact_summary === 'tab'">
      <div class="form-inline">
        <label for="afform_icon">{{:: ts('Icon') }}</label>
        <input required id="afform_icon" ng-model="editor.afform.icon" crm-ui-icon-picker class="form-control">
      </div>
    </div>

    <div class="form-group">
      <div class="form-inline">
        <label>
          <input type="checkbox" ng-checked="editor.afform.contact_summary" ng-click="editor.toggleContactSummary()">
          {{:: ts('Add to Contact Summary Page') }}
        </label>
        <select class="form-control" ng-model="editor.afform.contact_summary" ng-if="editor.afform.contact_summary">
          <option value="block">{{:: ts('As Block') }}</option>
          <option value="tab">{{:: ts('As Tab') }}</option>
        </select>
      </div>
      <p class="help-block" ng-show="editor.afform.contact_summary">
        {{:: ts('Placement can be configured using the Contact Layout Editor.') }}
      </p>
    </div>

    <div class="form-group">
      <label>
        <input type="checkbox" ng-model="editor.afform.is_dashlet">
        {{:: ts('Add to Dashboard') }}
      </label>
      <p class="help-block">{{:: ts('Allow CiviCRM users to add the form to their home dashboard.') }}</p>
    </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>{{:: ts('Submit Actions') }}</legend>

    <div class="form-group" >
      <label>
        <input type="checkbox" ng-model="editor.afform.create_submission" >
        {{:: ts('Log Submissions') }}
      </label>
      <p class="help-block">{{:: ts('Keep a log of the date, time, user, and items saved by each form submission.') }}</p>
    </div>

    <div class="form-group" ng-class="{'has-error': !!config_form.redirect.$error.pattern}">
      <label for="af_config_redirect">
        {{:: ts('Post-Submit Page') }}
      </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>
  </fieldset>
</ng-form>
