{% extends "base.html" %}

{% block content %}
<div class="section">
  <h2>Shape Expressions (ShEx) Generator</h2>
  <p>Write ShExStatements on the first text area. Choose a delimiter. And press 'Go'.</p>
  <form method="POST" enctype="multipart/form-data" action="{{ url_for('generateshex') }}">
     <div>
      <textarea rows="20" cols="60" id="shexstatements" name="shexstatements" placeholder="foaf,<http://xmlns.com/foaf/0.1/>,,,
rdf,<http://www.w3.org/1999/02/22-rdf-syntax-ns#>,,,

@person,rdf:type,@@foaf:Person,,#should be a person
@person,foaf:name,LIteral,#name
@person,foaf:mbox,IRi,*,#mail
@person,foaf:homepage,IRI,*,#URL
@person,foaf:nick,Literal,*,#Nickname
@person,foaf:depiction,IRI,*,#photograph
@person,foaf:interest,IRI,*,#topics of interest
@person,foaf:knows,@person,*,#person knows another person ">{{ data['input'] }}</textarea>
      <textarea rows="20" cols="60" id="shex" name="shex" placeholder="Output Shape Expression">{{ data['output'] }}</textarea>
     </div>
      <label for="delim">Choose a delimiter:</label>
      <select  name="delim" id="delim">
        <option value=",">, comma (default)</option>
        <option value=";">; semi-colon</option>
        <option value="|">| vertical bar</option>
      </select> 
     <input type="submit" value="Go">
     <input type="button" id="clearbutton" value="Clear">
    <div>
     <label for="csvfileupload"> or Select a CSV file </label>
     <input type="file" name="csvfileupload" value="fileupload" id="csvfileupload">
    </div>
  </form>
  <h2>Examples</h2>
  <p>There are example ShExStatements (CSV files) in the <a href="https://github.com/johnsamuelwrites/ShExStatements/tree/master/examples">examples</a> folder.</p>
  <h2>Format of ShExStatements</h2>
  <img src="{{ url_for('static',filename='images/shexstatements.svg') }}">
</div>
{% endblock %}
{% block script %}
     function clear() {
       console.log("i am herze:");
       document.getElementById('shexstatements').value='';
       document.getElementById('shex').value='';
     }
     function handleCSVFileUpload(event){
       const reader = new FileReader()
       reader.onload = updateShexStatementsInputText
       reader.readAsText(event.target.files[0])
     }
     function updateShexStatementsInputText(event){
       document.getElementById('shexstatements').value = event.target.result;
     }
     function init() {
       document.getElementById('csvfileupload').addEventListener('change', handleCSVFileUpload, false);
       document.getElementById('clearbutton').addEventListener('click', clear, false);
     }
     init();
{% endblock %}
