{% extends "@front/base/front.twig" %}

{% block content %}

    <div class="container">
        <div class="row">
            <div class="col-12 col-md-10">
                <form id="formEdit" method="post" action="{{ path('front:source:save', {uid: source.uid|default}) }}">
                    <div class="form-group">
                        <label for="col-form-label uid">Id</label>
                        <input id="uid" name="uid" class="form-control" type="text" value="{{ source.uid|default }}" placeholder="Source ID" disabled readonly>
                    </div>
                    <div class="form-group">
                        <label for="col-form-label name">Name</label>
                        <input id="name" name="name" class="form-control" type="text" value="{{ source.name|default }}" placeholder="Name of the source">
                    </div>
                    <div class="form-group">
                        <label for="col-form-label description">Description</label>
                        <textarea id="description" name="description" class="form-control" rows="10"  placeholder="Description">{{ source.description|default }}</textarea>
                    </div>
                    <div class="form-group">
                        <div class="config json-editor"></div>
                        <textarea id="config" name="config" class="form-control" style="display:none"></textarea>
                    </div>
                    <button class="btn btn-primary sourceSave">Submit</button>
                    {% if source.uid|default %}
                    <button class="btn btn-danger sourceDelete">Delete</button>
                    {% endif %}
                </form>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function(){

            JSONEditor.defaults.options.theme = 'bootstrap4';

            var input = $('#config');
            var element = $('.config.json-editor')[0];
            if(element){
                var configEditor = new JSONEditor( element , {
                    disable_edit_json: true,
                    disable_properties: true,
                    required_by_default: true,
                    schema: {{ configSchema|default({})|json_encode|raw }}
                });
                // Set initial value
                configEditor.on('ready',function(){
                    configEditor.setValue({{ source.config|default|json_encode|raw }});
                });
                // Save changed value
                configEditor.on('change',function() {
                    var validation_errors = configEditor.validate();
                    if(validation_errors.length) {
                        console.log(validation_errors);
                    } else {
                        input.val( JSON.stringify(configEditor.getValue()) );
                    }
                });
            }

            $('button.sourceSave').on('click',function(e){
                e.preventDefault();
                $('#formEdit').submit();
            });

            {% if source.uid|default %}
            $('button.sourceDelete').on('click',function(e){
                e.preventDefault();
                if (confirm('Are you sure you what to delete this source? This cannot be undone!')){
                    $('#formEdit').attr("action","{{ path('front:source:delete',{'uid': source.uid|default}) }}");
                    $('#formEdit').submit();
                }
            });
            {% endif %}

        });

        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
        }
    </script>

{% endblock %}

{% block footer %}
    {{ parent() }}
    <script src="/assets/javascript/jsoneditor.min.js"></script>
{% endblock %}