{% extends "nopaque.html.j2" %}

{% block page_content %}
<div class="col s12 m4">
  <p>Fill out the following form to upload and view your exported query data from the corpus analsis.</p>
  <a class="waves-effect waves-light btn" href="{{ url_for('main.dashboard') }}"><i class="material-icons left">arrow_back</i>Back to dashboard</a>
</div>

<div class="col s12 m8">
  <form class="nopaque-submit-form" data-progress-modal="progress-modal">
    <div class="card">
      <div class="card-content">
        {{ add_query_result_form.hidden_tag() }}
        <div class="row">
          <div class="col s12 m4">
            {{ M.render_field(add_query_result_form.title, data_length='32', material_icon='title') }}
          </div>
          <div class="col s12 m8">
            {{ M.render_field(add_query_result_form.description, data_length='255', material_icon='description') }}
          </div>
          <div class="col s12">
            {{ M.render_field(add_query_result_form.file, accept='.json', placeholder='Choose your .json file') }}
          </div>
        </div>
      </div>
      <div class="card-action right-align">
        {{ M.render_field(add_query_result_form.submit, material_icon='send') }}
      </div>
    </div>
  </form>
</div>

<div id="progress-modal" class="modal">
  <div class="modal-content">
    <h4><i class="material-icons prefix">file_upload</i> Uploading file...</h4>
    <div class="progress">
      <div class="determinate" style="width: 0%"></div>
    </div>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-light btn red abort-request">Cancel</a>
  </div>
</div>
{% endblock %}