{% extends 'rental/base.html' %}
{% load static %}


{% block content %}

<div class="intro intro-carousel">
  <div id="carousel" class="owl-carousel owl-theme">
    {% for place in places %}
    <div class="carousel-item-a intro-item bg-image" style="background-image: url({{ place.thumbnail.img.url }})">
      <div class="overlay overlay-a"></div>
      <div class="intro-content display-table">
        <div class="table-cell">
          <div class="container">
            <div class="row">
              <div class="col-lg-8">
                <div class="intro-body">
                  <p class="intro-title-top"> {{ place.tagline }}</p>
                  <h1 class="intro-title mb-4">
                    <span class="color-b"> {{ place.subname }} </span>
                    <br> {{ place.name }}</h1>
                  <p class="intro-subtitle intro-price">
                    <a href="{% url 'rental:detail_place' place_name=place.name %}"><span class="price-a">À partir de {{ place.price }} €</span></a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

<!-- <div class="row">
  <div class="col-md-12 lg-4">
    <img src="/media/img/booking_award_2018_winner.png" alt="" class="logo">
  </div>
  <div class="col-md-12 lg_4">
    <img src="/media/img/booking_award_2018_winner.gif" alt="" class="logo">
  </div>
</div> -->


<section class="section-services section-t8">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="title-wrap d-flex justify-content-between">
          <div class="title-box">
            <h2 class="title-a">Tout pour vous sentir comme chez vous</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <div class="card-box-c foo">
          <div class="card-header-c d-flex">
            <div class="card-box-ico">
              <span class="fa fa-home"></span>
            </div>
            <div class="card-title-c align-self-center">
              <h2 class="title-c">Gîte</h2>
            </div>
          </div>
          <div class="card-body-c">
            <p class="content-c">
              Des superbes gîtes de vacances, tout équipés. Passer des vacances inoubliables,
              sentez vous comme chez vous
            </p>
          </div>
          <div class="card-footer-c">
            <a href="{% url 'rental:list_place' %}" class="link-c link-icon">En savoir plus
              <span class="ion-ios-arrow-forward"></span>
            </a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card-box-c foo">
          <div class="card-header-c d-flex">
            <div class="card-box-ico">
              <span class="fa fa-map"</span>
            </div>
            <div class="card-title-c align-self-center">
              <h2 class="title-c">Transport</h2>
            </div>
          </div>
          <div class="card-body-c">
            <p class="content-c">
              Votre séjour débute de la meilleure des façons.
              Nous organisons une navette entre l'aéroport, la gare maritime, le port de croisière et VillaFleurie
            </p>
          </div>
          <div class="card-footer-c">
            <a href="{% url 'services' %}" class="link-c link-icon">En savoir plus
              <span class="ion-ios-arrow-forward"></span>
            </a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card-box-c foo">
          <div class="card-header-c d-flex">
            <div class="card-box-ico">
              <span class="fa fa-car"></span>
            </div>
            <div class="card-title-c align-self-center">
              <h2 class="title-c">Voiture</h2>
            </div>
          </div>
          <div class="card-body-c">
            <p class="content-c">
              La plage est à 10 minutes à pied … pour le reste nous proposons un véhicule de location au tarif maison
            </p>
          </div>
          <div class="card-footer-c">
            <a href="{% url 'services' %}" class="link-c link-icon">En savoir plus
              <span class="ion-ios-arrow-forward"></span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{% include 'rental/temoignage.html' %}

{% endblock %}
