home.html

{% extends 'base.html' %}

{% load staticfiles %}
{% load static %}

{% load assign_tag %}

{% block stylesheet %}<!-- opcion de estilo -->
<style>
	.business-header {
	  height: 50vh;
	  min-height: 300px;
	  background: url('{% static 'img/home.jpg' %}') center center no-repeat scroll;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  background-size: cover;
	  -o-background-size: cover;
	}
</style>
{% endblock %}

{% block breadcrumb %}
  <li class="breadcrumb-item active">Inicio</li>
{% endblock %}

{% block content %}

    <!-- Header with Background Image -->
    <header class="business-header">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <h1 class="display-3 text-center text-white mt-4">
            	<a href="{% url 'eventFilter' type='all' %}" class="btn btn-primary btn-lg">¿Buscas un plan?</a>
            </h1>
          </div>
        </div>
      </div>
    </header>

	{% if events %}
	     <div class="card text-white bg-secondary my-4 text-center">
	        <div class="card-body">
	          <h1 class="text-white m-0">Eventos que quizá te puedan interesar</h1>
	        </div>
      	</div>
		<ul>
		{% assign count 0 %}<!-- creamos un contador para controlar la extension de la fila -->
		{% for event in events %}
			{% ifequal count 0 %}    
					<div class="row">
			{% endifequal %}
    	        	<div class="col-lg-6 col-md-8 mb-8">
						<div class="panel panel-default">
							<div class="panel-body text-center">
								<h2>{{ event.title }}</h2>
							</div>
							<img style="width: 100%" class="card-img-top" src="
						        {% if event.photo_set.all %}
						        	{{event.photo_set.all.0.picture.url}}
						        {% else %}
						        	https://placehold.it/400x260?text=IMAGE
						        {% endif %}
							" alt="">
							<div class="panel-footer">
								<p class="card-text">{{event.summary}}</p>
								<a href="/event/{{ event.pk }}" class="btn btn-primary">Detalles</a>
							</div>
						</div>
			        </div>
			{% ifequal count 1 %}
				</div>
				{% assign count 0 %}<!-- reseteamos contador -->
			{% else %}
				{% increment count %}<!-- count++ -->
			{% endifequal %}
		
		{% endfor %}
		</ul>
		<hr>
	{% else %}
	  	<div class="alert alert-warning">
    		<h1>No tienes aún nada planeado. <a href="{% url 'eventFilter' type='all' %}"><strong>¡A que estás esperando!</strong><a></h1>
  		</div>
		
	{% endif %}







{% endblock %}