{% if action_name is not empty %}
    {% set action = createModel('Actions','actions').findAction(action_name) %}  
{% endif %}
{% set descriptor = createAction(action.handler_class,action.package_name).descriptor() %}
{% set items = descriptor.get('options') %}
{% set field_group = 'action_options' %}

{% for property in items %}  
    {% if property.group is not empty %}
        {% set field_name = property.group ~ '[' ~ property.name ~ ']' %}
        {% set field_id = property.group ~ '_field_' ~ property.name %}
    {% else %}
        {% set field_name = property.name %} 
        {% set field_id = 'field_' ~ property.name %}
    {% endif %}    
    {% set relation_field = 'relations[' ~ field_name ~ ']' %}
    
    {% if field_group is not empty %}
        {% set field_name = field_group ~ '[' ~ field_name ~ ']' %}
    {% endif %}
    {% set rule = (property.required == true) ? 'empty' : '' %}  
    {% set property_value = values[property.name]|default(property.value) %}
    
    {% if property['type'] == 7 %}
        <div class="field {{ property.required|ifthen(true,'required') }}">      
            <label>{{ property.title }}</label>
            <div class="ui labeled input">
                <div class="ui label">http://</div>
                <input 
                    {{ rule|attr('rule') }} 
                    type="text" 
                    name="{{ field_name }}" 
                    value="{{ property_value }}"> 
            </div>                
        </div>
    {% elseif property['type'] == 3 %}  
        {{  component('semantic~form.fields.checkbox',{
                label: property.description,
                class: property.required|ifthen(true,'required'),
                name: field_name,   
                id: property.id,
                rule: (property.required == true) ? 'empty' : null,
                field_label: property.title,          
                value: property_value
            }) 
        }}          
    {% elseif property['type'] == 4 %}
        <div class="field {{ property.required|ifthen(true,'required') }}">  
            <label>{{ property.title }}</label>                   
            <select id="{{ field_id }}" class="ui dropdown" name="{{ field_name }}" {{ rule }}>
                {% for item in property.items %}
                <option value="{{ item }}" {{ property_value|ifthen(item,'selected') }}>{{ item }}</option>
                {% endfor %}
            </select>                
        </div>
    {% elseif property['type'] == 6 %}
        {{  component('semantic~form.fields.password',{
                label: property.title,
                class: (property.required == true) ? ' field required' : 'field',
                name: field_name,         
                id: 'password',       
                value: property_value
            }) 
        }}  
    {% elseif property['type'] == 8 %}
        <div class="field {{ property.required|ifthen(true,'required') }}">  
            <label>{{ property.title }}</label>    
            <textarea 
                id="{{ field_id }}"
                name="{{ field_name }}" {{ rule|attr('rule') }} cols="7" rows="7">{{ property_value }}</textarea>                                       
        </div>       
    {% elseif property['type'] == 10 %}
        {{  component('semantic~properties.items.oauth',{ 
                update: update,
                property: property, 
                field_name: field_name,
                oauth_provier: properties.getValue('oauth_provider'),
                oauth_config: properties.getValue('oauth_config')
            }) 
        }} 
    {% elseif property['type'] == 11 %}
        <div class="field {{ property.required|ifthen(true,'required') }}">  
            <label>{{ property.title }}</label>
            {{  component('semantic~language.dropdown',{                
                    name: field_name,
                    selected: property_value,
                    class: 'property-language-dropdown selection',
                    id: 'property_language_dropdown'
                }) 
            }}      
        </div>
    {% elseif property['type'] == 13 %}
    <div class="field {{ property.required|ifthen(true,'required') }}">  
        <label>
            {{ property.title }}
        </label>   
        <div 
            id="key_field_{{ property.group }}_{{ property.name }}"
            class="flex flex-row items-center p-1 border border-solid rounded-lg border-gray-300">    
            {% if property_value is empty %}    
                {{  component('semantic~properties.items.key.edit',{ 
                        group: property.group,
                        field_name: property.name,
                        preview: '...'
                    }) 
                }}
            {% else %}  
                {{ component('semantic~properties.items.key',{ property: property }) }}
            {% endif %}
        </div>
    </div> 
    {% else %}
    <div class="field {{ property.required|ifthen(true,'required') }}"> 
        <div class="flex flex-row items-center">
            <label >
                {{ property.title }}
            </label>   
        </div>     
        <div class="ui left labeled input">                  
            <input 
                id="{{ field_id }}" 
                {{ rule|attr('rule') }} 
                type="text" 
                name="{{ field_name }}" 
                value="{{ property_value }}"> 
            {{  component('actions::admin.actions.properties.relation',{
                    event: event,
                    field_id: field_id,
                    name: relation_field,
                    class: 'label icon'
                }) 
            }}
        </div>              
    </div>
    {% endif %}
{% endfor %}