{% if app.session.get('_application') == 0 %}
    {% set extendedTemplate = '@AdminLTE/layout/mesodd-layout.html.twig' %}
{% endif %}
{% if app.session.get('_application') == 1 %}
    {% set extendedTemplate = '@AdminLTE/layout/suiodd-layout.html.twig' %}
{% endif %}
{% if app.session.get('_application') == 2 %}
    {% set extendedTemplate = '@AdminLTE/layout/cfgodd-layout.html.twig' %}
{% endif %}

{% extends extendedTemplate %}

{% block page_title %}{% trans %}indicator.title{% endtrans %}{% endblock %}

{% block stylesheets %}
<link href="{{ asset('assets/css/select2.min.css') }}" rel="stylesheet">
{% endblock %}

{% block page_content %}
    {{ form_start(form) }}
        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
            {% block box_body %}
                    <div class="form-group row">
                        <label class="col-form-label col-sm-2">{% trans %}basics.code{% endtrans %}</label>
                        <div class="col-sm-10">
                            {{form_widget(form.code)}}
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-sm-2">{% trans %}basics.name{% endtrans %}</label>
                        <div class="col-sm-10">
                            {{form_widget(form.name)}}
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-sm-2">{% trans %}basics.aspiration{% endtrans %}</label>
                        <div class="col-sm-10">
                            {{form_widget(form.aspiration)}}
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-sm-2">{% trans %}basics.objectif{% endtrans %}</label>
                        <div class="col-sm-10">
                            {{form_widget(form.objectif)}}
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-sm-2">{% trans %}basics.domaine{% endtrans %}</label>
                        <div class="col-sm-10">
                            {{form_widget(form.domaine)}}
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-sm-2">{% trans %}basics.target{% endtrans %}</label>
                        <div class="col-sm-10">
                            {{form_widget(form.cible)}}
                        </div>
                    </div>
            {% endblock %}
        {% endembed %}

        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
            {% block box_title %} 
            <h4>Choix de l'indicateur ODD correspondant</h4>
            {% endblock %}
            {% block box_body %}
                <div class="form-group row">
                        <label class="col-form-label col-sm-2">{% trans %}basics.goal{% endtrans %}</label>
                        <div class="col-sm-10">
                            {{form_widget(form.goal)}}
                        </div>
                </div>
                <div class="form-group row">
                        <label class="col-form-label col-sm-2">{% trans %}basics.target{% endtrans %}</label>
                        <div class="col-sm-10">
                            {{form_widget(form.target)}}
                        </div>
                </div>
                <div class="form-group row">
                        <label class="col-form-label col-sm-2">{% trans %}basics.indicator{% endtrans %}</label>
                        <div class="col-sm-10">
                            {{form_widget(form.indicateur2030)}}
                        </div>
                </div>
            {% endblock %}
        {% endembed %}

        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
            {% block box_body %}
                    <div class="form-group row">
                        <div class="col-sm-2"><a href="{{ path('app_indicateurs') }}" class="btn btn-block btn-default">{% trans %}basics.cancel{% endtrans %}</a></div>
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" name='save' value="save" class="btn btn-block btn-primary">{% trans %}basics.save{% endtrans %}</button>
                        </div>
                    </div>
            {% endblock %}
        {% endembed %}
    {{ form_end(form) }}



{% endblock %}

{% block javascripts %}
    <script>
        let $code = $('#indicator_code');
        let $name = $('#indicator_name');
        let $goal = $('#indicator_goal');

        $goal.change(function() {
            let $form = $goal.closest('form');

            let data = {};
            data[$code.attr('name')] = $code.val();
            data[$name.attr('name')] = $name.val();
            data[$goal.attr('name')] = $goal.val();

            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: data,
                success: function(html) {
                    $('#indicator_target').replaceWith(
                        $(html).find('#indicator_target')
                    );
                }
            });
        });
    </script>

    <script src="{{ asset('assets/js/select2.min.js') }}"></script>
<script>
$(document).ready(function() {
    $('.select2').select2();
});
</script>
{% endblock %}