{% extends "base.html" %}
{% block title %}{{ profileData.username }}{% endblock %}
{% load staticfiles %}
{% block content %}

	<div id="bannerUser">
		<div class="maincontent">
			{% if profileDataProfile.picture %}
			<a href="#imgprofile"><div class="img rnd100" style="background-image: url('{{ profileDataProfile.picture.url }}');"></div></a>
			{% else %}
			<a href="#imgprofile"><div class="img rnd100" style="background-image: url('{% static "media/user.png" %}');"></div></a>
			{% endif %}
			<div class="userdata">
				<i class="fa fa-camera"></i>Fotos<br>{{ profileDataProfile.num_fotos }}
			</div>
			<div class="userdata">
				<i class="fa fa-video-camera"></i>Vídeos<br>{{ profileDataProfile.num_videos }}
			</div>
			<div class="userdata">
				<i class="fa fa-comments"></i>Comentaris<br>{{ profileDataProfile.num_comentaris }}
			</div>
			<div class="userdata">
				<i class="fa fa-pencil"></i>Notícies<br>{{ profileDataProfile.num_noticies }}
			</div>
			<span class="name">{{ profileData.username }}</span>
			<span class="realname">{{ profileData.first_name }} {{ profileData.last_name }}</span>
		</div>
	</div>
	<a href="#" class="overlayimg" id="imgprofile"></a>
	{% if profileDataProfile.picture %}
	<div class="popupimg"><a href="#i"><img src="{{ profileDataProfile.picture.url }}" class="imgprofilebig"></a></div>
	{% else %}
	<div class="popupimg"><a href="#i"><img src="{% static "media/user.png" %}" class="imgprofilebig"></a></div>
	{% endif %}
	<div class="maincontent">
		<div id="leftbar">
			<div id="news">
				{% if noticies %}
				{% for noticia in noticies %}
				<div class="card">
					<a class="title" href="/read/{{ noticia.id }}">{{ noticia.titol }}</a>
					{% if noticia.media.all|length == 0 %}
					<div class="img" style="background-image: url('{% static "media/news.png" %}')"></div>
					{% elif noticia.media.all.0.isvideo %}
					<div class="img" style="background-image: url('{% static "media/video.png" %}')"></div>
					{% else %}
					<div class="img" style="background-image: url('{{ noticia.media.all.0.file.url }}')"></div>
					{% endif %}
						<span>
							<i class="fa fa-calendar" title="Data"></i><b>{{ noticia.data|date:"j F Y" }} {{ noticia.data|date:"H:i O" }}</b>
							<a href="/profile/{{ noticia.autor }}"><i class="fa fa-user" title="Autor"></i><b>{{ noticia.autor }}</b></a>
							<a href="/news/{{ noticia.categoria }}"><i class="fa fa-quote-left" title="Categoria"></i><b>{{ noticia.categoria }}</b></a>
							<a href="/read/{{ noticia.id }}/#comments"><i class="fa fa-comments" title="Comentaris"></i><b>{{ noticia.comentari_set.count }} comentaris</b></a>
							{% if noticia.geolatitud != 0 %}
							<i class="fa fa-map-marker" title="Localització"></i><b>{{ noticia.localitzacio }}</b>
							{% endif %}
						</span>
					<div class="text">{{ noticia.contingut | safe }}</div>
				</div>
				{% endfor %}
				{% else %}
				<span style="font-size:12px">No hi ha notícies per mostrar<span>
				{% endif %}
			</div>
		</div>
	    <a href="#" class="overlay" id="popup"></a>
	    <div class="popup compose" width="500px">
			<form name="compose" method="post" action="/editprofile/" enctype="multipart/form-data">{% csrf_token %}
				<input type="text" name="autorNoticia" id="autorNoticia" style="display:none" value="{{ user.username }}">
				<label for="titol">Nom</label><br>
				<input type="text" name="fname" id="fname" value="{{ profileData.first_name }}">
				<label for="titol">Cognom</label><br>
				<input type="text" name="lname" id="fname" value="{{ profileData.last_name }}">
				<label for="titol">Email</label><br>
				<input type="email" name="email" id="email" value="{{ profileData.email }}">
				<label for="contingut">Biografia</label><br>
				<textarea rows="3" name="biografia" id="biografia"></textarea>
				<label for="titol">Pàgina web</label><br>
				<input type="text" name="website" id="website" value="{{ profileDataProfile.website }}">
				<label for="titol">Localització</label><br>
				<input type="text" name="localitzacio" id="localitzacio" value="{{ profileDataProfile.localitzacio }}">
				<div style="overflow:auto"><input type="submit" value="Enviar" /></div>
			</form>
			<div style="padding-bottom:5px">
				<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>
				<label for="file">Foto de perfil</label><br><br>
				<form id="upload" method="post" action="/fileProfile/" enctype="multipart/form-data">
					<div id="drop">
						Arrossega aquí<br>
						<a>Buscar</a>
						<input type="file" name="upl" accept="image/*" multiple/>
					</div>
					<ul></ul>
				</form>
			</div>
	    	<a class="close" href="#"><i class="fa fa-times"></i></a>
	    </div>
		<div id="rightbar">
			<div class="userinfobasic">
				<span class="userdesc">{{ profileDataProfile.biografia }}</span>
				<span><i class="fa fa-link"></i> <a href="{{ profileDataProfile.website }}">{{ profileDataProfile.website }}</a></span>
				<span><i class="fa fa-globe"></i> {{ profileDataProfile.localitzacio }}</span>
				<span><i class="fa fa-calendar"></i> Registrat el {{ profileData.date_joined|date:"j F Y" }}</span>
				{% if profileData.id == user.id %}
				<span style="text-align:right"><a class="link editprofile" href="#popup" data-effect="mfp-zoom-out">ACTUALITZAR EL PERFIL</a></span>
				{% endif %}
			</div>
			<br>
			{% if medias %}
			<div id="multimedia" class="usermultimeda">
				{% 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 }}">
				<br><a href="/read/{{ file.noticia_set.all.0.id }}">{{ file.noticia_set.all.0.titol }}</a>
				</video>
		    	{% else %}
		    	<img src="{{ file.file.url }}"/>
				<br><a href="/read/{{ file.noticia_set.all.0.id }}">{{ file.noticia_set.all.0.titol }}</a>
				{% endif %}
		    <br>{{ file.titol }}</div>
			{% endfor %}
			<br>
			{% endif %}
			<div id="map_canvas" class="minimap"></div>
		</div>
	</div>

{% endblock %}