{% extends "main.html" %}
{% load bootstrap4 %}
{% load thumbnails %}
{% load static %}

{% block title %}Loca7{% endblock %}

{% block head %}
{% include "logement/_map.html" %}
<script type="text/javascript" src="{% static "js/jquery.tablesorter.min.js" %}"></script>
<script type="text/javascript" src="{% static "loca7/recherche.js" %}"></script>

{% endblock %}

{% block content %}
<div class="default-container">
	<h1>Loca7</h1>
	<p>
		{% if peut_gerer %}
		<a href="{% url 'gestion:logement:liste' %}" class="btn btn-secondary">Gérer les logements</a>
		{% endif %}
	</p>

    {% if message_accueil_visible %}
    <div class="alert alert-info">
		{% if peut_gerer_page %}
		<a href="{{ lien_page_edition }}" class="float-right btn btn-sm"><i class="fas fa-pencil-alt"></i></a>
		{% endif %}

		{{ texte_accueil|safe }}
	</div>
    {% endif %}

	<div class="row">
		<div class="col-lg-4 mb-4">
			<h2>Recherche de logement</h2>
			<form action="" method="post">
				{% csrf_token %}
				{% bootstrap_form_errors form type='non_fields' %}
				<div class="form-row">
					<div class="col">
						{% bootstrap_field form.min_surface addon_after='<span>m²</span>' %}
					</div>
					<div class="col">
						{% bootstrap_field form.max_surface addon_after='<span>m²</span>' %}
					</div>
				</div>

				{% bootstrap_field form.max_loyer addon_after='<span>€</span>' %}
				{% bootstrap_field form.meuble %}
				<div class="form-row">
					<div class="col-7">
						<input type="submit" class="col mr-2 btn btn-primary" value="Rechercher">
					</div>
					<div class="col-5">
						<input type="reset" class="col ml-2 btn btn-secondary" value="Annuler">
					</div>
				</div>
			</form>
		</div>

		<div class="col-lg-8">
			<h2>Derniers logements ajoutés</h2>

			<div class="embed-responsive embed-responsive-16by9">
				<div id="map" class="embed-responsive-item"></div>
				<div style="font-size: 10px;text-align: right">Attention, certaines adresses peuvent être imprécises
				</div>
			</div>

			<div class="my-4"></div>

			{% for logement in logements %}
			<div class="card mb-2">
				<div class="row no-gutters">
					<div class="p-2 border-sm position-relative">
						{% if logement.photos.all.0 %}
						{% with photo=logement.photos.all.0 %}
						<img src="{{ photo.photo|thumbnail:"x300" }}"
							style="height:126px; width:224px; object-fit:cover;">
						{% endwith %}
						{% else %}
						<div style="height:126px; width:224px; background-color: #ddd;"></div>
						{% endif %}
					</div>
					<div class="col">
						<div class="card-body">
							<h5 class="card-title"><a
									href="{{ logement.get_absolute_url }}">{{ logement.get_typel_display }}
									{{ logement.surface|default_if_none:"?" }} m²</a> <span style="float:right"
									class="badge badge-pill badge-primary">{{ logement.loyer }} €{% if logement.montant_charges != 0 %}
									+ {{ logement.montant_charges|default_if_none:"?" }} €{% else %} c.
									c.{% endif %}</span></h5>

							<p class="card-text">
								<i class="fas fa-map-marker-alt"></i> <a href="#map"
									onclick="javascript:logementAdrClick({{ logement.id }})">{{ logement.adresse }}</a><br>
								<i class="fas fa-couch"></i> Meublé? {{ logement.meuble|yesno:"Oui,Non,Non précisé" }}
							</p>
							{% if peut_gerer %}
                <a href="{% url 'gestion:logement:edition' logement.id %}" class="btn btn-primary text-white btn-sm">
                  <i class="fas fa-pencil-alt" title="Éditer"></i>
                </a>
              {% endif %}
						</div>
					</div>
				</div>
			</div>
			{% empty %}
			<p>Aucun logement dans notre base de donnée.</p>
			{% endfor %}
			<form action="" method="post">
				<input class="btn btn-outline-primary w-100" type="submit" value="Voir tous les logements" />
			</form>
		</div>
	</div>
</div>
{% endblock %}