{% extends "config/base.html" %}
{% import "site_shell/_macros.html" as ui %}

{% block title %}Create Variable - Pychestrate Configuration{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Create Variable</h1>
    <p>Add a new global configuration variable</p>
</div>

<div class="card narrow">
    <form method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        {{ ui.error_summary(errors, error_labels) }}

        <div class="form-group">
            <label for="name">Variable Name *</label>
            <input type="text" id="name" name="name" class="form-control" required
                   value="{{ form_data.name if form_data else '' }}"
                   pattern="[a-zA-Z][a-zA-Z0-9_.]{0,127}" title="Letters, digits, underscores and periods, starting with a letter; at most 128 characters. Spaces are not allowed."{{ ui.invalid_attrs(errors, 'name', 'name-help') }}>
            <p class="form-text" id="name-help">Letters, digits, underscores and periods, starting with a letter; at most 128 characters. For example <code>ui.profile.surfaces</code>.</p>
            {{ ui.field_error(errors, 'name') }}
        </div>
        
        <div class="form-group">
            <label for="var_type">Type *</label>
            <select id="var_type" name="var_type" class="form-control" required>
                <option value="string" {% if form_data and form_data.var_type == 'string' %}selected{% endif %}>String</option>
                <option value="integer" {% if form_data and form_data.var_type == 'integer' %}selected{% endif %}>Integer</option>
                <option value="float" {% if form_data and form_data.var_type == 'float' %}selected{% endif %}>Float</option>
                <option value="boolean" {% if form_data and form_data.var_type == 'boolean' %}selected{% endif %}>Boolean</option>
                <option value="json" {% if form_data and form_data.var_type == 'json' %}selected{% endif %}>JSON</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="value">Value *</label>
            <textarea id="value" name="value" class="form-control" rows="3" required{{ ui.invalid_attrs(errors, 'value', 'value-help') }}>{{ form_data.value if form_data else '' }}</textarea>
            <p class="form-text" id="value-help">For boolean, use 'true' or 'false'. For JSON, enter valid JSON.</p>
            {{ ui.field_error(errors, 'value') }}
        </div>
        
        <div class="form-group">
            <label for="default_value">Default Value</label>
            <textarea id="default_value" name="default_value" class="form-control" rows="2"{{ ui.invalid_attrs(errors, 'default_value') }}>{{ form_data.default_value if form_data else '' }}</textarea>
            {{ ui.field_error(errors, 'default_value') }}
        </div>
        
        <div class="form-group">
            <label for="description">Description</label>
            <textarea id="description" name="description" class="form-control" rows="2">{{ form_data.description if form_data else '' }}</textarea>
        </div>
        
        <div class="actions-row">
            <button type="submit" class="btn btn-primary">
                {{ ui.icon("save") }} Create Variable
            </button>
            <a href="{{ url_for('config.variable_list') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}