{% extends "base.html" %}
{% block content %}
{% if logged_in %}
<div class="container py-5 h-100">
    <br>
    <p>This will be the private information area for the extended Jean-Marie family.</p>
    <div>
        <h2>Web links</h2>
        <h3>TLC Creations</h3>
        <ul>
            <li><a href="https://www.tlccreations.ca">TLC Creations</a></li>
        </ul>
        <h3>Fonts</h3>
        <ul>
            <li><a href="https://fonts.google.com">Google fonts</a></li>
            <li><a href="https://www.fontspace.com">Font Space</a></li>
        </ul>
        <h3>Family tree</h3>
        <ul>
            <li><a href="https://www.ancestry.com">Ancestry</a></li>
            <li><a href="https://www.geni.com">Geni</a></li>
        </ul>
    </div>
</div>
{% else %}
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

    <!-- Indicators/dots -->
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
      <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
      <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
    </div>
  
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="assets/images/slide-01.jpg" alt="View from the dock" class="d-block w-50">
        <div class="carousel-caption">
          <h3>Jean-Marie Family</h3>
          <p>View from the dock</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="assets/images/slide-02.jpg" alt="Sunset at 3 sisters" class="d-block w-50">
        <div class="carousel-caption">
          <h3>Jean-Marie Family</h3>
          <p>Sunset over the 3 sisters</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="assets/images/slide-03.jpg" alt="Purple sunset" class="d-block w-50">
        <div class="carousel-caption">
          <h3>Jean-Marie Family</h3>
          <p>Purple sunset</p>
        </div>
      </div>
      <!-- The slideshow/carousel -->
  
  
      <!-- Left and right controls/icons -->
      <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>  
{% endif %}
{% endblock content %}