{% extends "base.html" %}

{% block content %}
<section class="hero-panel compact page-header-compact">
    <div class="hero-copy">
        <p class="eyebrow">Engine Create</p>
        <h1>新增引擎</h1>
        <p class="hero-text">创建一个新的引擎家族，并同时录入第一条配置项。</p>
    </div>
</section>

<form method="post" class="edit-layout">
    <section class="panel">
        <div class="panel-heading">
            <p class="eyebrow">Family</p>
            <h2>基础字段</h2>
        </div>
        <div class="form-grid family-grid">
            {% for field in family_fields %}
            {% set field_value = request.form.get(field.name, '') %}
            <label>
                <span class="field-label">{{ field.label }}</span>
                {% if field.kind == 'combo' %}
                {% set options = form_options.get(field.name, []) %}
                {% set custom_value = '' if not field_value or field_value in options else field_value %}
                <select name="{{ field.name }}" {% if field.required %}required{% endif %}>
                    <option value="">请选择</option>
                    {% for option in options %}
                    <option value="{{ option }}" {% if option == field_value %}selected{% endif %}>{{ option }}</option>
                    {% endfor %}
                    <option value="{{ custom_option_value }}" {% if custom_value %}selected{% endif %}>新增选项</option>
                </select>
                <input
                    type="text"
                    name="{{ field.name }}__custom"
                    value="{{ custom_value }}"
                    placeholder="没有合适选项时，在这里输入新的 {{ field.label }}"
                >
                {% else %}
                <input
                    type="text"
                    name="{{ field.name }}"
                    value="{{ field_value }}"
                    {% if field.required %}required{% endif %}
                >
                {% endif %}
            </label>
            {% endfor %}
        </div>
    </section>

    <section class="panel panel-wide">
        <div class="panel-heading">
            <p class="eyebrow">Initial Variant</p>
            <h2>首个配置项</h2>
        </div>
        <div class="form-grid variant-add-grid">
            {% for field in variant_fields %}
            {% set input_name = 'initial-' ~ field.name %}
            {% set field_value = request.form.get(input_name, '') %}
            <label>
                <span class="field-label">{{ field.label }}</span>
                {% if field.kind == 'combo' %}
                {% set options = form_options.get(field.name, []) %}
                {% set custom_value = '' if not field_value or field_value in options else field_value %}
                <select name="{{ input_name }}" {% if field.required and not custom_value %}required{% endif %}>
                    <option value="">请选择</option>
                    {% for option in options %}
                    <option value="{{ option }}" {% if option == field_value %}selected{% endif %}>{{ option }}</option>
                    {% endfor %}
                    <option value="{{ custom_option_value }}" {% if custom_value %}selected{% endif %}>新增选项</option>
                </select>
                <input
                    type="text"
                    name="{{ input_name }}__custom"
                    value="{{ custom_value }}"
                    placeholder="没有合适选项时，在这里输入新的 {{ field.label }}"
                >
                {% else %}
                <input
                    type="text"
                    name="{{ input_name }}"
                    value="{{ field_value }}"
                    {% if field.required %}required{% endif %}
                >
                {% endif %}
            </label>
            {% endfor %}
        </div>

        <div class="button-row top-gap">
            <button class="primary-button" type="submit">创建引擎</button>
            <a class="secondary-button" href="{{ url_for('web.engine_list') }}">取消</a>
        </div>
    </section>
</form>
{% endblock %}