{% extends "djmicrosip_organizador\base.html" %}
{% block title %}Organizador de Articulos{% endblock %}

<!-- CSS Code -->
{% block style_css %}{% endblock %}

<!-- JavaScript Code -->
{% block js_code %}
{% include 'autocomplete_light/static.html' %}
<!-- <script src="{{STATIC_URL}}djmicrosip_organizador/js/jstree/jstree.js"></script>
<script src="{{STATIC_URL}}djmicrosip_organizador/js/jstree/jstree.checkbox.js"></script>
<script src="{{STATIC_URL}}djmicrosip_organizador/js/jstree/jstree.contextmenu.js"></script>
<script src="{{STATIC_URL}}djmicrosip_organizador/js/jstree/jstree.dnd.js"></script>
<script src="{{STATIC_URL}}djmicrosip_organizador/js/jstree/jstree.search.js"></script>
<script src="{{STATIC_URL}}djmicrosip_organizador/js/jstree/jstree.sort.js"></script>
<script src="{{STATIC_URL}}djmicrosip_organizador/js/jstree/jstree.state.js"></script>
<script src="{{STATIC_URL}}djmicrosip_organizador/js/jstree/jstree.types.js"></script>
<script src="{{STATIC_URL}}djmicrosip_organizador/js/jstree/jstree.unique.js"></script>
<script src="{{STATIC_URL}}djmicrosip_organizador/js/jstree/jstree.wholerow.js"></script> -->
<script src="{{STATIC_URL}}jstree/jstree.min.js"></script>
<script src="{{STATIC_URL}}djmicrosip_organizador/js/manage_tree.js"></script>
<script src="{{STATIC_URL}}djmicrosip_organizador/js/manage_tags.js"></script>
<script src="{{STATIC_URL}}djmicrosip_organizador/js/core.js"></script>
<link rel="stylesheet" href="{{STATIC_URL}}jstree/themes/default/style.min.css" />
<!-- <link rel="stylesheet" href="{{STATIC_URL}}djmicrosip_organizador/css/style.min.css" /> -->
{% endblock %}

{% block breadcrumb %}{{ block.super }}<li class='active'> Inicio</li> {% endblock %}
{% block content %}
<div class="row">
  <div class="col-md-3 col-xs-3 col-sm-3">
  <h1><strong>Organizador</strong></h1>
  </div>

  <div id="progress" class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
     
    </div>
  </div>


  <div class="col-lg-4">
    <div class="input-group">
      <div class="input-group-btn">
        <a href="#" id="show_tree" class="btn btn-default " data-toggle="modal" data-target="#moveTree_ModalId" ><i class="glyphicon glyphicon-folder-open"></i></a>
        <a href="#" id="show_tags" class="btn btn-default" data-toggle="modal" data-target=".tags-modal-sm" ><i class="glyphicon glyphicon-tags"></i></a>
      </div>
      <input type="text" class="form-control" id="id_tag_search" placeholder="Busca articulos aqui..."/>
      <div class="input-group-btn">
        <a href="#" class="btn btn-default" data-toggle="modal" data-target="#modal_opcionesBusquedaId" ><i class="glyphicon glyphicon-triangle-bottom"></i></a>
      </div>
    </div>
  </div>
</div>
<div id="demo1" class="col-md-3 col-xs-6 col-sm-6 demo1"></div>

<div class="col-md-9 col-xs-6 col-sm-6">
  <table class="table tableCell table-hover" id="articles_table">
  <thead>
  <tr>
    <th><input type="checkbox" name="articles_all" value=""></th>
    <th>Articulo</th>
    <th>Existencia</th>
    <th>Precio</th>
  </tr>
  </thead>
  <tbody>
      <tr></tr>
  </tbody>
  </table>
</div>
<br style="clear:both"/>
<div id="modal_opcionesBusquedaId" class="modal fade tags-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
          <h3>Opciones de busqueda</h3>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6 col-xs-6 col-sm-6">
              Busqueda anidada
            </div>
            <div class="col-md-6 col-xs-6 col-sm-6">
              <input type="checkbox" id="busquedaAnidadaId" value="">
            </div>
          </div>
           
          <br> 
          <br>
          <button type="button" class="btn btn-default" data-dismiss="modal">Aceptar</button>
        </div>
    </div>
  </div>
</div>

<div class="modal fade tags-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
          <h3>Selecciona una tag</h3>
        </div>
        <div class="modal-body">
          {{ form.tag }}
          <br> 
          <br>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
          <a href="#" id="agregar_tag_articulos" class="btn btn-default">Seleccionar</a>
        </div>
    </div>
  </div>
</div>

<div class="modal fade bs-example-modal-sm" id="moveTree_ModalId" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
          <h3>Selecciona una carpeta</h3>
        </div>
        <div class="modal-body">
          <div id="demo2" class="demo1"></div> 
          <div id="treeContainer"></div> 
          <br> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
          <a href="#" class="btn btn-default" id="enviar" data-dismiss="modal">Mover</a>
        </div>
    </div>
  </div>
</div>

{% endblock %}