{% extends "base.html" %}
{% block title %}Redacta una nova noticia{% endblock %}
{% load staticfiles %}
{% block content %}

	<div class="maincontent">
			<script type="text/javascript" src="{% static "js/compose.js" %}"></script>
			<div id="leftbar">
				<h1>Redacta una nova noticia</h1>
				<script type="text/javascript" src="{% static "js/verifyCompose.js" %}"></script>
				<div class="compose">
					<form name="compose" method="post" action="/compose/" enctype="multipart/form-data" onsubmit="return validateCompose()">{% csrf_token %}
						<b style="float:right"><span>*</span> Camps obligatoris</b>
						<input type="text" name="autorNoticia" id="autorNoticia" style="display:none" value="{{ user.username }}">
						<label for="titol">Títol <span>*</span></label><br>
						<input type="text" name="titol" id="titol" onkeyup="composeTitol()">
						<label for="categoria">Categoria <span>*</span> <b>Pots seleccionar la categoria esborrany per no publicar encara la noticia</b></label><br>
						<select id="categoria" name="categoria" onChange="composeCategoria(this)">
							<option value="Cultura">Cultura</option>
							<option value="Economia">Economia</option>
							<option value="Esports">Esports</option>
							<option value="Politica">Política</option>
							<option value="Societat">Societat</option>
							<option value="Tecnologia">Tecnologia</option>
						</select>
						<label for="tags">Tags</label> <b>Afegeix paraules clau que complementin a la categoria (separades per comes)</b><br>
						<input type="text" name="tags" id="tags" onkeyup="composeTags()">
						<label for="localitzacio">Localització</label> <b>Lloc on ha passat aquesta noticia</b><br>
						<i id="geopointer" class="fa fa-map-marker geopointer" onclick="geopointer()"></i>
						<i id="geopointerNOT" class="geopointerNOT" onclick="geopointerNOT()"></i>
						<input type="text" name="localitzacio" id="localitzacio" onchange="composeLocalitzacio()" style="width:40%" readonly value="Fes clic a la icona de l'esquerra">
						<input type="hidden" name="geolatitud" id="geolatitud" value="0">
						<input type="hidden" name="geolongitud" id="geolongitud" value="0"><br>
						<label for="contingut">Contingut <span>*</span></label><br>
						<textarea rows="4" name="contingutmanual" id="contingutmanual" onkeyup="composeContingut()"></textarea>
						<textarea name="contingut" id="contingut" style="display:none"></textarea>
						<textarea name="medias" id="medias" style="display:none"></textarea>
						<div style="overflow:auto"><input type="submit" value="Enviar" /></div>
					</form>
				</div>
			</div>
			<div id="rightbar">
				<script type="text/javascript" src="{% static "js/jquery.knob.js" %}"></script>
				<script type="text/javascript" src="{% static "js/jquery.ui.widget.js" %}"></script>
				<script type="text/javascript" src="{% static "js/jquery.iframe-transport.js" %}"></script>
				<script type="text/javascript" src="{% static "js/jquery.fileupload.js" %}"></script>
				<script type="text/javascript" src="{% static "js/upload.js" %}"></script>
				<h1>Afegeix fotos i vídeos</h1>
				<form id="upload" method="post" action="/file/" enctype="multipart/form-data">
					<div id="drop">
						Arrossega aquí<br>
						<a>Buscar</a>
						<input type="file" name="upl" accept="video/mp4,video/x-m4v,video/*,image/*" multiple/>
					</div>
					<ul></ul>
				</form>
			</div>
		<h1>Previsualització</h1>
		<div id="leftbar-news">
			<div id="news-box">
				<span id="news-title">Títol</span>
				<span id="news-data">
					<span id="news-data-data"><i class="fa fa-calendar" title="Data"></i><b>{% now "j F Y" %} {% now "H:i O" %}</b></span>
					<span id="news-data-autor"><i class="fa fa-user" title="Autor"></i><b>{{ user.username }}</b></span>
					<span id="news-data-categoria"></span>
					<span id="news-data-comentaris"><i class="fa fa-comments" title="Comentaris"></i><b>0 comentaris</b></span>
					<span id="news-data-localitzacio"></span>
				</span>
				<hr>
				<div class="social-button-container">
					<div class="social-button">
						<div id="fb-root"></div><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div>
					</div>
					<div class="social-button">
						<a href="https://twitter.com/share" class="twitter-share-button" data-via="DavOrtegaLazaro" data-count="none">Tweet</a>
					</div>
					<div class="social-button">
						<div class="g-plus" data-action="share" data-annotation="none"></div>
					</div>
					<div class="social-button">
						<span id="tumblr_button_abc123"></span>
					</div>
					<div class="social-button">
						<a href="//es.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"  data-pin-color="red"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_20.png" /></a>
						<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
					</div>
				</div>
				<hr>
				<div id="news-text">Cos de la noticia.</div>
				<hr>
				<span id="news-tags"></span>
			</div>
		</div>
	</div>

<script>
var tumblr_button = document.createElement("a");
tumblr_button.setAttribute("href", "http://www.tumblr.com/share/link?url=" + encodeURIComponent(tumblr_link_url) + "&name=" + encodeURIComponent(tumblr_link_name) + "&description=" + encodeURIComponent(tumblr_link_description));
tumblr_button.setAttribute("title", "Comparteix");
tumblr_button.setAttribute("style", "display:inline-block; text-indent:-9999px; overflow:hidden; width:129px; height:20px; background:url('http://platform.tumblr.com/v1/share_3.png') top left no-repeat transparent;");
tumblr_button.innerHTML = "Comparteix";
document.getElementById("tumblr_button_abc123").appendChild(tumblr_button);
</script>

{% endblock %}