{% extends "layout.html" %} {% block content %}
<main class="container-fluid mt-4">
  <div class="bg-white rounded border shadow px-4 py-2 mb-4">
    <!-- TITLE AND BUTTONS -->
    <section class="row border-bottom mt-4 pb-2 mb-2">
      <form class="col-12 d-flex justify-content-between" action="" method="post">
        {{ form.hidden_tag() }}
        {% if survey_id %}
        <div>
          <a class="btn btn-secondary" href="{{ url_for('surveys.dashboard', survey_id=survey_id) }}"
          title="Return to the dashboard page for this survey">Back</a>
        </div>
        {% endif %}
        <section class="form-group">
          {% if form.title.errors %}
              {{ form.title(class="form-control is-invalid") }}
              <div class="text-danger">
                {% for error in form.title.errors %}
                  <span>{{ error }}</span>
                {% endfor %}
              </div>
          {% else %}
              {{ form.title(class="form-control", placeholder="Enter title") }}
          {% endif %}
        </section>
        <div>
          <span id="proceed">
            <a class="btn btn-primary" href="{{ url_for('surveys.home') }}" title="Go to the home page">Proceed to home</a>
          </span>
          {{ form.submit(class="btn btn-primary") }}
        </div>
      </form>
    </section>

    <!-- HANDSONTABLE -->
    <div class="d-flex mb-2 justify-content-between info-row">
      <small class="align-self-end table-guide">Click on cells to edit data</small>
      <button class="btn btn-info" type="button" data-toggle="modal" data-target="#new-column-modal">Add new column</button>
    </div>
    <div class="handsontable-container overflow-auto vh-75">
      <div id="handsontable"></div>
    </div>
    <div class="lead py-2">
      New rows will be generated as you enter
    </div>
    <!-- Initial overlay -->
    <section class="input-overlay">
      <div class="add-variable p-4 rounded border pointer hover-shadow primary-transition" data-toggle="modal" data-target="#new-column-modal">
        <p class="lead m-0 text-muted">Click here to add your first column</p>
        <div class="text-center mt-2">
          <i class="fa fa-plus-circle fa-lg text-primary" aria-hidden="true"></i>
        </div>
      </div>
    </section>
  </div>
</main>



<!-- Modal requesting header when new column is added -->
<section class="modal fade" id="new-column-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Enter a heading for your new column</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <input type="text" class="form-control heading">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" id="confirm" class="btn btn-primary add-column">Add column</button>
      </div>
    </div>
  </div>
</section>

<!-- Modal asking user to confirm moving to dashboard if not saved -->
<section class="modal fade" id="save-changes-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">You have unsaved changes. Proceed without saving?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <a class="btn btn-primary" href="{{ url_for('surveys.home') }}"
        title="Proceed without saving to the home page">Proceed</a>
      </div>
    </div>
  </div>
</section>

<script type="text/javascript" defer>
  var nan = "N/A";
  var True = true;
  var False = false;
  var data = {{ data | safe }}
  // Needed for testing. Pytest disables CSRF tokens
  {% if 'csrf_token' in form %}
    var csrf = "{{ form.csrf_token._value() }}"
  {% endif %}
  var url = "{{ url_for('surveys.input', survey_id=survey_id) }}"
</script>
<script src="{{ url_for('static', filename='input.js') }}" defer></script>
{% endblock content %}