{% load thumbnail %}
{% load pin_tags %}

<form method="post" action="{% url pin-item-edit post.id%}" data-async class="form-horizontal" action="" id="pin_form-edit" >
{% csrf_token%}
	
      	{{ form.errors}}
        
		
		{% thumbnail post.image "110" upscale=False as im %}
		<div class="img-block" style="float:left;">
			<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
		</div>
		{% endthumbnail %}
		<input type="hidden" value="{{post.image}}" id="image_field" name="image" />
			<textarea id="id_text" rows="5" cols="40" name="text">{{form.text.value}}</textarea><br><br>
		

			<div id="cat-select-div">
				<select name="category" id="cat-select">
					<option value="0">بدون دسته</option>
					{% user_cats%}
					{% for cat in user_category %}
					<option {% if post.category.id == cat.id %}selected="selected"{% endif%} value="{{cat.id}}">{{cat.name}}</option>
					{% endfor %}
					
				</select>
				<a href="#" id="cat-add-btn" class="btn"><i class="icon-plus"></i></a>
			</div>
			<div id="cat-new-div" style="display:none;">
				<input type="text" placeholder="عنوان دسته بندی" id="cat-new-input" />
				<a href="#" class="btn" id="cat-new-btn"><i class="icon-ok"></i></a>
			</div><br><br>
	
<script type="text/javascript">
$('#pin_form-edit #cat-add-btn').click(function(){
	$("#pin_form-edit #cat-select-div").hide();
	$("#pin_form-edit #cat-new-div").show();
	return false;
});

$("#pin_form-edit #cat-new-btn").click(function(){
	var catName = $("#pin_form-edit #cat-new-input").val();
    if(catName == ''){
        return false;
    }
	$("#pin_form-edit #cat-select").append('<option selected="selected" value="newcat-' + catName + '">' + catName + '</option>');
	$("#pin_form-edit #cat-select-div").show();
	$("#pin_form-edit #cat-new-div").hide();
	return false;
});
</script>
		
			<input type="text" name="url" value="{{form.url.value}}" placeholder="URL" class="span3 ltr">
	        <br><br>
	        <p class="text-info">برچسب ها را با enter از یکدیگر جدا کنید</p>
	        <textarea id="textareaEdit" name="tags" rows="1"></textarea>
<div class="form-actions">
	<input type="submit" class="btn btn-primary" value="ذخیره" />
</div>
</form>
<script type="text/javascript">
$('#textareaEdit').textext({ plugins: 'tags',
	tagsItems: [{% for tag in post.tags.all %} '{{tag.name}}', {% endfor%}] });


</script>