{% extends "index.html" %}
{% block title %}Liste des composants{% endblock %}
        {% block top_menu %}
        <span class='top_menu_item_selected' onclick='javascript:document.location="/componants/search";'>Rechercher un composant</span>
        <span class='top_menu_item' onclick='javascript:document.location="/componants/new";'>Nouveau composant</span>
        <span class='top_menu_item' onclick='javascript:document.location="/componants/in";'>Entrée de stock</span>
        <span class='top_menu_item' onclick='javascript:document.location="/componants/out";'>Sortie de stock</span>
        {% endblock %}
        
          {% block left_menu %}
          <div class='left_menu_item' onclick='javascript:document.location="/";'>
            Accueil
          </div>
          <div class='left_menu_item_selected' onclick='javascript:document.location="/componants";'>
            Composants
          </div>
          <div class='left_menu_item' onclick='javascript:document.location="/kits";'>
            Kits
          </div>
          <div class='left_menu_item' onclick='javascript:document.location="/providers";'>
            Fournisseurs
          </div>
          {% endblock %}

          {% block content %}
          <!-- ----------------------------------------------------
          Recherche
          -----------------------------------------------------  -->
          <h3>Recherche:</h3>
          <div class='block margin_bottom no_border'>
            <label class='editable'>Référence (unique)</label>
            <input
                  id='reference'
                  type='text'
                  class='editable'
                  onkeyup='javascript:search_componants_by_reference(this, "text");'
                  maxlength='20'
                  title='Référence interne unique (max. 20)'
                  placeholder='Référence interne unique (max. 20)'
                  value='{{ reference }}' />
          </div>
          <div class='block margin_bottom no_border'>
            <label class='editable'>Désignation</label>
            <input
                  id='designation'
                  type='text'
                  class='editable'
                  onkeyup='javascript:search_componants_by_designation(this, "text");'
                  maxlength='50'
                  title='Désignation (max. 50)'
                  placeholder='Désignation (max. 50)'
                  value='{{ designation }}' />
          </div>
          <div class='block margin_bottom no_border'>
            <label class='editable'>Emplacement</label>
            <input
                  id='place'
                  type='text'
                  class='editable'
                  onkeyup='javascript:search_componants_by_place(this, "text");'
                  maxlength='15'
                  title='Emplacement (max. 15)'
                  placeholder='Emplacement (max. 15)'
                  value='{{ place }}' />
          </div>
          <div class='block margin_bottom no_border'>
            <label  class='editable'>Fournisseur</label>
            <select
                    id='provider_id'
                    onchange='javascript:search_componants_by_provider(this, "numeric");'
                    title='Fournisseur'>
                <option value='0' selected>Tous</option>
              {% for prov in providers %}
                {% set selected = '' %}
                {% if prov.id == provider_id %}
                  {% set selected = 'selected' %}
                {% endif %}
                <option value='{{ prov.id }}' {{ selected }}>{{ prov.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class='block margin_bottom no_border center'>
            <text title='Rechercher' class='search' onclick='javascript:update_componants("reference");'></text>
          </div>
          <!-- ----------------------------------------------------
          Resultat
          -----------------------------------------------------  -->
          <div id='result_container' class='result_container'>
          
          </div>
          {% endblock %}