{% extends "base.html" %}

{% block title %}Add {{ 'Header' if table_type == 'header' else 'Detail' }} 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;">Add {{ 'Header' if table_type == 'header' else 'Detail' }} Field</h1>
        <p class="page-subtitle" style="text-align: center; margin-bottom: var(--space-xl);">{{ process.process_name }}</p>
        
        <form method="POST" class="form-card">
            <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" 
                       placeholder="e.g., Lot Number" required autofocus>
                <p class="form-hint">Display name (field_name is auto-generated)</p>
            </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">TEXT (words, codes, etc.)</option>
                    <option value="INTEGER">INTEGER (whole numbers)</option>
                    <option value="REAL">REAL (decimals, weights)</option>
                    <option value="DATE">DATE</option>
                    <option value="DATETIME">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" 
                       placeholder="Leave blank for no limit" min="1">
                <p class="form-hint">Only applies to TEXT fields</p>
            </div>

            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="is_required" value="1">
                    <span>Required field</span>
                </label>
            </div>

            <div class="form-group">
                <label for="excel_cell" class="form-label">Excel Cell{% if table_type == 'detail' %} (Column){% endif %}</label>
                <input type="text" id="excel_cell" name="excel_cell" class="form-input" 
                       placeholder="{% if table_type == 'header' %}e.g., A3{% else %}e.g., A{% endif %}"
                       style="text-transform: uppercase;">
                <p class="form-hint">
                    {% if table_type == 'header' %}
                    Full cell reference (e.g., A3, B5)
                    {% else %}
                    Column letter only (e.g., A, B) — row is calculated
                    {% endif %}
                </p>
            </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">Add Field</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}