{% extends "base.html" %}
{% load static %}
{% block content %}
<div class="row p-lg-5">
    <div class="col-xl-6 p-lg-5">
        <img src="{{ event.cover.url }}" alt="" class="img-fluid">
    </div>
    <div class="col-xl-6 p-5">
        <h1>{{event.title}}</h1>
        <p class="h5 mb-5"><i class="bi bi-calendar-date mr-2"> </i>  {{event.start_date}} - <i class="bi bi-geo-alt-fill"></i> {{event.address}}</p>
        <p>{{event.description}}</p>
    </div>
</div>


<section>
    <div class="container py-5">
      <div class="row ">
        {% for stand in stands %}
        <div class="col-md-8 col-lg-6 col-xl-4">
          <div class="card text-black">
            <img src="{{stand.cover.url}}"
              class="card-img-top" alt="Apple Computer" />
            <div class="card-body">
              <div class="text-center">
                <h5 class="h3 mt-5">{{stand.type}}</h5>
                <p class="text-muted mb-4">{{stand.description}}</p>
              </div>
              <div>
                <div class="d-flex justify-content-between">
                <span>Prix</span><span>{{stand.price}} €</span>
                </div>
                <div class="d-flex justify-content-between">
                  <span>Surface</span><span>{{stand.surface}} m² </span>
                </div>
                <div class="d-flex justify-content-between">
                  <span>{{stand.stock }} stands disponibles</span>
                </div>
              </div>
              <div class="d-flex  total font-weight-bold mt-4">
                <a class="btn btn-warning w-100" href="{% url "stand_booking" stand.id %}">Réserver</a>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </section>
{% endblock content %}