<!-- 
    HTML file to reference templates: they were taken from main html file
    thus this way.
-->
<div>
        <script id="ep-list-tmpl" type="text/mustache">
            <ul class="{{className}}">
                {{&items}}
            </ul>
        </script>
        <script id="ep-list-item-tmpl" type="text/mustache">
            <li class="{{#active}}active{{/active}}" {{#attrs}}{{name}}="{{value}}"{{/attrs}}>
            {{^notA}}<a {{#name}}data-name="{{name}}"{{/name}} {{#id}}data-id="{{id}}"{{/id}} {{#href}}href="#{{href}}"{{/href}}>{{/notA}}
                {{#strong}}<strong>{{&label}}</strong>{{/strong}}
                {{^strong}}{{&label}}{{/strong}}
            {{^notA}}</a>{{/notA}}</li>
        </script>
        <script id="ep-select-option-tmpl" type="text/mustache">
            <option value="{{id}}" {{#selected}}selected{{/selected}} {{#attrs}}{{name}}="{{value}}"{{/attrs}}>{{&label}}</option>
        </script>
        <script id="ep-landing-forms-tmpl" type="text/mustache">
            <div class="row-fluid">
                <div class="offset1 span10">
                    <div class="ep-landing-row-forms light-blue"></div>
                </div>
            </div>
        </script>
        <script id="ep-tool-overview-tmpl" type="text/mustache">
            <div class="ep-landing-tool-overview offset1 span10 light-blue">
                <div class="row-fluid">
                    <div class="span5">
                        <ul class="nav nav-list"></ul>
                    </div>
                    <div class="span7"></div>
                </div>
            </div>
        </script>
        <script id="ep-landing-tool-overview-body-tmpl" type="text/mustache">
            <div data-name="{{name}}" class="media">
                {{#thumbnail}}
                <a class="pull-left" href="#">
                    <img class="media-object" src="{{thumbnail}}">
                </a>
                {{/thumbnail}}
                <div class="media-body">
                    <h4 class="media-heading">{{label}}</h4>
                    {{description}}
                </div>
            </div>
        </script>
        <script id="ep-landing-search-form-tmpl" type="text/mustache">
            <form class="form-horizontal ep-landing-search-form">
            </form>
        </script>
        <script id="ep-analysis-primary-form-tmpl" type="text/mustache">
            <p class="lead"></p>
            <form class="ep-analysis-primary-form clearfix light-blue">
                <div class="form-actions">
                    <button type="button" class="btn hide ep-form-advanced-toggle"><i class="fa fa-cogs"></i></button>
                    <button type="button" class="btn ep-form-cancel" disabled>Cancel</button>
                    <button type="submit" class="btn btn-primary" disabled>Submit</button>
                    <div class="progress">
                        <div class="bar"></div>
                    </div>
                </div>
            </form>
        </script>
        <script id="ep-analysis-secondary-form-tmpl" type="text/mustache">
            <form class="ep-analysis-secondary-form clearfix">
                <div class="form-actions">
                    <button type="button" class="btn hide ep-form-advanced-toggle"><i class="fa fa-cogs"></i></button>
                    <button type="button" class="btn ep-form-cancel" disabled>Cancel</button>
                    <button type="submit" class="btn btn-primary">Resubmit</button>
                    <div class="progress">
                        <div class="bar"></div>
                    </div>
                </div>
            </form>
        </script>
        <script id="ep-form-landing-combobox-tmpl" type="text/mustache">
            <label class="control-label" for="{{baseId}}">{{label}}</label>
            <div class="controls">
                <div class="span10 dropdown">
                    <input id="{{baseId}}" type="text" name="{{name}}" class="input-block-level" placeholder="{{placeholder}}" tabindex="{{tabindex}}" autocomplete="off" />
                </div>
                <button class="btn btn-primary btn-large">
                    <i class="icon-arrow-right icon-white"></i>
                </button>
            </div>
        </script>
        <script id="ep-form-combobox-tmpl" type="text/mustache">
            <label class="control-label {{#primary}}{{descSize}}{{/primary}}" for="{{baseId}}">{{label}}</label>
            {{#primary}}<div class="help-block {{descSize}}">
                <span>{{&desc}}</span>
            </div>{{/primary}}
            <div class="controls dropdown">
                <input id="{{baseId}}" type="text" name="{{name}}" class="dropdown-toggle {{size}}" placeholder="{{placeholder}}" tabindex="{{tabindex}}" value="{{readable}}" autocomplete="off" />
                <ul class="dropdown-menu">
                </ul>
            </div>
        </script>
        <script id="ep-form-text-tmpl" type="text/mustache">
            <label class="control-label {{#primary}}{{descSize}}{{/primary}}" for="{{baseId}}">{{label}}</label>
            {{#primary}}<div class="help-block {{descSize}}">
                <span>{{&desc}}</span></div>{{/primary}}
            <div class="controls">
                <input id="{{baseId}}" type="text" name="{{name}}" value="{{value}}" class="{{size}}" placeholder="{{placeholder}}" tabindex="{{tabindex}}" autocomplete="off" />
            </div>
        </script>
        <script id="ep-form-select-tmpl" type="text/mustache">
            <label class="control-label {{#primary}}{{descSize}}{{/primary}}" for="{{baseId}}">{{label}}</label>
            {{#primary}}<div class="help-block {{descSize}}">
                <span>{{&desc}}</span></div>{{/primary}}
            <div class="controls">
                <select id="{{baseId}}" name="{{name}}" class="{{size}}" tabindex="{{tabindex}}" {{#multiple}}multiple{{/multiple}}>
                {{#choices}}
                    <option value="{{value}}" {{#selected}}selected{{/selected}}>{{label}}</option>
                {{/choices}}
                </select>
            </div>
        </script>
        <script id="ep-form-select-radio-tmpl" type="text/mustache">
            <label class="control-label {{#primary}}{{descSize}}{{/primary}}" for="{{baseId}}">{{label}}</label>
            {{#primary}}<div class="help-block {{descSize}}">
                <span>{{&desc}}</span></div>{{/primary}}
            <div class="controls">
                {{#choices}}
                    <label class="checkbox inline">
                        <input type="radio" name="{{name}}" value="{{value}}" {{#selected}}checked{{/selected}} />
                        {{label}}
                    </label>
                {{/choices}}
            </div>
        </script>
        <script id="ep-form-bool-tmpl" type="text/mustache">
            <label class="control-label {{#primary}}{{descSize}}{{/primary}}" for="{{baseId}}">{{label}}</label>
            {{#primary}}<div class="help-block {{descSize}}">
                <span>{{&desc}}</span></div>{{/primary}}
            <div class="controls">
                <button id="{{baseId}}" type="button" name="{{name}}" class="btn {{size}} {{#active}}active{{/active}} {{buttonClass}}" tabindex="{{tabindex}}">
                    {{buttonLabel}}
                </button>
            </div>
        </script>
        <script id="ep-form-array-tmpl" type="text/mustache">
            <div class="control-array-label">
                <label class="control-label {{#primary}}{{descSize}}{{/primary}}" for="{{baseId}}">{{label}}</label>
                {{#primary}}<div class="help-block {{descSize}}"><span>{{&desc}}</span></div>{{/primary}}
                    <button type="button" class="btn ep-array-remove-child"><i class="icon-minus"></i></button>
                    <button type="button" class="btn ep-array-add-child"><i class="icon-plus"></i></button>
            </div>
        </script>
        <script id="ep-form-compound-tmpl" type="text/mustache">
            <div class="control-array-label">
                <label class="control-label {{#primary}}{{descSize}}{{/primary}}" for="{{baseId}}">{{label}}</label>
                {{#primary}}<div class="help-block {{descSize}}"><span>{{&desc}}</span></div>{{/primary}}
            </div>
        </script>
        <script id="ep-form-slider-tmpl" type="text/mustache">
            <label class="control-label {{#primary}}{{descSize}}{{/primary}}" for="{{baseId}}">{{label}} <span class="muted">{{value}}</span></label>
            {{#primary}}<div class="help-block {{descSize}}">
                <span>{{&desc}}</span></div>{{/primary}}
            <div class="controls">
                <span class="">{{min}}</span>
                <input id="{{baseId}}" name="{{name}}" class="{{size}}" type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{value}}" tabindex="{{tabindex}}" />
                <span class="">{{max}}</span> 
            </div>
        </script>
        <script id="ep-analysis-array-list-tmpl" type="text/mustache">
            {{#items}}
                <dt>{{label}}</dt>
                <dd>
                    {{&html}}
                </dd>
            {{/items}}
        </script>
        <script id="ep-analysis-array-tabs-tmpl" type="text/mustache">
            <ul class="nav nav-tabs">
              {{#tabs}}
              <li class="{{#active}}active{{/active}}"><a href="#{{key}}" data-toggle="tab">{{label}}</a></li>
              {{/tabs}}
            </ul>
            <div class="tab-content">
            {{#content}}
            <div id="{{key}}" class="tab-pane {{#active}}active{{/active}}">
                {{&html}}
            </div>
            {{/content}}
            </div>
        </script>
        <script id="ep-analysis-table-tmpl" type="text/mustache">
            {{#withoutPlot}}
            <h5 class="ep-table-info">
                <span class="text-info"></span>
                <button class="btn btn-mini ep-download-csv">
                    <i class="icon-download"></i> .csv
                </button>
            </h5>
            {{/withoutPlot}}
            <table class="ep-analysis-thead table-bordered">
                <thead><tr>
                    {{#meta}}
                    <th id="{{baseId}}-th">
                        <div class="ep-th">
                        <div class="ep-th-label">
                            <span class="ep-ext-label">{{label}}</span>
                            <span class="ep-visible-label">{{label}}</span>
                        </div>
                        <div class="ep-th-actions">
                            <i id="{{baseId}}-filter-icon" class="icon-white icon-filter"></i>
                            <i class="icon-white icon-arrow-up"></i>
                        </div>
                        </div>
                    </th>
                    {{/meta}}
                </tr></thead>
            </table>
            <div class="ep-analysis-tbody">
                <div></div>
            </div>
        </script>
        <script id="ep-analysis-table-chunk-tmpl" type="text/mustache">
            <table id="{{id}}" class="table table-bordered table-striped">
                <thead>
                    {{#meta}}<th></th>{{/meta}}
                </thead>
                <tbody>
                    {{#items}}
                    <tr>
                        {{#data}}
                        <td>
                            <span class="ep-ext-label">{{&.}}</span>
                            {{&.}}
                        </td>
                        {{/data}}
                    </tr>
                    {{/items}}
                </tbody>
            </table>
        </script>
        <script id="ep-btn-tmpl" type="text/mustache">
            <button class="btn {{btnClass}}">{{#icon}}<i class="{{icon}}"></i> {{/icon}}{{&label}}</button>
        </script>
        <script id="ep-btn-group-tmpl" type="text/mustache">
            <div class="btn-group {{#vertical}}btn-group-vertical{{/vertical}} {{groupClass}}">
                {{#btns}}
                    {{&.}}
                {{/btns}}
            </div>
        </script>
        <script id="ep-popover" type="text/mustache">
             <div class="popover {{direction}}">
                <div class="arrow"></div>
                <h3 class="popover-title">{{title}}</h3>
                <div class="popover-content">
                    <p>{{content}}</p>
                </div>
            </div>
        </script>
        <script id="ep-accordion-group-tmpl" type="text/mustache">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a id="{{id}}-toggle" class="accordion-toggle" href="#{{id}}">
                        <i class="icon-chevron-{{chevron}}"></i> {{&label}} 
                    </a>
                </div>
                <div id="{{id}}" class="accordion-body collapse {{bodyClass}}">
                {{#withInnerBody}}<div class="accordion-inner">{{/withInnerBody}}
                    <div id="{{id}}-placeholder"></div>
                {{#withInnerBody}}</div>{{/withInnerBody}}
                </div>
            </div>
        </script>
        <script id="ep-numeric-filter-tmpl" type="text/mustache">
            <span class="add-on">{{#le}}&le;{{/le}}{{#ge}}&ge;{{/ge}}</span>
            <input type="text" class="input-mini" />
            <button class="btn btn-link">Clear</button>
        </script>
        <script id="ep-character-filter-tmpl" type="text/mustache">
            <span class="add-on">contains</span>
            <input type="text" class="input-mini" />
            <button class="btn btn-link">Clear</button>
        </script>
        <script id="ep-dl-tmpl" type="text/mustache">
            <dl class="{{#horizontal}}dl-horizontal{{/horizontal}}">
                {{#items}}
                <dt>{{&label}}</dt>
                <dd>
                {{#placeholderId}}<div id="{{.}}"></div> {{/placeholderId}}
                {{#value}}{{&value}}{{/value}}
                </dd>
                {{/items}}
            </dl>
        </script>
        <script id="ep-accordion-tagging-area-tmpl" type="text/mustache">
            <div class="row-fluid">
                <div class="span6">
                <select class="span">
                    <option selected>Select a field for tagging</option>
                    {{#meta}}
                    <option value="{{i}}">
                        {{label}}
                    </option>
                    {{/meta}}
                </select>
                <ul class="">
                    <li>
                        Highlight a group of points or click on a single point to tag.
                    </li>
                    <li>
                        Hold down shift to append your tags.
                    </li>
                    <li>
                        Filter out the untagged points with the "Filter Tagged" button.
                    </li>
                </ul>
                </div>
                <div class="span6">
                    <ul class="unstyled text-center">
                        <li><p>Add the selected data field to the plot.</p></li>
                        <li>
                        <div class="btn-group">
                            <button class="btn btn-small ep-tag-btn"><i class="icon-tag"></i> Tag All Visible</button>
                            <button class="btn btn-small ep-clear-btn" disabled><i class="icon-remove"></i> Clear All</button>
                        </div>
                        </li>
                        <li><i>or</i></li>
                        <li>
                        <div class="btn-group">
                            <button class="btn btn-small ep-filter-tagged-btn" disabled><i class="icon-filter"></i> Filter Tagged</button>
                            <button class="btn btn-small ep-release-filter-btn" disabled><i class="icon-remove"></i> Release</button>
                        </div>
                        </li>
                    </ul>
                </div>
            </div>
        </script>
        <script id="ep-load-indicator-tmpl" type="text/mustache">
            <div class="ep-load-indicator ep-load-indicator-bowlG">
                <div class="ep-load-indicator-bowl_ringG">
                    <div class="ep-load-indicator-ball_holderG">
                        <div class="ep-load-indicator-ballG">
                        </div>
                    </div>
                </div>
            </div>
        </script>
        <script id="ep-alert-tmpl" type="text/mustache">
            <div class="alert {{#title}}alert-block{{/title}} {{#type}}alert-{{type}}{{/type}}">
              {{#withClose}}<button type="button" class="close" data-dismiss="alert">&times;</button>{{/withClose}}
              {{#title}}<h4>{{title}}</h4>{{/title}}
              {{&text}}
            </div>
        </script>
        <script id="ep-modal-tmpl" type="text/mustache">
            <div class="modal-header">
                {{#withClose}}
                    <button type="button" class="close" aria-hidden="true">&times;</button>
                {{/withClose}}
                <h3>{{title}}</h3>
            </div>
            <div class="modal-body">
                
            </div>
            <div class="modal-footer">
                {{#progressBar}}<div class="progress"><div class="bar"></div></div>{{/progressBar}}
                {{#cancelBtnLabel}}<a href="#" class="btn btn-cancel">{{cancelBtnLabel}}</a>{{/cancelBtnLabel}}
                {{#doBtnLabel}}<a href="#" class="btn btn-primary">{{doBtnLabel}}</a>{{/doBtnLabel}}
            </div>
        </script>
</div>
