{% extends "base.html" %}

{% block title %}Edit Field - {{ process.process_name }} - ScanLook{% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="mode-selector">
        <a href="{{ url_for('cons_sheets.process_fields', process_id=process.id) }}" class="btn btn-secondary btn-sm">
            <i class="fa-solid fa-arrow-left"></i> Back to Fields
        </a>
    </div>

    <div class="form-container" style="max-width: 600px; margin: 0 auto;">
        <h1 class="page-title" style="text-align: center;">Edit Field</h1>
        <p class="page-subtitle" style="text-align: center; margin-bottom: var(--space-xl);">
            {{ process.process_name }} — {{ 'Header' if field.table_type == 'header' else 'Detail' }}
        </p>
        
        <form method="POST" class="form-card">
            <div class="form-group">
                <label class="form-label">Field Name</label>
                <input type="text" class="form-input" value="{{ field.field_name }}" disabled 
                       style="opacity: 0.6; font-family: var(--font-mono);">
                <p class="form-hint">Cannot be changed (used in database)</p>
            </div>

            <div class="form-group">
                <label for="field_label" class="form-label">Field Label *</label>
                <input type="text" id="field_label" name="field_label" class="form-input" 
                       value="{{ field.field_label }}" required autofocus>
            </div>

            <div class="form-group">
                <label for="field_type" class="form-label">Data Type *</label>
                <select id="field_type" name="field_type" class="form-input" required>
                    <option value="TEXT" {% if field.field_type == 'TEXT' %}selected{% endif %}>TEXT</option>
                    <option value="INTEGER" {% if field.field_type == 'INTEGER' %}selected{% endif %}>INTEGER</option>
                    <option value="REAL" {% if field.field_type == 'REAL' %}selected{% endif %}>REAL</option>
                    <option value="DATE" {% if field.field_type == 'DATE' %}selected{% endif %}>DATE</option>
                    <option value="DATETIME" {% if field.field_type == 'DATETIME' %}selected{% endif %}>DATETIME</option>
                </select>
            </div>

            <div class="form-group">
                <label for="max_length" class="form-label">Max Length</label>
                <input type="number" id="max_length" name="max_length" class="form-input" 
                       value="{{ field.max_length or '' }}" min="1">
            </div>

            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="is_required" value="1" {% if field.is_required %}checked{% endif %}>
                    <span>Required field</span>
                </label>
            </div>

            {% if field.table_type == 'detail' %}
            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="is_duplicate_key" value="1" {% if field.is_duplicate_key %}checked{% endif %}>
                    <span>Use for duplicate detection</span>
                </label>
                <p class="form-hint">Check this for the field that should be checked for duplicates (e.g., Lot Number)</p>
            </div>
            {% endif %}

            <div class="form-group">
                <label for="excel_cell" class="form-label">Excel Cell{% if field.table_type == 'detail' %} (Column){% endif %}</label>
                <input type="text" id="excel_cell" name="excel_cell" class="form-input" 
                       value="{{ field.excel_cell or '' }}" style="text-transform: uppercase;">
            </div>

            <div class="form-actions">
                <a href="{{ url_for('cons_sheets.process_fields', process_id=process.id) }}" class="btn btn-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}