{% extends "module.html" %}

{% block body %}
<div class="card-body">
    <div class="text-right">
        <small>
            <i id="{{ module.id }}-spinner" class="fas fa-sync-alt"></i> {{ module.data._timestamp | prettydate }}
        </small>
    </div>
    {# Show the necessary authentication steps in case we don't have access yet #}
    {% if module.data.hint %}
        <div class="pt-2 text-center">
            <h2 class="text-center primary">
                <i class="fa fa-exclamation-triangle"></i> Authentication required
            </h2>
            <p>
                Scan the QR code or visit <b>
                    <a class="secondary" href="{{ module.data.hint.verification_url }}">
                        {{ module.data.hint.verification_url }}
                    </a></b>
                and enter the code <b class="secondary">{{ module.data.hint.user_code }}</b>
            </p>
            <img class="qr-img" src="data:image/png;base64,{{ module.data.hint.qr_code }}"/>
        </div>
    {% endif %}
    {% for item in module.data.events %}
    <div class="row mb-2">
        <div class="col-3 text-right">
            <h2>
                <strong class="badge bg-primary">{{ item.start | format_time("%d") }}</strong>
            </h2>
            <h5 class="text-uppercase">{{ item.start | format_time("%b") }}</h5>
        </div>
        <div class="col-9 align-self-center">
            <h6 class="text-uppercase"><strong>{{ item.summary }}</strong></h6>
            <ul class="list-inline">
                <li class="list-inline-item">
                    <i class="fa fa-calendar" aria-hidden="true"></i> {{ item.start | format_time("%A") }}
                </li>
                {% if item.type == "time" %}
                <li class="list-inline-item">
                    <i class="fa fa-clock" aria-hidden="true"></i> {{ item.start | format_time("%H:%M") }} -
                    {{ item.end | format_time("%H:%M") }}
                </li>
                {% endif %}
                {% if item.location %}
                <li class="list-inline-item">
                    <i class="fa fa-location-arrow" aria-hidden="true"></i> Location
                </li>
                {% endif %}
            </ul>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}