{% extends 'base.html' %}

{% load static %}

{% block menuapp %}

{% endblock menuapp %}

{% block content %}
		    <div class="container-xl">
				<div class="row g-3 mb-4 align-items-center justify-content-between">
					<div class="col-auto">
						{% if messages %}
							<ul class="messages">
								{% for message in messages %}
								    <div class="alert {% if message.tags %}alert-{{ message.tags }}{% else %}alert-info{% endif %} alert-dismissible fade show" role="alert">
					                    {{ message }}
                    					<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                					</div>
								{% endfor %}
							</ul>
						{% endif %}
					</div>
				</div>

				<div class="row g-3 mb-4 align-items-center justify-content-between">
				    <div class="col-auto">
			            <h1 class="app-page-title mb-0">Eventos disponibles</h1>
				    </div>
			    </div><!--//row-->	

				<div class="row g-4"> 
					{% if eventos_con_reserva %}

						{% for evento in eventos_con_reserva %}
						<div class="col-6 col-md-4 col-xl-3 col-xxl-2">
							<div class="app-card app-card-doc shadow-sm h-100"> 
								<div class="app-card-thumb-holder p-3">
									<div class="app-card-thumb">
                                        {% if evento.url_imagen %}
                                           <img src="https://lh3.googleusercontent.com/d/{{ evento.url_imagen }}" alt="Imagen de {{ evento.nombre }}" width="205px" height="153px">
                                        {% else %}
											{% if evento.para_parejas %}
												<img class="thumb-image" src="{% static 'images/parejas.png' %}" alt="">
											{% else %}
											   <img class="thumb-image" src="{% static 'images/padel-court.jpg' %}" alt="">
				                            {% endif %}
                                        {% endif %}
									</div>
									<a class="app-card-link-mask" href="{% url 'eventos:detalle_evento' evento.id %}"></a>
								 </div>			  
								<div class="app-card-body p-3 has-card-actions">
									{% if evento.evento.publicado %}
										<h4 class="app-doc-title truncate mb-0"><a href="{% url 'eventos:detalle_evento' evento.id %}">{{ evento.nombre }}</a></h4>
									{% else %}
										<h4 class="app-doc-title truncate mb-0"><a href="{% url 'eventos:detalle_evento' evento.id %}">{{ evento.nombre }} (NO PUBLICADO)</a></h4>
									{% endif %}

									<div class="app-doc-meta">
										<ul class="list-unstyled mb-0">
											<li><span class="text-muted">Fecha:</span> {{ evento.fecha }}</li>             
											<li><span class="text-muted">Hora:</span> {{ evento.hora }}</li>
											<li><span class="text-muted">Plazas:</span> {{ evento.plazas_disponibles }}</li>
											<li><span class="text-muted">Quedan:</span> {{ evento.plazas_restantes }}</li>
										</ul>
									</div>

									<div class="d-grid gap-2 d-md-block">
									{% if not evento.inscrito %}
										{% if evento.plazas_restantes > 0 %}
										   {% if evento.para_parejas %}
                                              <a class="btn btn-primary" href="{% url 'eventos:reservar_evento_parejas' evento.id %}">Reservar</a>	
                                           {% else %}
                                              <a class="btn btn-primary" href="{% url 'eventos:reservar_evento' evento.id %}">Reservar</a>	
                                           {% endif %}
										{% else %}
											{% if not evento.en_espera %}
												{% if evento.para_parejas %}
													<a class="btn btn-warning" href="{% url 'eventos:apuntar_lista_espera_parejas' evento.evento.id %}">Apuntar pareja la lista de espera</a>
												{% else %}
													<a class="btn btn-warning" href="{% url 'eventos:apuntar_lista_espera' evento.evento.id %}">Apuntarse a la lista de espera</a>
												{% endif %}
											{% else %}
												<a class="fs-4"><p>Ya estás en la lista de espera.</p></a>
											{% endif %}
										{% endif %}
									{% else %}
										<a class="fs-4"><p>Estás dentro.</p></a>
									{% endif %}

									{% if user.is_staff and not evento.evento.publicado %}
                                        <a class="btn btn-danger" href="{% url 'eventos:publicar_evento' evento.id %}">Publicar</a>	
									{% endif %}
									</div>
								</div>
							</div>
						</div>
						{% endfor %}	
				{% else %}
					<p>No se han encontrado eventos.</p>
				{% endif %}
				</div>

		    </div><!--//container-fluid-->
{% endblock %}