Add a details component with search query tips

templates/search.html

@@ -21,6 +21,22 @@ <h1 class="govuk-heading-l">{{h1_value}}</h1>
           </div>
         </div>
       </form>
+      <details class="govuk-details">
+        <summary class="govuk-details__summary">
+          <span class="govuk-details__summary-text">
+            Search query tips
+          </span>
+        </summary>
+        <div class="govuk-details__text">
+          <ul class="govuk-list govuk-list--bullet">
+            <li><p>Use multiple words to narrow down your search.</p><p>For example: <strong>prisons probation</strong> matches data mentioning "prisons" AND "probation".</p></li>
+            <li><p>Separate words with a pipe to broaden your search.</p><p>For example: <strong>prisons | probation</strong> matches data mentioning "prisons" OR "probation".</p></li>
+            <li><p>Quote phrases to require an exact match.</p><p>For example: <strong>"case management"</strong> matches the exact phrase "case management" but not either word on its own.</p></li>
+            <li><p>Use a minus sign to exclude words.</p><p>For example: <strong>courts -magistrates</strong> excludes any results that mention "magistrates".</p></li>
+          </ul>
+          <p><a href="https://datahubproject.io/docs/how/search/#advanced-queries">More search query examples</a></p>
+        </div>
+      </details>
     </div>
   </div>
   <div class="govuk-grid-row">