{% if form is defined %}
    {% set field_value = entity.attributes is defined and entity.attributes is not empty 
        ? entity.attributes|json_encode(constant('JSON_PRETTY_PRINT') b-or constant('JSON_UNESCAPED_UNICODE'))
        : '{
  "example_field": {
    "type": "string",
    "label": "Exemple de champ",
    "required": false,
    "placeholder": "Entrez une valeur..."
  }
}' %}

    <div class="form-group">
        <label for="{{ form.vars.id }}" class="form-label">
            {{ form.vars.label|trans }}
        </label>
        
        <div class="code-editor-wrapper">
            <textarea 
                id="{{ form.vars.id }}" 
                name="{{ form.vars.full_name }}" 
                class="form-control code-editor"
                rows="20"
                data-language="javascript"
                placeholder="Entrez vos attributs JSON ici..."
            >{{ field_value }}</textarea>
        </div>
        
        <div class="form-help mt-2">
            <strong>Format des attributs :</strong><br>
            <code>{
  "field_name": {
    "type": "string|select|boolean|date|number|text",
    "label": "Libellé affiché",
    "required": true|false,
    "placeholder": "Texte d'aide (optionnel)",
    "options": ["option1", "option2"] // Pour type 'select' uniquement
  }
}</code><br>
            <strong>Types disponibles :</strong> string, select, boolean, date, number, text
        </div>
    </div>

    <style>
    .code-editor {
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 13px;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
    }
    
    .code-editor:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    .form-help {
        font-size: 0.875rem;
        color: #6c757d;
    }
    
    .form-help code {
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 0.25rem;
        padding: 0.5rem;
        display: block;
        white-space: pre-wrap;
        margin: 0.5rem 0;
    }
    </style>
{% endif %}