<div class='main_block border_bottom'>
              <text style='margin-top: 10px;'>Nombre maximum de kits: {{ max_kit }}</text>
              <text style='margin-top: 10px;'>Composition:</text>
              <div class='row_block border_bottom'>
                <label style='width: 200px;'>Référence</label>
                <label class='border_left' style='width: 499px;'>Désignation</label>
                <label class='border_left' style='width: 99px;'>Quantité</label>
                <label class='border_left' style='width: 99px;'>Disponible</label>
                <label class='border_left' style='width: 99px;' style='cursor: default;'>Action</label>
              </div>
              {% set row_class = cycler('odd', 'even') %}
              {% for componant in kit_composition %}
              {% set qclass='' %}
              {% if componant.needed > componant.quantity %}
              {%  set qclass='red' %}
              {% endif %}
              <div class='row_block {{ row_class.next() }}'>
                <text style='width: 190px;'>{{ componant.reference }}</text>
                <text class='border_left' style='width: 489px;'>{{ componant.designation }}</text>
                <text class='num border_left {{ qclass }}' style='width: 89px;'>{{ componant.needed }}</text>
                <text class='num border_right border_left {{ qclass }}' style='width: 89px;'>{{ componant.quantity }}</text>
                <div class='action_bar_block border_left' style='width: 89px;'>
                  <input
                    type='image'
                    src='/static/images/edit.png'
                    title='Éditer'
                    onclick='javascript:edit_kit_composition({{ kit_id }}, {{ componant.id }});'/>
                  <input
                    type='image'
                    src='/static/images/trash.png'
                    title='Supprimer'
                    onclick='javascript:confirm_componant_remove("{{ componant.designation }}")?document.location="/kits/remove/{{ kit_id }}/{{ componant.id }}":false;'/>
                </div>
              </div>
              {% endfor %}
            </div>
            <div class='main_block'>
              <text style='margin-top: 10px;'>Ajouter un composant:</text>
              <div class='input_block'>
                <label>Référence</label>
                <input
                      id='reference'
                      type='text'
                      onkeyup='javascript:search_kit_componants_by_reference(this, {{ kit_id }});'
                      maxlength='20'
                      title='Référence interne unique (max. 20)'
                      placeholder='Référence interne unique (max. 20)'
                      value='{{ reference }}' />
              </div>
              <div class='input_block'>
                <label>Désignation</label>
                <input
                      id='designation'
                      type='text'
                      onkeyup='javascript:search_kit_componants_by_designation(this, {{ kit_id }});'
                      maxlength='50'
                      title='Désignation (max. 50)'
                      placeholder='Désignation (max. 50)'
                      value='{{ designation }}' />
              </div>
            </div>
            <!-- ----------------------------------------------------
            Resultat
            -----------------------------------------------------  -->
            <div id='result_container' class='main_block'>
            
            </div>