{% extends "base.html" %}
{% block title %}{{ newsData.titol }}{% endblock %}
{% load staticfiles %}
{% block content %}

	<div class="maincontent">
		<script type="text/javascript" src="{% static "js/compose.js" %}"></script>
		<div>
			<div id="leftbar-news">
				<div id="news-box">
					<span id="news-title">{{ newsData.titol }}</span>
					<span id="news-data">
						<span id="news-data-data"><i class="fa fa-calendar" title="Data"></i><b>{{ newsData.data|date:"j F Y" }} {{ newsData.data|date:"H:i O" }}</b></span>
						<a href="/profile/{{ newsData.autor }}"><span id="news-data-autor"><i class="fa fa-user" title="Autor"></i><b>{{ newsData.autor }}</b></span></a>
						<a href="/news/{{ newsData.categoria }}"><span id="news-data-categoria"><i class="fa fa-quote-left" title="Categoria"></i><b>{{ newsData.categoria }}</b></span></a>
						<a href="#comments"><span id="news-data-comentaris"><i class="fa fa-comments" title="Comentaris"></i><b>{{ newsData.comentari_set.count }} comentaris</b></span></a>
						{% if newsData.geolatitud != 0 %}
						<span id="news-data-localitzacio"><i class="fa fa-map-marker" title="Localització"></i><b>{{ newsData.localitzacio }}</b></span>
						{% endif %}
						<span id="news-data-bigfont" style="float:right; cursor:pointer;"><i class="fa fa-search-plus" onclick="sizeL()"></i></span>
						<span id="news-data-smallfont" style="float:right; cursor:pointer;"><i class="fa fa-search-minus" onclick="sizeS()"></i></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">{{ newsData.contingut | safe }}</div>
					{% if newsData.tags != '' %}
					<hr>
					<span id="news-tags">{{ newsData.tags }}</span>
					<script>composeTagsRead();</script>
					{% endif %}
				</div>
			</div>
			<div id="rightbar-news">
				<div id="news-vote" class="compose">
					<span>Puntuació actual: <b>{{ newsData.puntuacio|floatformat:2 }} / 5.00</b></span><br>
					{% if user.is_authenticated %}
					<hr>
					<form name="vote" method="post" action="/vote/">{% csrf_token %}
					<div class="rating">
						<i class="fa fa-star" onmouseover="document.getElementById('punts').value = 5;" onclick="document.forms['vote'].submit();"></i>
						<i class="fa fa-star" onmouseover="document.getElementById('punts').value = 4;" onclick="document.forms['vote'].submit();"></i>
						<i class="fa fa-star" onmouseover="document.getElementById('punts').value = 3;" onclick="document.forms['vote'].submit();"></i>
						<i class="fa fa-star" onmouseover="document.getElementById('punts').value = 2;" onclick="document.forms['vote'].submit();"></i>
						<i class="fa fa-star" onmouseover="document.getElementById('punts').value = 1;" onclick="document.forms['vote'].submit();"></i>
					</div>
					<input hidden name="punts" id="punts" value="0">
					<input hidden type="text" name="noticia" id="noticia" value="{{ newsData.id }}">
					</form>
					{% endif %}
				</div>
				<br>
				{% if medias %}
				<div id="news-img">
					{% for file in medias %}
			    	{% if file.isvideo %}
					<a href="#img{{ forloop.counter }}"><div style="background-image: url('{% static "media/video.png" %}')"></div></a>
			    	{% else %}
					<a href="#img{{ forloop.counter }}"><div style="background-image: url('{{ file.file.url }}')"></div></a>
					{% endif %}
					{% endfor %}
				</div>
				{% for file in medias %}
			    <a href="#" class="overlayimg" id="img{{ forloop.counter }}"></a>
			    <div class="popupimg">
			    	{% if file.isvideo %}
			    	<video controls>
			    		<source src="{{ file.file.url }}">
					</video>
			    	{% else %}
			    	<img src="{{ file.file.url }}"/>
					{% endif %}
			    <br>{{ file.titol }}</div>
				{% endfor %}
				<br>
				{% endif %}
				{% if newsData.geolatitud != 0 %}
				<div id="map_canvas" class="minimap"></div>
				{% endif %}
			</div>
		</div>
		<div style="clear:both">
			<div id="leftbar">
				<h1 id="comments">Comentaris</h1>
				{% if comentaris %}
				{% for comment in comentaris %}
				{% if user == comment.autor %}
				<div class="comentari-group">
					{% if newsData.autor == comment.autor %}
					<div class="box box-self box-autor">
					{% else %}
					<div class="box box-self">
					{% endif %}
						<span>
							<a href="/profile/{{ comment.autor }}"><i class="fa fa-user" title="Autor"></i><b>{{ comment.autor }}</b></a>
							<i class="fa fa-calendar" title="Data"></i><b>{{ comment.data|date:"j F Y" }} {{ comment.data|date:"H:i O" }}</b>
							<b class="box-num">#{{ forloop.revcounter }}</b>
						</span>
						{{ comment.contingut }}
					</div>
					{% if comment.autor.userprofile.picture %}
					<a href="/profile/{{ comment.autor }}"><div class="img-self rnd50"  style="background-image: url('{{ comment.autor.userprofile.picture.url }}');"></div></a>
					{% else %}
					<a href="/profile/{{ comment.autor }}"><div class="img-self rnd100" style="background-image: url('{% static "media/user.png" %}');"></div></a>
					{% endif %}
					{% if newsData.autor == comment.autor %}
					<div class="arrow arrow-autor-self"></div>
					{% else %}
					<div class="arrow arrow-self"></div>
					{% endif %}
				</div>
				{% else %}
				<div class="comentari-group">
					{% if comment.autor.userprofile.picture %}
					<a href="/profile/{{ comment.autor }}"><div class="img rnd50"  style="background-image: url('{{ comment.autor.userprofile.picture.url }}');"></div></a>
					{% else %}
					<a href="/profile/{{ comment.autor }}"><div class="img rnd100" style="background-image: url('{% static "media/user.png" %}');"></div></a>
					{% endif %}
					{% if newsData.autor == comment.autor %}
					<div class="arrow-autor"></div>
					<div class="box box-autor">
					{% else %}
					<div class="arrow"></div>
					<div class="box">
					{% endif %}
						<span>
							<a href="/profile/{{ comment.autor }}"><i class="fa fa-user" title="Autor"></i><b>{{ comment.autor }}</b></a>
							<i class="fa fa-calendar" title="Data"></i><b>{{ comment.data|date:"j F Y" }} {{ comment.data|date:"H:i O" }}</b>
							<b class="box-num">#{{ forloop.revcounter }}</b>
						</span>
						{{ comment.contingut }}
					</div>
				</div>
				{% endif %}
				{% endfor %}
				{% else %}
				<span style="font-size:12px">No hi ha comentaris per mostrar<span>
				{% endif %}
			</div>
			{% if user.is_authenticated %}
			<div id="rightbar">
				<h1>Nou comentari</h1>
				<form name="compose" method="post" action="/comment/">{% csrf_token %}
				<div class="compose">
					<label for="contingut">Comentari</label><br>
					<textarea rows="4" name="contingut" id="contingut" onkeyup="composeContingut()"></textarea>
					<input type="text" name="noticia" id="noticia" style="display:none" value="{{ newsData.id }}">
					<div style="overflow:auto"><input type="submit" value="Enviar" /></div>
				</div>
				</form>
			</div>
			{% endif %}
		</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 %}