{% extends "index.html" %}
{% block title %}Éditer un composant{% 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_selected' onclick='javascript:document.location="/componants/search";'>Éditer 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 %}
          <h3>Note:</h3>
          <p>Cette page vous permet de modifier directement un composant.</p>
          <p>À moins de vouloir corriger une erreur de saisie, ou de saisir un inventaire vous ne devez
          <strong>PAS</strong> modifier directement
          les quantités d'un composant.</p>
          <p>Cliquez sur les liens suivants pour saisir des <a href='/componant/in/{{ componant.id }}'>entrées</a>
          ou <a href='/componant/out/{{ componant.id }}'>sorties</a> de stock.</p>
          <h3>Composant:</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:update_componant(this, {{ componant.id }}, "text");'
                  maxlength='20'
                  title='Référence interne unique (max. 20)'
                  placeholder='Référence interne unique (max. 20)'
                  value='{{ componant.reference }}' />
          </div>
          <div class='block margin_bottom no_border'>
            <label class='editable'>Désignation</label>
            <input
                  id='designation'
                  type='text'
                  class='editable'
                  onchange='javascript:update_componant(this, {{ componant.id }}, "text");'
                  maxlength='50'
                  title='Désignation (max. 50)'
                  placeholder='Désignation (max. 50)'
                  value='{{ componant.designation }}' />
          </div>
          <div class='block margin_bottom no_border'>
            <label class='editable'>Dernier prix d'achat</label>
            <input
                  id='last_price'
                  type='text'
                  class='editable'
                  onchange='javascript:update_componant(this, {{ componant.id }}, "numeric");'
                  maxlength='15'
                  title="Dernier prix d'achat"
                  placeholder="Dernier prix d'achat"
                  value='{{ componant.last_price }}' />
          </div>
          <div class='block margin_bottom no_border'>
            <label class='editable'>Coût d'achat moyen pondéré</label>
            <input
                  id='mean_price'
                  type='text'
                  class='editable'
                  maxlength='15'
                  title='CMP (non éditable)'
                  readonly value='{{ componant.mean_price }}' />
          </div>
          <div class='block margin_bottom no_border'>
            <label class='editable'>Quantité</label>
            <input
                  id='quantity'
                  type='text'
                  class='editable'
                  onchange='javascript:update_componant(this, {{ componant.id }}, "numeric");'
                  maxlength='15'
                  title='Quantité'
                  placeholder='Quantité'
                  value='{{ componant.quantity }}' />
          </div>
          <div class='block margin_bottom no_border'>
            <label class='editable'>Quantité minimum</label>
            <input
                  id='min_quantity'
                  type='text'
                  class='editable'
                  onchange='javascript:update_componant(this, {{ componant.id }}, "numeric");'
                  maxlength='15'
                  title='Quantité minimum'
                  placeholder='Quantité minimum'
                  value='{{ componant.min_quantity }}' />
          </div>
          <div class='block margin_bottom no_border'>
            <label class='editable'>Emplacement</label>
            <input
                  id='place'
                  type='text'
                  class='editable'
                  onchange='javascript:update_componant(this, {{ componant.id }}, "text");'
                  maxlength='15'
                  title='Emplacement (max. 15)'
                  placeholder='Emplacement (max. 15)'
                  value='{{ componant.place }}' />
          </div>
          <div class='block margin_bottom no_border'>
            <label  class='editable'>Fournisseur</label>
            <select
                    id='provider_id'
                    onchange='javascript:update_componant(this, {{ componant.id }}, "numeric");'
                    title='Fournisseur'>
              {% for prov in providers %}
                {% set option_selected = '' %}
                {% if prov.id == provider.id %}
                {%   set option_selected = 'selected="selected"' %}
                {% endif %}
                <option {{ option_selected }} value='prov.id'>{{ prov.name }}</option>
              {% endfor %}
            </select>
          </div>
          {% endblock %}