{% extends "index.html" %}
{% block title %}Liste des composants{% endblock %}
        {% block top_menu %}
        <span class='top_menu_item' onclick='javascript:document.location="/componants/new";'>Nouveau composant</span>
        <span class='top_menu_item' onclick='javascript:document.location="/componants/search";'>Rechercher un 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'
                  onchange='javascript:search_componant(this, "text");'
                  maxlength='20'
                  title='Référence interne unique (max. 20)'
                  placeholder='Référence interne unique (max. 20)'
                  value='' />
          </div>
          <div class='block margin_bottom no_border'>
            <label class='editable'>Désignation</label>
            <input
                  id='designation'
                  type='text'
                  class='editable'
                  onchange='javascript:search_componant(this, "text");'
                  maxlength='50'
                  title='Désignation (max. 50)'
                  placeholder='Désignation (max. 50)'
                  value='' />
          </div>
          <div class='block margin_bottom no_border'>
            <label class='editable'>Emplacement</label>
            <input
                  id='place'
                  type='text'
                  class='editable'
                  onchange='javascript:search_componant(this, "text");'
                  maxlength='15'
                  title='Emplacement (max. 15)'
                  placeholder='Emplacement (max. 15)'
                  value='' />
          </div>
          <div class='block margin_bottom no_border'>
            <label  class='editable'>Fournisseur</label>
            <select
                    id='provider_id'
                    onchange='javascript:search_componant(this, "numeric");'
                    title='Fournisseur'>
                <option value='0' selected>Tous</option>
              {% for prov in providers %}
                <option value='prov.id'>{{ prov.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class='block margin_bottom no_border center'>
            <text title='Rechercher' class='search' onclick='javascript:search_componant();'></text>
          </div>
          <!-- ----------------------------------------------------
          Resultat
          -----------------------------------------------------  -->
          <h3>Résultat</h3>
          <div class='block' style='border-top-style: none;'>
            <label onclick='document.location="/componants?offset={{ offset }}&s=reference&o={{ norder }}";'>Référence</label>
            <label onclick='document.location="/componants?offset={{ offset }}&s=designation&o={{ norder }}";' class='border_left' style='width: 440px;'>Désignation</label>
            <label onclick='document.location="/componants?offset={{ offset }}&s=quantity&o={{ norder }}";' class='border_left' style='width: 100px;'>Quantité</label>
            <label onclick='document.location="/componants?offset={{ offset }}&s=place&o={{ norder }}";' class='border_right border_left' style='width: 160px;'>Emplacement</label>
            <label style='width: 95px; cursor: default;'>Action</label>
          </div>
          {% set row_class = cycler('odd', 'even') %}
          {% for componant in componants %}
          <div class='block {{ row_class.next() }}'>
            <text style='width: 192px;'>{{ componant.reference }}</text>
            <text class='border_left' style='width: 432px;'>{{ componant.designation }}</text>
            <text class='num border_left' style='width: 92px;'>{{ componant.quantity }}</text>
            <text class='num border_right border_left' style='width: 152px;'>{{ componant.place }}</text>
            <div class='inner' style='width: 95px;'>
              <text class='edit' title='Éditer' onclick='javascript:document.location="/componants/{{ componant.id }}"'></text>
              <text class='trash' title='Supprimer' onclick='javascript:confirm_delete()?document.location="/componants/delete/{{ componant.id }}":false;'></text>
            </div>
          </div>
          {% endfor %}
          <div class='pages_nav_bar'>
            <text><span class='prev_page' onclick='javascript:document.location="/componants?offset={{ prevhop }}&s={{ sort }}&o={{ order }}"'><</span></text>
            <text><span class='page_num'>{{ page }} / {{ page_count }}</span></text>
            <text><span class='next_page' onclick='javascript:document.location="/componants?offset={{ nexthop }}&s={{ sort }}&o={{ order }}"'>></span></text>
          </div>
          {% endblock %}