{% if fields is empty %}
<div class="bg-danger carriers_config-error">
    <i class="glyphicon glyphicon-remove-sign"></i> 
    No fue posible cargar correctamente la página de configuración solicitada. Por favor, intente nuevamente.
</div>
{% else %}

<form class="form carriers_config-form">
    <input type="hidden" class="carriers_config-field" name="local_carrier_code" value="{{ carrier.code }}">
    <input type="hidden" class="carriers_config-field" name="local_carrier_conn" value="{{ connectionId }}">
   
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        {% for key, section in fields %}
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                    <h3 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-{{key}}" aria-expanded="true" aria-controls="collapse-{{key}}" style="display:block;">
                            <div style="display: flex;
                                justify-content: space-between;
                                align-items: center;">                                        
                                <span>{{section.title}}</span>
                                <span class="caret"></span>
                            </div>
                        </a>
                    </h3>
                </div>
        
                <div id="collapse-{{key}}" {% if key == 0 %} class="panel-collapse collapse in" {% else %} class="panel-collapse collapse" {% endif %} role="tabpanel" aria-labelledby="heading-{{key}}">
                    <div class="panel-body">
                        {% for field in section.elements %}
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <div class="form-group">
                                    {% if field.type == 'textbox' %}
                                        <label for={{field.name}}>{{field.label}}</label>
                                        <input type="text" class="carriers_config-field form-control" id="{{ field.name }}"  name="{{ field.name }}"  placeholder="{{field.placeholder}}" value="{{ field.value }}">
                                    {% elseif field.type == 'textarea' %}
                                        <label for={{field.name}}>{{field.label}}</label>
                                        <textarea class="carriers_config-field form-control" id="{{ field.name }}" name="{{ field.name }}" placeholder="{{field.placeholder}}">{{ field.value }}</textarea>
                                    {% elseif field.type == 'select' %}
                                        <label for={{field.name}}>{{field.label}}</label>
                                        <select class="carriers_config-field form-control" id="{{field.name}}" name="{{ field.name }}">
                                            {% for option in field.values %}
                                                <option
                                                    {% if field.value is defined %}
                                                        {{(field.value == option.value) ? "selected" : ""}} 
                                                    {% else %}
                                                        {{option.selected ? "selected" : ""}}
                                                    {% endif %}
                                                    value="{{option.value}}" >{{option.pretty_name}}
                                                </option>
                                            {% endfor %}
                                        </select>
                                    {% elseif field.type == 'radio' %}
                                        <label for={{field.name}}>{{field.label}}</label> 
                                        <fieldset class="ml-2">
                                            {% for radio in field.values %}
                                                <div>
                                                    <input type="radio" class="carriers_config-field" id="{{radio.value}}" name="{{ field.name }}" value="{{radio.value}}"
                                                        {% if field.value is defined %}  
                                                            {{ (field.value == radio.value) ? "checked" : "" }}  
                                                        {% else %} 
                                                            {{ radio.selected ? "checked" : "" }}
                                                        {% endif %}
                                                    >
                                                    <label for="{{radio.value}}">{{radio.pretty_name}}</label>
                                                </div>
                                            {% endfor %}
                                        </fieldset>
                                    {% elseif field.type == 'checkbox_group' %}
                                        <label for="{{ field.name }}">{{ field.label }}</label> 
                                        <fieldset> 
                                            {% for checkbox in field.values %}
                                                <div>
                                                    <input type="checkbox" class="carriers_config-field" id="{{checkbox.name}}" name="{{ field.name }}" value="{{checkbox.name}}"
                                                        {% if field.value is defined %} 
                                                            {{ (checkbox.name in field.value) ? "checked" : "" }}
                                                        {% else %} 
                                                            {{ checkbox.selected ? "checked" : "" }}
                                                        {% endif %}
                                                    >
                                                    <label for="{{checkbox.name}}">{{checkbox.pretty_name}}</label>
                                                </div>
                                            {% endfor %}
                                        </fieldset>
                                    {% elseif field.type == 'text' %}
                                        <div class="p-3 mb-2 bg-{{field.context}} text-white">{{field.content | raw}}</div>
                                    {% elseif field.type == 'link' %}
                                        <div class="carriers_config-field">
                                            <a href="{{ field.default_value | raw }}" target="_blank">{{ field.label }}</a>
                                        </div>
                                    {% else %}
                                        <p>El campo: {{ field.label }} no pudo ser renderizado. Comunicarse con el soporte de Fulljaus.</p>
                                    {% endif %}
                                    <br>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
    <div class="text-right">
        <div class="form-group">
            <button type="submit" class="btn btn-primary carriers_cf-submit">
                <span class="carriers_cf-saving-label"><i class="fa fa-refresh fa-spin"></i> Guardando</span>
                <span class="carriers_cf-save-label">Guardar</span>
                <span class="carriers_cf-success-label"><i class="fa fa-check"></i> Guardado!</span>
                <span class="carriers_cf-error-label"><i class="fa fa-times"></i> Error</span>
            </button>
        </div>
    </div>
</form>
{% endif %}