<div class="container content-offset">

  <div class="panel panel-primary extract-panel">
    <!-- Default panel contents -->
    <div class="panel-heading">
      <h2>
        <i class="fa fa-search"></i>
        Patient Search
      </h2>
    </div>
    <div class="panel-body">
      <form class="form form-inline">
        <div class="row">
          <div class="col-md-9">
            <span ng-repeat="query in criteria">
              <div class="row">
                <div class="col-md-3" ng-hide="$index == 0">
                  <select class="content-offset-10 content-offset-below-20 form-control" ng-model="query.combine">
                    <option>and</option>
                    <option>or</option>
                  </select>
                </div>
              </div>
              <div class="row">
                <div class="col-md-10">
                  <select class="form-control content-offset-below-10" ng-model="query.column"
                          ng-change="resetFilter($index, ['combine', 'column'])"
                          data-trigger="focus" bs-tooltip="tooltip"
                          data-placement="top" data-title="1. Select a Column"
                          set-focus-if="!query.column"
                          >
                    <option ng-repeat="col in columns" value="[[col.name]]">
                      [[col.display_name]]
                    </option>
                  </select>
                  <span ng-repeat="col in columns"
                        ng-show="query.column == col.name">
                    <select class="form-control content-offset-below-10" ng-model="query.field"
                            data-trigger="focus" bs-tooltip="tooltip"
                            data-placement="top" data-title="2. Select a field"
                            set-focus-if="query.field == null && query.column != null"
                            >
                      <option ng-repeat="field in searchableFields(col)">[[field]]</option>
                    </select>
                  </span>
                  <span ng-show="query.column != 'tagging'">
                    <select class="form-control content-offset-below-10"
                            ng-show="query.field != null && isText(query.column, query.field)"
                            ng-model="query.queryType" data-trigger="focus" bs-tooltip="tooltip"
                            data-placement="top" data-title="3. Select your query type"
                            set-focus-if="query.field != null && !isDate(query.column, query.field)"
                            >
                      <option>Equals</option>
                      <option ng-show="isText(query.column, query.field)">Contains</option>
                    </select>
                    <select class="form-control content-offset-below-10"
                            ng-show="query.field != null && isDate(query.column, query.field)"
                            ng-model="query.queryType" data-trigger="focus" bs-tooltip="tooltip"
                            data-placement="top" data-title="3. Select your query type"
                            set-focus-if="query.field != null && isDate(query.column, query.field)" >
                      <option>Before</option>
                      <option>After</option>
                    </select>
                    <select class="form-control content-offset-below-10" ng-model="query.query"
                            ng-show="isBoolean(query.column, query.field) && query.field != null"
                            data-trigger="focus" bs-tooltip="tooltip"
                            data-placement="top" data-title="3. Select your query type"
                            set-focus-if="isBoolean(query.column, query.field) && query.field != null"
                            >
                      <option>true</option>
                      <option>false</option>
                    </select>
                    <input type="text"
                           class="form-control content-offset-below-10"
                           ng-model="query.query"
                           ng-show="isText(query.column, query.field) && query.field != null"
                           bs-options="x for x in query.lookup_list"
                           bs-typeahead
                           placeholder="4. Add your value"
                           set-focus-if="isText(query.column, query.field) && query.field != null  && query.queryType != null"
                           />
                    <input type="text" ng-model="query.query"
                           class="form-control content-offset-below-10"
                           ng-show="isDate(query.column, query.field) && query.field != null"
                           data-trigger="focus" bs-tooltip="tooltip"
                           data-placement="top" data-title="4. Add your value"
            	           ng-pattern="/^(0?[1-9]|[12][0-9]|3[01])\/(0?[1-9]|1[012])\/(\d{4})$/"
            	           placeholder="dd/mm/yyyy"
                           set-focus-if="isDate(query.column, query.field) && query.field != null && query.queryType != null"
                           />
                      <span ng-show="isSelect(query.column, query.field)">
                          <select ng-model="query.query" class="form-control content-offset-below-10"
                            data-trigger="focus" bs-tooltip="tooltip"
                            data-placement="top" data-title="4. Select one of the below">
                              <option ng-repeat="i in symptom_list track by $index">[[ i ]]</option>
                          </select>
                      </span>
                </div>
                </span>
                <div class="col-md-2">
                  <button type="button" class="btn btn-primary content-offset-below-10"
                          ng-show="query.field != null"
                          ng-click="addFilter()"
                          >
                    <span ng-click="addFilter" class="glyphicon glyphicon-plus"></span>
                  </button>
                  <button type="button" class="btn btn-danger content-offset-below-10"
                          ng-show="(query.field != null && criteria.length > 1 || criteria.length > 1)"
                          ng-click="removeFilter($index)"
                          >
                    <span ng-click="removeFilter($index)" class="glyphicon glyphicon-minus"></span>
                  </button>
                </div>
              </div>
            </span>
            <div class="content-offset-20 content-offset-below-10">
              <button class="btn" ng-show="searched" ng-click="removeCriteria()">
                Clear search
              </button>
            </div>
          </div>
          <div class="col-md-3">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4><i class="fa fa-save saved-search"></i>Saved Searches</h4>
              </div>

              <div class="panel-body">
                <ul ng-show="filters.length" class="list-group">
                  <li class="list-group-item" ng-repeat="f in filters">
                    <strong>
                      <a href="#" ng-click="jumpToFilter($event, f)">
                        [[f.name]]
                      </a>
                      <a href="#" ng-click="editFilter($event, f, $index)" >
                        <span class="glyphicon glyphicon-edit"></span>
                      </a>
                    </strong>
                  </li>
                </ul>
                <div ng-show="!filters.length">
                  You have no saved searches
                </div>
              </div>
              <div ng-show="searched && results.length > 0" class="panel-footer text-center">
                <button type="button"
                        class="btn btn-secondary"
                        ng-click="save()"
                        >
                  <span class="glyphicon glyphicon-floppy-disk"></span>
                  Save this search
                </button>
              </div>
            </div>
          </div>
        </div>
      </form>


      <div class="row">
        <div class="col-md-4" ng-show="profile.can_extract">
          {% if EXTRACT_ASYNC %}
          <button class="btn btn-lg"
                  ng-class="{'btn-primary': async_ready, 'btn-secondary': !async_ready}"
                  ng-show="searched && results.length > 0"
                  ng-click="async_extract()">
            <span ng-hide="async_waiting">
              <i class="glyphicon glyphicon-download"></i>
              Download this data
            </span>
            <span ng-show="async_waiting && !async_ready">
              <i class="fa fa-cog fa-spin" ></i>
              Building your extract... this could take some time...
            </span>
            <span ng-show="async_ready">
              <i class="glyphicon glyphicon-download"></i>
              Ready - Download your extract
            </span>
          </button>
          {% else %}
          <form action="/search/extract/download" method="post" target="_blank">
            <input name="criteria" type="hidden" value="[[ JSON.stringify(criteria) ]]">
            {% csrf_token %}
            <button type="submit"
                    class="btn btn-secondary btn-lg"
                    ng-show="searched && results.length > 0">
              <span class="glyphicon glyphicon-download"></span>
              Download these results
            </button>
          </form>
          {% endif %}
        </div>

        <div class="col-md-4 text-center" ng-class="{'col-md-push-4': !profile.can_extract}">
          <button ng-click="search()"
                  class="btn btn-primary btn-lg"
                  >
            <span class="glyphicon glyphicon-search"></span>
            Search
          </button>
        </div>
      </div>
    </div> <!-- Row -->
    <div ng-hide="!searched || results.length" class="row">
      <div class="col-md-4 col-md-push-4 lead text-center">
        Sorry, no results match your search.
      </div>
    </div>
    <div ng-show="searched && results.length">
      {% include 'partials/_patient_summary_list.html' %}
    </div>
    {% include 'extract_footer.html' %}
  </div>
</div>
