{#/*********************************************************************************
 * This file is part of Myddleware.

 * @package Myddleware
 * @copyright Copyright (C) 2013 - 2015  Stéphane Faure - CRMconsult EURL
 * @copyright Copyright (C) 2015 - 2016  Stéphane Faure - Myddleware ltd - contact@myddleware.com
 * @link http://www.myddleware.com	
 
 This file is part of Myddleware.
 
 Myddleware is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 Myddleware is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.

 You should have received a copy of the GNU General Public License
 along with Myddleware.  If not, see <http://www.gnu.org/licenses/>.
*********************************************************************************/ #} 

{% extends 'base.html.twig' %}
{% block title %}{{parent()}} | {{'title.rule.create'|trans}}{% endblock %}
{% block titlesm %}{{'title.rule.create'|trans}}{% endblock titlesm %} 
{% block body %}
    <div id="animation">

        {% if error != false  %}
        <!-- erreur -->
        <div id="error" class="ui-widget">
            <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
            <p>
            <span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
                <strong>Alerte:</strong>
                {{ error }}
                </p>
            </div>
        </div>
        <div class="clr"></div>
        {% endif %}
        
        <div class="animation-content animation-content-left">
            <div class="animation-content-left-toggle-btn"></div>
            <div id="animation-cleft" class="carousel">
                <a class="prev">{{'animate.carousel.previous'|trans}}</a>
                <div class="window">
                    <ul class="clr">
                        <li>
                            <a class="fancybox_animation" data-fancybox-type="iframe" href="{{ path('regle_connector_create_out',{'type' : 'source' }) }}">
                                <span class="animation-addbtn">
                                    <i class="fas fa-plus-circle"></i>
                                </span>
                            </a>
                        </li>
                        {# Liste des solutions possédant au moins 1 connecteur de type : SOURCE #}
                        {% if source %}
                            {% for s in source %}
                            <li>
                                <img data-id="{{ s.getId }}" data-solution="{{ s.getName }}" class="animation-solution-source gray" src="{{ asset('build/images/solution/' ~ s.getName ~ '.png' ) }}" alt="{{ s.getName }}" />
                            </li>
                            {% endfor %}
                        {% endif %} 
                        {# Liste des solutions possédant au moins 1 connecteur de type : SOURCE #}
                    </ul>
                </div> <!-- .window -->
                <a class="next">{{'animate.carousel.next'|trans}}</a>
            </div> <!-- .carousel -->
        </div>
        <div class="animation-content animation-workspace">

            <div id="head">
                <div class="d-flex justify-content-between">
                    <div class=" name_solution display-6">
                        {{'animate.solution.source'|trans}}
                    </div> 
                    <div class=" name_solution display-6">
                        {{'animate.solution.target'|trans}}
                    </div>
                </div>
                <div class="clr d-flex justify-content-center">
                    <ul >
                        <li class="mb-2">
                            <a href="{{'animate.tutoriel.link'|trans}}" target="_blank">{{'animate.tutoriel.textlink'|trans}}</a>
                        </li>                             
                        <li>
                            <form role="form" id="nameverif" onsubmit="return false;">
                                <div class="d-flex input-group has-normal has-feedback">
                                    <input type="text" class="form-control me-4" id="rulename" placeholder="{{'animate.rulename'|trans}}" maxlength="40">
                                </div>
                            </form>
                        </li>
                    </ul>
                </div>

            </div>

            <ul>
                <li>
                </li>
                <li class="animation-workspace-container">
                    <div class="animation-workspace-content">
                        <div class="animation-puce arcleft-g">
                            <ul id="animation-source-container">
                                <li><div id="animation-source"><img src="" alt="" /></div></li>
                            </ul>
                        </div>
                    </div>
                    <div class="animation-workspace-content" align="right">
                        <ul class="bar-left">
                            <li><div id="animation-Bar1" class="progress progress-striped active animation-bar-left">
                            <div class="progress-bar">
                            <span class="sr-only"></span>
                            </div></div></li>
                            <li><div id="animation-Bar2" class="progress progress-striped active animation-bar-left">
                            <div class="progress-bar">
                            <span class="sr-only"></span>
                            </div></div></li>
                        </ul>
                    </div>
                    <div class="animation-workspace-content">
                        <div id="animation-myddleware-div" class="animation-puce">
                            <div id="animation-myddleware-back-0"><div class="animation-myddleware-logo"></div></div>
                            <div id="animation-myddleware-back-1"><div class="animation-myddleware-logo"></div></div>
                            <div id="animation-myddleware-back-2"><div class="animation-myddleware-logo"></div></div>
                            <div id="animation-myddleware-back-3"><div class="animation-myddleware-logo"></div></div>
                        </div>
                    </div>
                    <div class="animation-workspace-content">
                        <ul class="bar-right">
                            <li><div id="animation-Bar3" class="progress progress-striped active animation-bar-right">
                            <div class="progress-bar">
                            <span class="sr-only"></span>
                            </div></div></li>
                            <li><div id="animation-Bar4" class="progress progress-striped active animation-bar-right">
                            <div class="progress-bar">
                            <span class="sr-only"></span>
                            </div></div></li>
                        </ul>
                    </div> 
                    <div class="animation-workspace-content">
                        <div class="animation-puce arcright-g">
                            <ul id="animation-cible-container">
                                <li><div id="animation-cible"><img src="" alt=""/></div></li>
                            </ul>                                   
                        </div>
                    </div>
                </li>
            </ul>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="left col">
                        <div class="row">
                            <div class="col input-group">
                                <div class="row">
                                    <div class="col">
                                        <select class="form-select form-select-lg" id="animation-Connecteur-source" name="animation-Connecteur-source"></select>
                                    </div>
                                    <div class="col">
                                        <span class="loader-source"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row justify-content-center">
                            <div id="connector-source-error" class="alert alert-danger col-6"></div>
                            <div id="connector-source-success" class="alert alert-success col-6"></div>
                        </div>
                    </div>
                    <div class="right col">
                        <div class="row">
                            <div class="col input-group">
                                <div class="row">
                                    <div class="col">
                                        <span class="loader-cible"></span>
                                    </div>
                                    <div class="col">
                                        <select class="form-select form-select-lg" id="animation-Connecteur-cible" name="animation-Connecteur-cible"></select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <div class="row">
                        <div id="connector-cible-error" class="alert alert-danger col-6"></div>
                        <div id="connector-cible-success" class="alert alert-success col-6"></div>
                    </div>
                </div>
            </div>
                <div class="clr"></div>
                <div id="choice" class="row" >
                    <div class="btn-group col" role="group" aria-label="Module or template buttons">
                        <button class="btn btn-outline-secondary btn-lg" id="btn_module" type="button">
                            <span class="glyphicon glyphicon-hand-right"></span> {{'animate.choice.module'|trans}}</button>
                        <button class="btn btn-outline-secondary btn-lg"id="btn_template" type="button">{{'animate.choice.template'|trans}}
                            <span class="glyphicon glyphicon-hand-left"></span></button>
                    </div>
                </div>                      
                <div id="module" class="row">
                    <div class="col">
                        <select class="form-select form-select-lg" id="animation-Module-source" name="animation-Module-source"></select>
                    </div>
                    <div class="col" >
                        <select class="form-select form-select-lg" id="animation-Module-cible" name="animation-Module-cible"></select>
                    </div>
                </div>
                <div id="template"></div>
                <div id="submodules"></div>              
                <div id="validation" align="center" text-align="center">
                    <button id="btn_validation" type="button" class="btn btn-success rule-create-submit"></button>
                </div>                                 
            </div>
        </div>
        <div class="animation-content animation-content-right">
            <div class="animation-content-right-toggle-btn"></div>
            <div id="animation-cright" class="carousel">
                <a class="prev">{{'animate.carousel.previous'|trans}}</a>
                <div class="window">
                    <ul class="clr">
                        <li><a class="fancybox_animation" data-fancybox-type="iframe" href="{{ path('regle_connector_create_out',{'type' : 'target' }) }}">
                            <span class="animation-addbtn">
                                <i class="fas fa-plus-circle"></i>
                            </span>
                            </a>
                        </li>
                        {# List of solutions that have at least one TARGET connector available #}
                        {% if target %}
                            {% for t in target %}
                            <li>
                                <img data-id="{{ t.getId }}" data-solution="{{ t.getName }}" class="animation-solution-cible gray" src="{{ asset('build/images/solution/' ~ t.getName ~ '.png' ) }}" alt="{{ t.getName }}" />
                            </li>
                            {% endfor %}
                        {% endif %} 
                    </ul>
                </div> <!-- .window -->
                <a class="next">{{'animate.carousel.next'|trans}}</a>
            </div> <!-- .carousel -->
        </div>
    </div>

    <script type="text/javascript">
        var path_new_solution = "{{ path('regle_connector_insert_solution') }}";
        var path_img = "{{ asset('build/images/regle/') }}";
        var path_connector_by_solution = "{{ path('regle_connector_by_solution') }}";
        var path_module = "{{ path('regle_list_module') }}"; 
        var path_rulename = "{{ path('regle_inputs_name_unique') }}"; 
        var path_template = "{{ path('regle_template') }}"; 
        var path_submodules = "{{ path('regle_submodules') }}";       
        var path_validation = "{{ path('regle_validation_animation') }}"; 
        var path_mapping = "{{ path('regle_stepthree') }}";  
        var path_listrule = "{{ path('regle_list') }}";
        var wait = "{{'animate.wait'|trans}}";
        var trans_btn_mapping = "{{'create_rule.step1.btn_mapping'|trans}}"
        var trans_btn_confirm = "{{'create_rule.step1.btn_confirm'|trans}}"
    </script>
{% endblock %}