{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Query Preview | Course Discovery</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw=="
        crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="{% static 'css/catalog-preview.css' %}">
</head>
<body>
<div class="container">
  <h1 class="page-header">Query Preview</h1>

  <div class="intro">
    <div class="alert alert-warning" role="alert">
      Please take a moment to review the <a
        href="https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-query-string-query.html#query-string-syntax"
        target="_blank" class="alert-link">Elasticsearch query string syntax</a>.
    </div>
    <p>This page is a demonstration of the query language that will power dynamic course catalogs use for affiliates
      and coupons.</p>
  </div>

  <div class="fields">
    <h3>Fields</h3>
    <p>A number of fields can be used to search for courses. A complete list is below.</p>
    <p></p>

    <table class="table table-striped table-bordered" id="fields">
      <thead>
      <tr>
        <th>Name</th>
        <th>Description</th>
      </tr>
      </thead>
    </table>
  </div>

  <div class="examples">
    <h3>Example Queries</h3>
    <div class="alert alert-info" role="alert">
      Click an example to populate the query field with the example query.
    </div>

    <table class="table table-striped table-bordered">
      <thead>
      <tr>
        <th>Description</th>
        <th>Query</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>Courses belonging to a specific organization</td>
        <td><a class="example">org:(MITx OR HarvardX)</a></td>
      </tr>
      <tr>
        <td>Courses NOT belonging to a specific organization</td>
        <td><a class="example">org:(-MITx OR -HarvardX)</a></td>
      </tr>
      <tr>
        <td>Courses starting in a specific time period</td>
        <td><a class="example">start:[2016-01-01 TO 2016-12-31]</a></td>
      </tr>
      <tr>
        <td>All runs of a particular course</td>
        <td><a class="example">number:6.002x*</a></td>
      </tr>
      </tbody>
    </table>
  </div>

  <div class="preview">
    <h3>Preview</h3>
    <form id="queryForm" class="form-horizontal">
      <div class="input-group">
        <input id="query" type="text" class="form-control" placeholder="Query">
            <span class="input-group-btn">
              <button class="btn btn-primary" type="submit">Search</button>
            </span>
      </div>
    </form>

    <div class="alert alert-warning alert-dismissible hidden" role="alert" id="alertNoResults">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
      The query returned no results.
    </div>

    <div class="alert alert-danger alert-dismissible hidden" role="alert" id="alertQueryInvalid">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
          aria-hidden="true">&times;</span></button>
      The query is invalid.
    </div>

    <hr>
    <div class="results">
      <table id="courses" class="table table-striped table-bordered" cellspacing="0">
        <thead>
        <tr>
          <th>Course Run Key</th>
          <th>Name</th>
        </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
        integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A=="
        crossorigin="anonymous"></script>
<script type="text/javascript" language="javascript"
        src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript"
        src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>

<script src="{% static 'js/catalog-preview.js' %}"></script>
</body>
</html>
