<style>
    .input-error {
        color: red;
    }
</style>

<div class="modal-body">
    <div class="pull-right editor-title">Dashboard settings</div>

    <div ng-model="editor.index" bs-tabs>
        <div ng-repeat="tab in ['General','Rows','Controls','Solr']" data-title="{{tab}}">
        </div>
    </div>

    <!-- General tab -->
    <div ng-show="editor.index == 0">
        <div class="row-fluid">
            <div class="span4">
                <label class="small">Title</label><input type="text" class="input-large"
                                                         ng-model='dashboard.current.title'/>
            </div>
            <div class="span1">
                <label class="small"> Editable </label><input type="checkbox" ng-model="dashboard.current.editable"
                                                              ng-checked="dashboard.current.editable"/>
            </div>
            <div class="span1">
                <label class="small"> Hints
                    <tip>Show 'Add panel' hints in empty spaces</tip>
                </label><input type="checkbox" ng-model="dashboard.current.panel_hints"
                               ng-checked="dashboard.current.panel_hints"/>
            </div>
            <div class="span3">
                <label class="small">Style</label><select class="input-small" ng-model="dashboard.current.style"
                                                          ng-options="f for f in ['dark','light']"></select>
            </div>
            <div class="span2">
                <label class="small">Version</label>Banana v1.6.10
            </div>
        </div>
    </div>

    <!-- Index tab -->
    <!--
    <div ng-show="editor.index == 1">
      <div class="row-fluid">
        <h4>Index Settings</h4>
        <div ng-show="dashboard.current.index.interval != 'none'" class="row-fluid">
           <div class="span12">
            <p class="small">
              Time stamped indices use your selected time range to create a list of
              indices that match a specified timestamp pattern. This can be very
              efficient for some data sets (eg, logs) For example, to match the
              default logstash index pattern you might use
              <code>[logstash-]YYYY.MM.DD</code>. The [] in "[logstash-]" are
              important as they instruct Kibana not to treat those letters as a
              pattern.
              Please also note that indices should rollover at midnight <strong>UTC</strong>.
            </p>
            <p class="small">
              See <a href="http://momentjs.com/docs/#/displaying/format/">http://momentjs.com/docs/#/displaying/format/</a>
              for documentation on date formatting.
            </p>
           </div>
        </div>
      </div>
      <div class="row-fluid">
        <div class="span2">
          <h6>Timestamping</h6><select class="input-small" ng-model="dashboard.current.index.interval" ng-options="f for f in ['none','hour','day','week','month','year']"></select>
        </div>
        <div class="span4" ng-show="dashboard.current.index.interval != 'none'">
          <h6>Index pattern <small>Absolutes in []</small></h6>
          <input type="text" class="input-medium" ng-model="dashboard.current.index.pattern">
        </div>
        <div class="span2" ng-show="dashboard.current.index.interval != 'none'">
          <h6>Failover <i class="icon-question-sign" bs-tooltip="'If no indices match the pattern, failover to default index *NOT RECOMMENDED*'"></i></h6>
          <input type="checkbox" ng-model="dashboard.current.failover" ng-checked="dashboard.current.failover" />
        </div>
        <div class="span4" ng-show="dashboard.current.failover || dashboard.current.index.interval == 'none'">
          <h6>Default Index <small ng-show="dashboard.current.index.interval != 'none'">If index not found</small></h6>
          <input type="text" class="input-medium" ng-model="dashboard.current.index.default">
        </div>
      </div>
    </div>
    -->

    <!-- Rows tab -->
    <div ng-show="editor.index == 1">
        <div class="row-fluid">
            <div class="span12">
                <table class="table table-condensed table-striped">
                    <thead>
                    <th>Title</th>
                    <th>Delete</th>
                    <th>Move</th>
                    </thead>
                    <tr ng-repeat="row in dashboard.current.rows">
                        <td>{{row.title}}</td>
                        <td><i ng-click="dashboard.current.rows = _.without(dashboard.current.rows,row)"
                               class="pointer icon-remove"></i></td>
                        <td><i ng-click="_.move(dashboard.current.rows,$index,$index-1)" ng-hide="$first"
                               class="pointer icon-arrow-up"></i></td>
                        <td><i ng-click="_.move(dashboard.current.rows,$index,$index+1)" ng-hide="$last"
                               class="pointer icon-arrow-down"></i></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="row-fluid">
            <form>
                <div class="span5">
                    <label class="small">Title</label>
                    <input type="text" class="input-large" ng-model='row.title' placeholder="New row">
                </div>
                <div class="span2">
                    <label class="small">Height</label>
                    <input type="text" class="input-mini" ng-model='row.height'>
                </div>
                <div class="span1">
                    <label class="small"> Editable </label>
                    <input type="checkbox" ng-model="row.editable" ng-checked="row.editable"/>
                </div>
            </form>
        </div>
    </div>

    <!-- Controls tab -->
    <div ng-show="editor.index == 2" ng-controller="dashLoader">
        <div class="row-fluid">
            <div class="span3" style="font-weight:bold;">Show Collections Picker</div>
            <input type="checkbox" ng-model="dashboard.current.loader.dropdown_collections"
                   ng-checked="dashboard.current.loader.dropdown_collections">
        </div>
        <h5>Allow saving to</h5>
        <div class="row-fluid">
            <div class="span2">
                <label class="small">File</label><input type="checkbox" ng-model="dashboard.current.loader.save_local"
                                                        ng-checked="dashboard.current.loader.save_local">
            </div>
            <div class="span2">
                <label class="small">Browser</label><input type="checkbox"
                                                           ng-model="dashboard.current.loader.save_default"
                                                           ng-checked="dashboard.current.loader.save_default">
            </div>
            <div class="span2">
                <label class="small">Gist
                    <tip>Requires your domain to be OAUTH registered with Github</tip>
                </label><input type="checkbox" ng-model="dashboard.current.loader.save_gist"
                               ng-checked="dashboard.current.loader.save_gist">
            </div>
            <div class="span2">
                <label class="small">Solr</label><input type="checkbox"
                                                        ng-model="dashboard.current.loader.save_elasticsearch"
                                                        ng-checked="dashboard.current.loader.save_elasticsearch">
            </div>
        </div>
        <h5>Allow loading from</h5>
        <div class="row-fluid">
            <div class="span2">
                <label class="small">Local file</label><input type="checkbox"
                                                              ng-model="dashboard.current.loader.load_local"
                                                              ng-checked="dashboard.current.loader.load_local">
            </div>
            <div class="span2">
                <label class="small">Gist</label><input type="checkbox" ng-model="dashboard.current.loader.load_gist"
                                                        ng-checked="dashboard.current.loader.load_gist">
            </div>
            <div class="span2">
                <label class="small">Solr</label><input type="checkbox"
                                                        ng-model="dashboard.current.loader.load_elasticsearch"
                                                        ng-checked="dashboard.current.loader.load_elasticsearch">
            </div>
            <div class="span3" ng-show="dashboard.current.loader.load_elasticsearch">
                <label class="small">Solr list size
                    <tip>The maximum number of dashboards to show in the loading list for Solr stored dashboards under
                        Load menu.
                    </tip>
                </label>
                <input class="input-mini" type="number" ng-model="dashboard.current.loader.load_elasticsearch_size">
            </div>
        </div>
    </div>

    <!-- Solr tab -->
    <div ng-show="editor.index == 3">
        <div class="row-fluid" style="margin-bottom: 10px;">
            You can configure the dashboard to send queries directly to Solr (<em>e.g. /api/apollo/solr/</em>) or use Fusion
            Query Pipeline (<em>e.g. /api/apollo/query-pipelines/&lt;pipeline&gt;/collections/</em>).
            To use Fusion, please select the checkbox below. In addition, you can use Global Query Parameters to append
            extra parameters to all dashboard queries. For example, if you want to set the default search field to a
            field named, <em>message</em>, then you can specify it like this: <em>&amp;df=message</em>.
        </div>
        <form name="solrForm">
            <div class="row-fluid">
                <input type="checkbox" ng-model="config.USE_FUSION" style="vertical-align: top;"> <strong>Use Fusion?</strong>
            </div>
            <div class="row-fluid">
                <div class="span5">
                    <h6>Solr Server / Fusion Query Pipeline
                        <tip>Specify a Solr addresss or Fusion Query Pipeline, ending with /</tip>
                    </h6>
                    <input type="text" class="input-xlarge" name="solrServer" ng-model="dashboard.current.solr.server"
                           placeholder="e.g. /api/apollo/query-pipelines/default/collections/" ng-pattern="/\/$/" required>
                </div>
                <div class="span4">
                    <h6>Collection Name</h6>
                    <input type="text" class="input-medium" name="solrCollection" ng-model="dashboard.current.solr.core_name"
                           placeholder="e.g. logs" bs-typeahead="dashboard.current.solr.core_list" required>
                </div>
                <!-- Validation error messages -->
                <div class="span3">
                    <ul>
                        <li ng-show="solrForm.solrServer.$error.pattern"><span class="input-error">Solr Server needs to end with a trailing forward slash (/).</span></li>
                        <li ng-show="solrForm.solrServer.$error.required"><span class="input-error">Please input Solr Server address.</span></li>
                        <li ng-show="solrForm.solrCollection.$error.required"><span class="input-error">Please input Collection name.</span></li>
                    </ul>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span9">
                    <h6>Global Query Parameters (optional)
                        <tip>Specify query parameters to be appended to all queries of the dashboard panels.</tip>
                    </h6>
                    <input type="text" class="input-xxlarge" placeholder="e.g. &defType=lucid&qt=lucid&df=message&..."
                           ng-model="dashboard.current.solr.global_params">
                </div>
            </div>
        </form>
    </div>
</div>

<div class="modal-footer">
    <button ng-click="add_row(dashboard.current,row); reset_row();" class="btn btn-success" ng-show="editor.index == 1">
        Create Row
    </button>
    <button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss();reset_panel();dashboard.refresh()">
        Close
    </button>
</div>
