{% extends "layout.html" %}

{% block navitems %}
<li class="nav-item">
  <a class="nav-link active" href="#">Info <span class="visually-hidden">(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 are renewing their vows! </h1>    

<p class="text-dark">Rémi &amp; Vicky were married in a small ceremony in Janaury 30, 2021. Exactly 1.5 years later, we can finally make it to France to renew our vows and celebrate with everyone! We hope to see you there.</p>

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

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

<div class="container">
  <div class="row">
    <div class="col offset-sm-1 align-self-end">
      <ul class="timeline-with-icons">

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

      <h4 class="fw-bold">Cérémonie mairie</h4>
      <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>

      <h4 class="fw-bold">Vin d'honneur</h4>
      <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>

      <h4 class="fw-bold">Repas</h4>
      <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>

      <h4 class="fw-bold">Décontraction et pétanque</h4>
      <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>

      <h4 class="fw-bold">Apéro et BBQ</h4>
      <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>

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

{% endblock %}