{% extends "layout.html" %}

{% block navitems %}
<li class="nav-item active">
  <a class="nav-link" href="#">Info <span class="sr-only">(current)</span></a>
</li>

<li class="nav-item">
 <a class="nav-link" href="{{url_for('form')}}">RSVP</a>
</li>
{% endblock %}

{% block content %}
    
<h1>Rémi &amp; Vicky sont </h1>    

<h3><i class="bi bi-geo-alt"></i> La Chapelle-Taillefert</h3>
<h3><i class="bi bi-calendar-heart"></i> 30 Julliet 2022</h3>

<a class="btn btn-outline-primary btn-lg" href="{{url_for('form')}}" role="button">RSVP <i class="bi bi-heart-arrow"></i></a>

<h3> Itininerary </h3>

<ul class="timeline-with-icons">

    <li class="timeline-item mb-5">
      <span class="timeline-icon">
        <i class="bi bi-house-heart"></i>
      </span>

      <h5 class="fw-bold">Cérémonie mairie</h5>
      <p class="mb-2 fw-bold">11h</p>
      <p class="text-muted mb-2 fw-bold">La Mairie de La Chapelle-Taillefert</p>
    </li>
    
    <li class="timeline-item mb-5">
      <span class="timeline-icon">
        <i class="bi bi-person-hearts"></i>
      </span>

      <h5 class="fw-bold">Vin d'honneur</h5>
      <p class="mb-2 fw-bold">11h30</p>
      <p class="text-muted mb-2 fw-bold">La venue</p>
    </li>
    
    <li class="timeline-item mb-5">
      <span class="timeline-icon">
        <i class="bi bi-egg-fried"></i>
      </span>

      <h5 class="fw-bold">Repas</h5>
      <p class="mb-2 fw-bold">12h30</p>
      <p class="text-muted mb-2 fw-bold">La venue</p>
    </li>
    
    <li class="timeline-item mb-5">
      <span class="timeline-icon">
       <i class="bi bi-dribbble"></i>
      </span>

      <h5 class="fw-bold">Décontraction et pétanque</h5>
      <p class="mb-2 fw-bold">16h00</p>
      <p class="text-muted mb-2 fw-bold">La venue. Bring your own boules de pétanque !</p>
    </li>
    
    <li class="timeline-item mb-5">
      <span class="timeline-icon">
        <i class="bi bi-balloon-heart"></i>
      </span>

      <h5 class="fw-bold">Apéro et BBQ</h5>
      <p class="mb-2 fw-bold">19h30</p>
      <p class="text-muted mb-2 fw-bold">La venue</p>
    </li>
    
    <li class="timeline-item mb-5">
      <span class="timeline-icon">
        <i class="bi bi-speaker"></i>
      </span>

      <h5 class="fw-bold">Karaoké et musique et danse</h5>
      <p class="mb-2 fw-bold">21h30</p>
      <p class="text-muted mb-2 fw-bold">La venue</p>
    </li>
    
  </ul>

{% endblock %}