{% 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">
{% include "_extract_base_styles.html" %}
<style>
  /* Specific styles for create_table form */
  /* H1 handled by base styles now */
  .extract-form h1 { /* Keep specific h1 style if needed, otherwise remove if base is sufficient */
    color: var(--primary-color);
    font-size: 1.8em;
  }

 /* Base styles handle text inputs, selects, textareas */
  .extract-form textarea#id_content {
    /* Specific height override */
    height: 20em;
  }

  .field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    align-items: flex-start;
  }

  .name-field {
    flex: 2 1 200px;
  }

  .type-field {
    flex: 1 1 100px;
  }

  .hint-field {
    flex: 3 1 300px;
  }

  .column-container {
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
  }

  .column-header {
    margin-bottom: 16px;
    color: var(--primary-color);
  }

  .section-title {
    color: var(--primary-color);
    margin-top: 25px;
    margin-bottom: 15px;
    font-size: 1.2em;
  }

  #add-column-btn {
    background-color: var(--secondary-color);
    color: #333;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 16px;
    font-family: Helvetica, Arial, sans-serif;
    transition: background-color 0.3s;
  }

  #add-column-btn:hover {
    background-color: #e9ecef;
  }


  /* Responsive adjustments for create table specific elements */
  @media (max-width: 768px) {
     /* Base responsive rules in _extract_base_styles.html */
    .field-row {
      flex-direction: column;
      gap: 10px;
    }

    .name-field, .type-field, .hint-field {
      flex: 1 1 100%;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="extract-container">
  <form action="{{ request.path }}" method="POST" class="extract-form" enctype="multipart/form-data">
    {# Moved h1 inside form to be styled by .extract-form h1 #}
    <h1>Extract data to create a new table in {{ database }}</h1>
    <div class="form-group">
      <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">
    </div>
    {% if models|length > 1 %}
    <div class="form-group">
      <label for="model">Model:</label>
      <select name="model" id="model">
        {% for model in models %}
          <option value="{{ model.id }}">{{ model.name }}</option>
        {% endfor %}
      </select>
    </div>
    {% else %}
      <input type="hidden" name="model" value="{{ models[0].id }}">
    {% endif %}

    <div class="column-container">
      <h3 class="column-header">Define Columns</h3>
      <div id="fields-container">
      {% for field in fields %}
        <div class="field-row">
          <div class="name-field">
            <label>Name</label>
            <input type="text" name="name_{{ field.index }}" value="{{ field.name or '' }}">
          </div>
          <div class="type-field">
            <label>Type</label>
            <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>
          </div>
          <div class="hint-field">
            <label>Hint</label>
            <input type="text" name="hint_{{ field.index }}" value="{{ field.hint or '' }}" placeholder="Optional hint">
          </div>
        </div>
      {% endfor %}
      </div>
      <div id="add-another" style="display: none; margin-top: 15px;">
        <button type="button" id="add-column-btn">+ Add another column</button>
      </div>
    </div>

    <h3 class="section-title">Enter Your Data</h3>
    <div class="form-group">
      <label for="id_content">Paste data here, or drag and drop text files:</label>
      <textarea name="content" id="id_content" placeholder="Paste content here"></textarea> {# Height set via CSS rule #}
    </div>

    <div id="processing_message"> {# style="display: none;" handled by CSS #}
      <strong>Processing...</strong> This may take a moment.
    </div>

    <div class="form-group file-upload"> {# Using standard file-upload class #}
      <label>Or upload an image or PDF:</label>
      <input type="file" id="id_image" name="image">
    </div>

    <div class="form-group"> {# Added form-group wrapper for consistency #}
      <label for="id_instructions">Additional instructions:</label>
      <textarea name="instructions" id="id_instructions" style="height: 5em;" placeholder="Optional additional instructions"></textarea>
    </div>

    <div class="form-group">
      <input type="submit" value="Extract">
    </div>
  </form>
</div>

{% 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 fieldRows = fieldsContainer.querySelectorAll('.field-row');
  var fieldCount = fieldRows.length;

  var newField = document.createElement('div');
  newField.className = 'field-row';
  newField.innerHTML = `
    <div class="name-field">
      <label>Name</label>
      <input type="text" name="name_${fieldCount}">
    </div>
    <div class="type-field">
      <label>Type</label>
      <select name="type_${fieldCount}">
        <option value="string">Text</option>
        <option value="integer">Integer</option>
        <option value="float">Float</option>
      </select>
    </div>
    <div class="hint-field">
      <label>Hint</label>
      <input type="text" name="hint_${fieldCount}" value="" placeholder="Optional hint">
    </div>
  `;

  fieldsContainer.appendChild(newField);
});
</script>
{% endblock %}
