<kbn-settings-app section="indices">
  <kbn-settings-indices>
    <div ng-controller="settingsIndicesCreate" class="kbn-settings-indices-create">
      <div class="page-header">
        <h1>Configure an index pattern</h1>
        In order to use Kibana you must configure at least one index pattern. Index patterns are
        used to identify the Elasticsearch index to run search and analytics against. They are also
        used to configure fields.
      </div>
      <div>
        <form name="form" role="form" class="well" ng-submit="createIndexPattern()">
          <div class="form-group time-and-pattern">
            <label>
              <input
                ng-model="index.isTimeBased"
                type="checkbox">
              Index contains time-based events
            </label>
            <br>
            <label ng-if="index.isTimeBased">
              <input ng-model="index.nameIsPattern" type="checkbox">
              Use event times to create index names
            </label>
          </div>

          <div class="form-group" ng-if="index.isTimeBased && index.nameIsPattern">
            <label>
              Index pattern interval&nbsp;
              <kbn-info info="The interval at which index names rotate."></kbn-info>
            </label>
            <select
              required
              ng-options="opt.display for opt in index.nameIntervalOptions"
              ng-model="index.nameInterval"
              class="form-control">
            </select>
          </div>

          <div class="form-group">
            <label>
              Index name or pattern
            </label>
            <p class="help-block" ng-if="!index.nameIsPattern">Patterns allow you to define dynamic index names using * as a wildcard. Example: logstash-*</p>
            <p class="help-block" ng-if="index.isTimeBased && index.nameIsPattern">Patterns allow you to define dynamic index names. Static text in an index name is denoted using brackets. Example: [logstash-]YYYY.MM.DD. Please note that weeks are setup to use ISO weeks which start on Monday. &mdash;
              <small><a target="_blank" href="http://momentjs.com/docs/#/displaying/format/">Date Format Documentation</a></small></p>
            <input
              ng-model="index.name"
              ng-attr-placeholder="{{index.defaultName}}"
              ng-model-options="{ updateOn: 'default blur', debounce: {'default': 2500, 'blur': 0} }"
              validate-index-name
              name="name"
              required
              type="text"
              class="form-control">
              <small ng-show="index.nameInterval.name == 'weeks'">
                <strong>Note: </strong>
                I noticed you're using weekly indices. Kibana requires ISO weeks be used in your index creation.
                See <a href="https://en.wikipedia.org/wiki/ISO_week_date" target="_blank" title="Wikipedia: ISO Week Date">Wikipedia: ISO Week Date</a>
              </small>
            </div>

          <section>
            <div class="alert alert-danger" ng-repeat="err in index.patternErrors">
              {{err}}
            </div>

            <div class="alert alert-info" ng-if="index.samples">
              Attempted to match the following indices and aliases:
              <ul>
                <li ng-repeat="sample in index.samples">{{sample}}</li>
              </ul>
              <button type="button" ng-click="moreSamples(true)" class="btn btn-default">
                Expand Search
              </button>
            </div>

            <div class="alert alert-{{index.existing.class}}" ng-if="index.existing">
              Pattern matches {{index.existing.matchPercent}} of existing indices and aliases
              <ul>
                <li ng-repeat="match in index.existing.matches | orderBy:'toString()'| limitTo: index.sampleCount">{{match}}</li>
              </ul>
              <button
                ng-if="index.sampleCount < index.existing.matches.length"
                ng-click="moreSamples()"
                type="button"
                class="btn btn-default">
                Expand Search
              </button>
            </div>

            <div class="alert alert-info" ng-if="index.existing.failures.length">
              Indices and aliases that were found, but did not match the pattern:
              <ul>
                <li ng-repeat="match in index.existing.failures | limitTo: index.sampleCount">{{match}}</li>
              </ul>
              <a
                ng-if="index.sampleCount < index.existing.matches.length"
                ng-click="moreSamples()"
                class="alert-link">
                more
              </a>
            </div>
          </section>

          <div class="form-group" ng-if="index.isTimeBased && !index.fetchFieldsError">
            <label>
              Time-field name
              &nbsp;
              <kbn-info info="This field will be used to filter events with the global time filter"></kbn-info>
              &nbsp;
              <small>
                <a ng-click="refreshFieldList();"> refresh fields</a>
              </small>
            </label>
            <select
              required
              ng-if="!index.fetchFieldsError"
              ng-options="field.name for field in index.dateFields"
              ng-model="index.timeField"
              auto-select-if-only-one="index.dateFields"
              class="form-control">
            </select>
          </div>

          <button
            ng-disabled="form.$invalid || index.fetchFieldsError"
            ng-class="index.fetchFieldsError ? 'btn-default' : 'btn-success'"
            type="submit"
            class="btn">
            <span ng-hide="form.name.$error.indexNameInput">{{index.fetchFieldsError || "Create" }}</span>
            <span ng-show="form.name.$error.indexNameInput">Invalid index name pattern.</span>
          </button>
        </form>
      </div>
    </div>
  </kbn-settings-indices>
</kbn-settings-app>
