{% extends "index.html" %}
{% block bodyheader %}
<body onload="javascript:update_componants();">
{% endblock %}
{% block title %}Liste des composants{% endblock %}
        {% block top_menu %}
        <span class='top_menu_item_selected' onclick='javascript:document.location="/componants";'>Gestion des composants</span>
        <span class='top_menu_item' onclick='javascript:document.location="/orders/in";'>Entrée de stock</span>
        <span class='top_menu_item' onclick='javascript:document.location="/orders/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
          -----------------------------------------------------  -->
          <div id='search' class='main_block'>
            <text>Recherche:</text>
            <div class='input_block'>
              <label>Référence (unique)</label>
              <input
                    id='reference'
                    type='text'
                    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='input_block'>
              <label>Désignation</label>
              <input
                    id='designation'
                    type='text'
                    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='input_block'>
              <label>Emplacement</label>
              <input
                    id='place'
                    type='text'
                    onkeyup='javascript:search_componants_by_place(this, "text");'
                    maxlength='15'
                    title='Emplacement (max. 15)'
                    placeholder='Emplacement (max. 15)'
                    value='{{ place }}' />
            </div>
            <div class='input_block'>
              <label>Fournisseur</label>
              <select
                      id='provider_id'
                      onchange='javascript:search_componants_by_provider(this, "numeric");'
                      title='Fournisseur'>
                {% 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='button_block'>
              <input
                    type='image'
                    src='/static/images/search.png'
                    title='Rechercher'
                    onclick='javascript:update_componants("reference");'/>
              <input
                    type='image'
                    src='/static/images/save.png'
                    title='Enregistrer'
                    onclick='javascript:new_componant();'/>
            </div>
          </div>
          <!-- ----------------------------------------------------
          Resultat
          -----------------------------------------------------  -->
          <div id='result_container' class='main_block'>
          
          </div>
          {% endblock %}