{% extends "base.html" %}

{% block title %}Extract data and create a new table{% endblock %}

{% block extra_head %}
<link type="text/css" rel="stylesheet" href="/-/static-plugins/datasette-extract/extract.css">
{% endblock %}

{% block content %}
<h1>Extract data and create a new table in {{ database }}</h1>

<form action="{{ request.path }}" method="POST" class="extract-form" enctype="multipart/form-data">
  <p>
    <input type="hidden" name="csrftoken" value="{{ csrftoken() }}">
    <label for="table">Table name:</label>
    <input type="text" name="table" id="table" value="" placeholder="Enter a new table name">
  </p>
  <div id="fields-container">
  {% for field in fields %}
    <p>
      <label>Name <input type="text" name="name_{{ field.index }}" value="{{ field.name or '' }}"></label>
      <label>Type <select name="type_{{ field.index }}">
        <option value="string"{% if field.type == "str" %} selected{% endif %}>Text</option>
        <option value="integer"{% if field.type == "int" %} selected{% endif %}>Integer</option>
        <option value="float"{% if field.type == "float" %} selected{% endif %}>Float</option>
        </select>
      </label>
      <label>Hint
        <input size="40" type="text" name="hint_{{ field.index }}" value="{{ field.hint or '' }}" placeholder="Optional hint">
      </label>
    </p>
  {% endfor %}
  </div>
  <p id="add-another" style="display: none"><button type="button" id="add-column-btn">Add another column</button></p>
  <p><label for="id_content">Paste data here, or drag and drop text or PDF files:</label></p>
  <p>
    <textarea name="content" id="id_content" style="width: 100%; height: 20em;" placeholder="Paste content here"></textarea>
  </p>
  <p id="processing_message" style="display: none;">Processing...</p>
  <p>
    <label>Or upload an image: <input type="file" id="id_image" name="image"></label>
  </p>
  <p><label for="id_instructions">Additional instructions:</label></p>
  <p>
    <textarea name="instructions" id="id_instructions" style="width: 100%; height: 5em;" placeholder="Optional additional instructions"></textarea>
  </p>
  <p>
    <input type="submit" value="Extract">
  </p>
</form>

{% include "_extract_drop_handler.html" %}

<script>
document.querySelector('#add-another').style.display = 'block';
document.getElementById('add-column-btn').addEventListener('click', function() {
  var fieldsContainer = document.getElementById('fields-container');
  var fieldCount = fieldsContainer.querySelectorAll('p').length;
  var newField = `
    <p>
      <label>Name <input type="text" name="name_${fieldCount}"></label>
      <label>Type <select name="type_${fieldCount}">
        <option value="string">Text</option>
        <option value="integer">Integer</option>
        <option value="float">Float</option>
        </select>
      </label>
      <label>Hint
        <input size="40" type="text" name="hint_${fieldCount}" value="" placeholder="Optional hint">
      </label>
    </p>
  `;
  fieldsContainer.insertAdjacentHTML('beforeend', newField);
});
</script>


{% endblock %}