{% 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 %}