{% extends "django_microsip_catalogoarticulos\base.html" %}
{% block title %}Articulo{% endblock %}

<!-- CSS Code -->
{% block style_css %}
<style type="text/css">
	.tag1{
		float: left;
		background-color: gray;
		border-radius: 5px;
		margin: 5px;
		padding: 3px;
		
	}
	
	.borrar{
		width: 18px;
		height: 18px;
		margin:2px;
		padding:2px;
		border-radius:9px;
	}
	.borrar:hover{
		background-color: red;
		color:white;
		cursor:pointer;
	}
	
</style>
{% endblock %}

<!-- JavaScript Code -->
{% block js_code %}
{% include 'autocomplete_light/static.html' %}
<script src="{{STATIC_URL}}js/django_microsip_catalogoarticulos/tags.js"></script>
{% endblock %}

{% block breadcrumb %}{{ block.super }} {{ app_name }} <i class="glyphicon glyphicon-play"></i> {% endblock %}
{% block content %}
BIENVENIDO!
<form method="post" class="form-horizontal" action="" width="300px"  enctype='multipart/form-data'>{% csrf_token %}
	{{ form.errors }}
	<div class="page-header">
		<h1>Articulo  <small>{{ Articulo.nombre }} </small> <button type="submit" class="btn"><i class="glyphicon glyphicon-download-alt"></i> Guardar</button>  </h1>
	</div>
	<!-- Nav tabs -->
	<ul class="nav nav-tabs" role="tablist">
		<li class="active"><a href="#home" role="tab" data-toggle="tab">General</a>
	</ul>
	<!-- Tab panes -->
	<div class="tab-content">
		<div class="tab-pane active" id="home">
			<div id='datos_puntos' class="row">
				<input type="hidden" value="{{Articulo.id}}" id="id_art"/>
				<div class="col-md-6 col-xs-2 col-sm-4">
					<div id="div_puntos">
						<label>Nombre</label>
						<div class="input-prepend input-append">{{ form.nombre }}</div>
					</div>
				</div>
				<div class="col-md-6 col-xs-4 col-sm-4">
					<label>Imagen</label>
					<div class="input-prepend input-append">{{ form.imagen }}</div>
				</div>
				<div class="col-md-6 col-xs-4 col-sm-4">
					<label>Descripcion</label>
					<div class="input-prepend input-append">{{ form.nota_ventas }}</div>
				</div>
				<div class="col-md-6 col-xs-4 col-sm-4">
					<div class="input-group">
					  <span class="input-group-addon" >Tags</span>
					  {{tag_search_form.tag}}<a href="#" id="agregar_tag_articulo" class="btn btn-default">Agregar</a>
					</div>					
				</div>	<br>
				<div class="col-md-6 col-xs-4 col-sm-4 tags">
					{% for tag in tags %}
					<div class="tag1">
						<span style="color:white;">{{tag.tag}}</span>
						<i class="glyphicon glyphicon-remove borrar" ></i>
						<input type="hidden" value="{{tag.id}}" class="hidden_tag"/>					
					</div>
					{% endfor %}					
				</div>							
			</div>
		</div>
		
	</div>
</form>
{% endblock %}