{% extends "base.html" %}

{% block title %}New {{ process.process_name }} Session - ScanLook{% endblock %}

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

    <div class="form-container" style="max-width: 600px; margin: 0 auto;">
        <h1 class="page-title" style="text-align: center;">New {{ process.process_name }} Session</h1>
        <p class="page-subtitle" style="text-align: center; margin-bottom: var(--space-xl);">Enter header information to begin scanning</p>
        
        <form method="POST" class="form-card">
            {% for field in header_fields %}
            <div class="form-group">
                <label for="{{ field.field_name }}" class="form-label">
                    {{ field.field_label }}
                    {% if field.is_required %}<span class="required">*</span>{% endif %}
                </label>
                
                {% if field.field_type == 'DATE' %}
                <input type="date" 
                       id="{{ field.field_name }}" 
                       name="{{ field.field_name }}" 
                       class="form-input"
                       value="{{ form_data.get(field.field_name, '') }}"
                       {% if field.is_required %}required{% endif %}>
                
                {% elif field.field_type == 'DATETIME' %}
                <input type="datetime-local" 
                       id="{{ field.field_name }}" 
                       name="{{ field.field_name }}" 
                       class="form-input"
                       value="{{ form_data.get(field.field_name, '') }}"
                       {% if field.is_required %}required{% endif %}>
                
                {% elif field.field_type == 'INTEGER' %}
                <input type="number" 
                       id="{{ field.field_name }}" 
                       name="{{ field.field_name }}" 
                       class="form-input"
                       value="{{ form_data.get(field.field_name, '') }}"
                       step="1"
                       {% if field.is_required %}required{% endif %}>
                
                {% elif field.field_type == 'REAL' %}
                <input type="number" 
                       id="{{ field.field_name }}" 
                       name="{{ field.field_name }}" 
                       class="form-input"
                       value="{{ form_data.get(field.field_name, '') }}"
                       step="0.01"
                       {% if field.is_required %}required{% endif %}>
                
                {% else %}
                <input type="text" 
                       id="{{ field.field_name }}" 
                       name="{{ field.field_name }}" 
                       class="form-input"
                       value="{{ form_data.get(field.field_name, '') }}"
                       {% if field.max_length %}maxlength="{{ field.max_length }}"{% endif %}
                       {% if field.is_required %}required{% endif %}>
                {% endif %}
            </div>
            {% endfor %}
            
            {% if not header_fields %}
            <div class="empty-state-small">
                <p>No header fields configured for this process.</p>
                <p>Contact your administrator to set up fields.</p>
            </div>
            {% endif %}

            <div class="form-actions">
                <a href="{{ url_for('cons_sheets.index') }}" class="btn btn-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary" {% if not header_fields %}disabled{% endif %}>
                    Start Scanning
                </button>
            </div>
        </form>
    </div>
</div>

<style>
.required {
    color: var(--color-danger);
}

.empty-state-small {
    text-align: center;
    padding: var(--space-xl);
    color: var(--color-text-muted);
}
</style>
{% endblock %}