1 files changed, 107 insertions, 0 deletions
diff --git a/gn2/wqflask/templates/dataset.html b/gn2/wqflask/templates/dataset.html
new file mode 100644
index 00000000..2e22be17
--- /dev/null
+++ b/gn2/wqflask/templates/dataset.html
@@ -0,0 +1,107 @@
+{% extends "base.html" %}
+
+{% block css %}
+<style type="text/css">
+ .page-header, .dataset-content {
+     padding-left: 10%;
+     line-height: 1.375;
+ }
+
+ .dataset-content blockquote {
+     font-size: 13px;
+ }
+ .page-header h1 {
+     font-size: 1.8em;
+     line-height: 1.375;
+ }
+ .panel-about {
+     background: #F8F8F8;
+     max-width: 35em;
+     margin: 10px;
+ }
+ .panel-metadata {
+     display: inline-block;
+     width: fit-content;
+     height: fit-content;
+     padding: 0;
+     {% if dataset.description or dataset.specificity or dataset.experimentDesignInfo or
+	 dataset.caseInfo or dataset.tissue or
+	 dataset.platform or dataset.processingInfo or
+	 dataset.notes or dataset.references or dataset.acknowledgment or dataset.contributors
+	 %}
+     float: right;
+     {% endif %}
+ }
+
+ .panel-metadata dt {
+     color: green;
+ }
+
+ .panel-metadata dt::after {
+     content: ":";
+ }
+
+ .search {
+     width: 50%;
+     margin: 1em auto;
+ }
+ .has-search .form-control-feedback {
+     right: initial;
+     left: 0;
+     color: #ccc;
+ }
+
+ .has-search .form-control {
+     padding-right: 12px;
+     padding-left: 34px;
+ }
+
+ .search {
+     transform: scale(1.5, 1.5);
+ }
+ .search input {
+     min-width: 17em;
+ }
+ .dataset-search {
+     padding: 0 17%;
+ }
+</style>
+{% endblock %}
+
+{% block title %}Dataset: {{ name }}{% endblock %}
+{% block content %}
+
+{% if dataset %}
+
+{% include 'metadata/dataset.html' %}
+
+{% else %}
+<div class="container dataset-search">
+    <p class="lead">We appreciate your interest, but unfortunately, we don't have any additional information available for: <strong>{{ name }}</strong>.  If you have other inquiries or need assistance with something else, please don't hesitate to get in touch with us.  <b><i>In the meantime you can explore other datasets here:</i></b></p>.
+
+    <!-- Actual search box -->
+    <div class="search">
+	<form class="form-group has-feedback has-search"
+	      hx-post="/datasets/search"
+	      hx-target="#search-results">
+	    <span class="glyphicon glyphicon-search form-control-feedback"></span>
+	    <input class="form-control"
+		   type="search"
+		   name="search" placeholder="Start your dataset search here">
+	</form>
+    </div>
+
+    <div id="search-results"></div>
+
+</div>
+
+
+{% endif %}
+
+{% endblock %}
+
+{% block js %}
+<script language="javascript"
+        type="text/javascript"
+		  src="{{ url_for('js', filename='htmx.min.js') }}"></script>
+{% endblock %}