{% extends "base.html" %}
{% block content %}
{% if logged_in %}
<div class="container-fluid">
  <div class="row align-items-stretch">
    <div id="menu" class="col-md-2 bg-light">
      <!-- internal menu -->
      <h2>Menu</h2>
      <ul>
        <li>Web links</li>
        <li><a href="/useradmin">User Administration</a></li>
      </ul>
    </div>
    <div class="col-8">
      <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>
    <div id="events" class="col-2 bg-light">
      <!-- events -->
      <h2>Events</h2>
    </div>
  </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-100">
      <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-100">
      <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-100">
      <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 %}