{# emulate a booking overview which shows the connection#}
{% extends "base.html" %}
{% block content %}
<script>
    $( document ).ready(function() {     
    $('#booking-info').delay(1500).show(0);
    $('#loading-animation').delay(1500).hide(0);  

    }); 
</script>


<div class="position-relative" style="height: 100vh;" id="loading-animation">
    <div class="position-absolute top-50 start-50 translate-middle">
        <div class="spinner-grow text-danger" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          
    </div>
</div>

<div id="booking-info" style="display:none;">
<h1 class="display-2">{{ event.name }}</h1>

<div class="card mb-4 shadow">
    <div class="card-body">
        <h1 class="card-title">Trip outbound</h1>
        <img src="/static/trip_to.jpg" width="100%">
    </div>
</div>

<div class="card mb-4 shadow">
    <div class="card-body">
        <h1 class="card-title">Activity</h1>
        <img src="/static/bettmeralp_weg.png" width="100%">
        <ul class="list-group list-group-flush">
            <li class="list-group-item"><b>Coordinates:</b> 46.386321, 8.057643</li>
            <li class="list-group-item"><b>Start:</b> Bettmeralp, Bergstation Luftseilbahn</li>
            <li class="list-group-item"><b>Route:</b> Bergstation Luftseilbahn Bettmeralp – Bettmersee – Blausee – Biel – Hohbalm – Roti Chumma – Märjelensee – Obers Tälli (Tunnel) – Fiescheralp - Bettmeralp</li>
            <li class="list-group-item"><b>Goal:</b> Bettmeralp, Bergstation Luftseilbahn</li>
        </ul>
    </div>
</div>

<div class="card mb-4 shadow">
    <div class="card-body">
        <h1 class="card-title">Trip inbound</h1>
        <img src="/static/trip_back.jpg" width="100%">
    </div>
</div>
</div>

{% endblock %}