{% extends "base.html" %}

{% block title %}Extract{% 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 extract_to_table form */

table.formgrid td {
  white-space: normal;
  padding: 0.2em;
  vertical-align: middle; /* Align checkbox and label nicely */
}
table.formgrid td.checkbox {
  vertical-align: middle;
}
/* Add some spacing for the hint input */
table.formgrid td input[type="text"] {
    margin-left: 0.5em;
}
/* Adjust label inside table */
table.formgrid td label {
    display: inline; /* Keep label on same line as checkbox */
    font-weight: normal; /* Don't need bold here */
    margin-bottom: 0;
}

/* Ensure textareas have appropriate height */
.extract-form textarea#id_content { height: 20em; }
.extract-form textarea#id_instructions { height: 5em; }

/* Specific responsive rules if needed for formgrid */
@media (max-width: 768px) {
  /* Base responsive rules in _extract_base_styles.html */
}
</style>
{% endblock %}

{% block content %}
<div class="extract-container">
  <form action="{{ request.path }}" method="POST" class="extract-form" enctype="multipart/form-data">
    <h1>Extract data into {{ database }} / {{ table }}</h1>
    <input type="hidden" name="csrftoken" value="{{ csrftoken() }}">

    <p>Select columns to populate with extracted data:</p>
    <table class="formgrid">
    {% for column in columns %}
      <tr>
        <td class="checkbox">
          <input type="checkbox"{% if column.checked %} checked="checked"{% endif %} name="use_{{ column.name }}" id="use_{{ column.name }}">
        </td>
        <td>
          <label for="use_{{ column.name }}">{{ column.name }}</label>
        </td>
        <td>
          <input size="40" type="text" name="hint_{{ column.name }}" value="{{ column.hint }}" placeholder="Optional hint">
        </td>
      </tr> {# Closing TR tag was missing, added it #}
    {% endfor %}
    </table>

    {% 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 %}
      {# Ensure models list is not empty before accessing index 0 #}
      {% if models %}
        <input type="hidden" name="model" value="{{ models[0].id }}">
      {% else %}
        <p><strong>Error:</strong> No suitable AI models found or configured.</p>
      {% endif %}
    {% endif %}

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

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

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


    <div class="form-group">
      <label for="id_instructions">Additional instructions:</label>
      <textarea name="instructions" id="id_instructions" placeholder="Optional additional instructions">{{ instructions }}</textarea> {# Height set via CSS rule #}
    </div>

    {# Only show submit if models are available #}
    {% if models %}
    <div class="form-group">
      <input type="submit" value="Extract">
    </div>
    {% endif %}
  </form>
</div> {# End extract-container #}

<p style="margin-left: 20px;"><a href="{{ duplicate_url }}">Duplicate these columns to a new table</a></p> {# Keep outside the card #}

{% include "_extract_drop_handler.html" %}

{% if previous_runs %}
<h2>Previous extraction tasks</h2>
<div style="overflow-x: auto;"> {# Changed overflow to overflow-x #}
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Created</th>
      <th>Completed</th>
      <th>Model</th> {# Added Model column #}
      <th>Properties</th>
      <th>Instructions</th>
      <th>Error</th>
      <th>Items</th>
    </tr>
  </thead>
  <tbody> {# Added tbody #}
  {% for run in previous_runs %}
  <tr>
    <td>{{ run.id }}</td>
    <td>{{ run.created }}</td>
    <td>{{ run.completed or "" }}</td>
    <td>{{ run.model or "" }}</td> {# Display model used #}
    <td style="max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ run.properties }}">{{ run.properties }}</td> {# Truncate long properties #}
    <td style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ run.instructions or '' }}">{{ run.instructions or "" }}</td> {# Truncate long instructions #}
    <td>{{ run.error or "" }}</td>
    <td>{{ run.num_items }}</td>
  </tr>
  {% endfor %}
  </tbody>
</table>
</div>
{% endif %}

{% endblock %}
