{% extends estXHR is defined and estXHR ? 'page-xhr.html.twig' : 'page.html.twig' %}

{% block title %}Composants{% endblock %}

{% block style %}
    <link rel="stylesheet" type="text/css" is="custom-style"
          href="{{ app.request.getBaseURL() }}/assets/css/composants/show.css">
{% endblock %}

{% block page %}
    <div class="container-entete">
        <div class="badge badge-{{ composant.statut }}">{{ statuts[composant.statut] }}</div>
        <div id="action_btn">
            {% if is_granted('ROLE_PUSH') and estDeployable %}
                <paper-button
                        id="btn-deploy"
                        onclick="xhrComponent.open('{{ path('composants_deployer_confirmation', {'id': composant.id}) }}', 'edit-composant')">
                    <iron-icon icon="icons:content-copy"></iron-icon>
                    Deployer
                </paper-button>
            {% endif %}
            <paper-button
                    id="btn-dupliquer"
                    onclick="xhrComponent.open('{{ path('composants_dupliquer', {'id': composant.id}) }}', 'edit-composant')">
                <iron-icon icon="icons:content-copy"></iron-icon>
                Dupliquer
            </paper-button>
            <paper-button
                    id="btn-edit"
                    onclick="xhrComponent.open('{{ path('composants_edit', {'id': composant.id}) }}', 'edit-composant')">
                <iron-icon icon="editor:mode-edit"></iron-icon>
                Modifier
            </paper-button>
        </div>
    </div>
    <div id="composant" class="flex">
        <h5>Informations</h5>
        <div class="layout vertical">
            <div class="flex">
                <div class="layout horizontal">
                    <div class="flex label">Réference</div>
                    <div class="flex value">{{ composant.code }}</div>
                    <div class="flex label">Libellé</div>
                    <div class="flex value">{{ composant.nom }}</div>
                </div>
            </div>
            <div class="flex">
                <div class="layout horizontal">
                    <div class="flex label">Description</div>
                    <div class="flex-3 value">{{ composant.description }}</div>
                </div>
            </div>
            <div class="flex">
                <div class="layout horizontal">
                    <div class="flex label">Date début validité</div>
                    <div class="flex value">{{ composant.dateValiditeDebut ? composant.dateValiditeDebut | date('d/m/Y') : '-' }}</div>
                    <div class="flex label">Date fin validité</div>
                    <div class="flex value">{{ composant.dateValiditeFin ? composant.dateValiditeFin | date('d/m/Y') : '-' }}</div>
                </div>
            </div>
            <div class="flex">
                <div class="layout horizontal">
                    <div class="flex label">Frais annexes</div>
                    <div class="flex-3 value">{% if composant.fraisFixes != null %}{{ composant.fraisFixes }} €{% endif %}</div>
                </div>
            </div>
            <div class="flex">
                <div class="layout horizontal">
                    <div class="flex label">Taux taxe</div>
                    <div class="flex value">{% if composant.tauxTaxe != null %}{{ composant.tauxTaxe }} %{% endif %}</div>
                    <div class="flex label">Taux d'assiette taxable</div>
                    <div class="flex value">{% if composant.tauxAssietteTaxable != null %}{{ composant.tauxAssietteTaxable }} %{% endif %}</div>
                </div>
            </div>
            <div class="flex">
                <div class="layout horizontal">
                    <div class="flex label">Commentaires</div>
                    <div class="flex-3 value">{{ composant.commentaires }}</div>
                </div>
            </div>
            {% if composant.idTypeComposant.peutAvoirFormat %}
                <div class="flex">
                    <div class="layout horizontal">
                        <div class="flex label">Format de résultat</div>
                        <div class="flex value">{{ composant.formatResultat ? composant.formatResultat.getLibelle : '' }}</div>
                    </div>
                    <div class="layout horizontal">
                        <div class="flex label">Format de résultat pour Webservice</div>
                        <div class="flex value">{{ composant.formatResultatWs ? composant.formatResultatWs.getLibelle : '' }}</div>
                    </div>
                </div>
            {% endif %}
            <div class="flex">
                <div class="layout horizontal">
                    <div class="flex-3 label">Sélection multiple (composants enfants)</div>
                    <div class="flex value">{{ composant.childSelectionMultiple ? 'Oui' : 'Non' }}</div>
                </div>
            </div>
            <div class="flex">
                <div class="layout horizontal">
                    <div class="flex-3 label">Sélection obligatoire (composants enfants)</div>
                    <div class="flex value">{{ composant.childSelectionRequired ? 'Oui' : 'Non' }}</div>
                </div>
            </div>
            <div class="flex">
                <div class="layout horizontal">
                    <div class="flex-3 label">Sélection facultative (composants enfants)</div>
                    <div class="flex value">{{ composant.childSelectionOptional ? 'Oui' : 'Non' }}</div>
                </div>
            </div>
        </div>
    </div>
    <div id="criteres_variables" class="flex">
        <div class="layout horizontal">
            <div id="criteres" class="flex">
                <h5>Critères</h5>
                {% if criteres | length == 0 %}
                    <div class="subhead-1 none">Aucun critère</div>
                {% endif %}
                {% for critere in criteres %}
                    {% if critere.active == 1 %}
                        <paper-item>
                            <span class="caption">{{ critere.code }} - {{ critere.libelle }}</span>
                            <span>{% if critere.idType != null %}({{ critere.idType.libelle }}){% endif %}</span>
                            <span>{% if criteresvaleursDefaultByCritereId[critere.id] is defined %} - Défaut : {{ criteresvaleursDefaultByCritereId[critere.id] }}{% endif %}</span>
                        </paper-item>
                    {% endif %}
                {% endfor %}
            </div>
            <div id="variables" class="flex">
                <h5>Variables</h5>
                {% if variables | length == 0 %}
                    <div class="subhead-1 none">Aucune variable</div>
                {% endif %}
                {% for variable in variables %}
                    <paper-item>
                        <span class="caption">{{ variable.code }} - {{ variable.libelle }}</span>
                        <span>{% if variable.idType != null %}({{ variable.idType.libelle }}){% endif %}</span>
                        <span>{% if variable.valeurDefaut %} - Défaut : {{ variable.valeurDefaut }}{% endif %}</span>
                    </paper-item>
                {% endfor %}
            </div>
        </div>
    </div>
    <div id="formule" class="flex">
        <h5>Formule</h5>
        <div class="layout horizontal center justified">
            {% if composant.idFormule %}
                <paper-item class="flex">
                    <span class="subhead-1">{{ composant.idFormule.libelle }}</span>
                    <p>{{ composant.idFormule.description }}</p>
                    <div class="actions">

                        <a href="{{ path('formules_edit', {'id': composant.idFormule.id}) }}">
                            <paper-button id="btn-formule-edit">
                                <iron-icon icon="icons:create"></iron-icon>
                                Modifier
                            </paper-button>
                        </a>
                        <paper-button
                                id="btn-formule-delete"
                                onclick="xhrComponent.open('{{ path('composants_formule', {'id': composant.id}) }}', 'show-composant', 'delete')">
                            <iron-icon icon="icons:remove"></iron-icon>
                            Dissocier
                        </paper-button>
                    </div>
                </paper-item>
            {% else %}
                <div class="flex-3">
                    {% set values = [] %}
                    {% for formule in formules %}
                        {% set values = values | merge([{'label': formule.libelle, 'value': formule.id}]) %}
                    {% endfor %}
                    <mgc-select-input
                            name="listeFormules"
                            position="top"
                            values="{{ values | json_encode }}"
                            label="Associer une formule existante">
                    </mgc-select-input>
                </div>
                <div class="flex-1 center">
                    <paper-icon-button
                            icon="icons:save"
                            onclick="this.closest('#formule').querySelector('[name=listeFormules]').value ? xhrComponent.open('{{ path('composants_formule', {'id': composant.id}) }}', 'show-composant', 'post', {idFormule: this.closest('#formule').querySelector('[name=listeFormules]').value}) : false">
                    </paper-icon-button>
                </div>
                {% if is_granted('ROLE_FORMULE') %}
                    <div class="flex-2 right">
                        <paper-button
                                id="btn-formule-new"
                                onclick="xhrModal.open('{{ path('formules_new', {'idComposant': composant.id}) }}', 'new-formule')">
                            <iron-icon icon="icons:add"></iron-icon>
                            Nouvelle formule
                        </paper-button>
                    </div>
                {% endif %}
            {% endif %}
        </div>
    </div>
{% endblock %}