<!DOCTYPE html>
<html>
{% include 'header.html' %}
<body>
{% include 'banner.html' %}
{% include 'menu.html' %}
<section>
<form action="/submit" method="POST" enctype="multipart/form-data" id="main_form" class="grid-container">
<div class="fasta-file-select">
<h2><svg class="bi bi-cloud-upload" width="1.2em" height="1.2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M4.887 6.2l-.964-.165A2.5 2.5 0 103.5 11H6v1H3.5a3.5 3.5 0 11.59-6.95 5.002 5.002 0 119.804 1.98A2.501 2.501 0 0113.5 12H10v-1h3.5a1.5 1.5 0 00.237-2.981L12.7 7.854l.216-1.028a4 4 0 10-7.843-1.587l-.185.96z"/>
<path fill-rule="evenodd" d="M5 8.854a.5.5 0 00.707 0L8 6.56l2.293 2.293A.5.5 0 1011 8.146L8.354 5.5a.5.5 0 00-.708 0L5 8.146a.5.5 0 000 .708z" clip-rule="evenodd"/>
<path fill-rule="evenodd" d="M8 6a.5.5 0 01.5.5v8a.5.5 0 01-1 0v-8A.5.5 0 018 6z" clip-rule="evenodd"/>
</svg> Upload SARS-CoV-2 Sequence</h2>
<label for="fasta">Select FASTA file of assembled genome (form upload <span class="dropt" title="For larger files or bulk uploads you can use a CLI uploader">max 50K<span style="width:500px;"></span></span>; FASTQ and BAM is coming soon): </label>
<br>
<input type="file" id="fasta" name="fasta" accept=".fa,.fasta,.fna,.fq" required>
<br>
<small>
When uploading your data you need to agree to a <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a> or <a href="https://creativecommons.org/share-your-work/public-domain/cc0/">CC0 license</a>. </small>
</div>
<div class="metadata">
<label>Select metadata submission method:</label>
<br>
<input type="radio" id="metadata_form" name="metadata_type" value="fill" checked onchange="setMode()" required>
<label for="metadata_form">Fill in metadata manually</label>
<input type="radio" id="metadata_upload" name="metadata_type" value="upload" onchange="setMode()" required>
<label for="metadata_upload">Upload metadata file</label>
<br>
<small>Make sure the metadata has submitter attribution details.
Note that most fields in the form are optional.
</small>
<div id="metadata_upload_form_spot">
<div id="metadata_upload_form">
<br>
<label for="metadata">Select JSON or YAML metadata file following <a href="https://github.com/arvados/bh20-seq-resource/blob/master/bh20sequploader/bh20seq-schema.yml" target="_blank">this schema</a> and <a href="https://github.com/arvados/bh20-seq-resource/blob/master/example/maximum_metadata_example.yaml" target="_blank">example</a> (max 50K):</label>
<br>
<input type="file" id="metadata" name="metadata" accept=".json,.yml,.yaml" required>
<br>
</div>
</div>
</div>
<div id="metadata_fill_form_spot">
<div id="metadata_fill_form">
{% for record in fields %}
{% if 'heading' in record %}
{% if loop.index > 1 and 2 < 3 %} <!-- for emacs matching elements -->
</div>
{% endif %}
<div class="record"> <!-- from block, e.g. host fields -->
<h4>{{ record['heading'] }}</h4>
{% else %} <!-- handles one field -->
<div class="field-group" data-keypath="{{ record['id'] }}">
<div class="field" data-number="0">
<label for="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}" title="{{ record.get('docstring', '') }}">
{{ record['label'] }}
{{ "*" if record['required'] else "" }}
{% if 'docstring' in record %}
<a href='javascript:alert({{ record['docstring'] | tojson }})'>❓</a>
{% endif %}
{% if 'ref_iri' in record %}
<a href="{{ record['ref_iri'] }}" target="_blank" title="Ontology Link">🔗</a>
{% endif %}
</label>
{% if record['type'] == 'select' %}
<select class="control" id="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}" name="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}" {{ "required" if record['required'] else "" }}>
<option value="" selected>Choose one...</option>
{% for option in record['options'] %}
<option value="{{ option[1] }}">{{ option[0] }}</option>
{% endfor %}
</select>
{% else %} <!-- input field -->
<input class="control"
type="{{ record['type'] }}"
id="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}"
{{ 'value=http://purl.obolibrary.org/obo/NCBITaxon_9606' if record['id']=='metadata.host.host_species'}}
{{ 'placeholder=http://www.wikidata.org/entity/Q30' if record['id']=='metadata.sample.collection_location'}}
{{ 'placeholder=MyUniqueSampleId.1' if record['id']=='metadata.sample.sample_id'}}
{{ 'value=http://purl.obolibrary.org/obo/NCBITaxon_2697049' if record['id']=='metadata.virus.virus_species'}}
{{ 'readonly=1 value=http://genenetwork.org/submission' if record['id']=='metadata.id'}}
name="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}"
{{ "required" if record['required'] else "" }} {{ ("step=" + record['step']) if 'step' in record else ""}}>
{% endif %}
</div>
{% if record['list'] %}
<button type="button" title="Remove field" class="remove-field invisible">➖</button>
<button type="button" title="Add field" class="add-field">➕</button>
{% endif %}
</div>
{% endif %}
{% if loop.index == loop.length %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
<input class="submit" id="submit" onclick="on_submit_button()" type="submit" value="Add to Pangenome">
</form>
</section>
{% include 'footer.html' %}
<script type="text/javascript">
// Find all the add and remove field buttons and hook up the listeners.
for (let button of document.getElementsByClassName('add-field')) {
button.addEventListener('click', addField)
}
for (let button of document.getElementsByClassName('remove-field')) {
button.addEventListener('click', removeField)
}
// let scriptRoot = {{ request.script_root|tojson|safe }};
let uploadForm = document.getElementById('metadata_upload_form')
let uploadFormSpot = document.getElementById('metadata_upload_form_spot')
let fillForm = document.getElementById('metadata_fill_form')
let fillFormSpot = document.getElementById('metadata_fill_form_spot')
setMode()
</script>
</body>
</html>