{% extends 'qrtoolkit_core/layout.html' %}
{% load static %}
{% block extra_css %}
    <link rel="stylesheet" href="{% static 'qrtoolkit_core/css/kiosk.css' %}">
{% endblock %}
{% block content %}
    <header class="header">
        <div class="content-container">
            <a href="https://stad.gent" title="Home" class="site-logo " rel="home">
                Stad Gent
            </a>
        </div>
        <hr/>
    </header>
    <section>
        <div class="container highlight-inner">
            <h2 class="h2-title">{{ qrcode.title }}</h2>
            <div class="row">
                {% for url in qrcode.urls.all %}
                    {% if url.visible %}
                        <div class="col-6 text-center mt-3">
                            <a
                                    class="kiosk-btn"
                                    href="{{ url.url }}"
                                    role="button"
                            >{{ url.name }}</a>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </section>
    <div class="footer-bottom content-container">
        <div class="footer--column partnership">

            <span>In samenwerking met District09</span>
            <i aria-hidden="true" class="icon-district09"></i>
        </div>
        <div class="footer--column">
            <h2 class="visually-hidden">Disclaimer links</h2>
            <div class="item-list">
                <ul>
                    <li>
                        <a href="https://stad.gent/nl/node/806256">Gebruiksvoorwaarden</a>
                    </li>
                    <li>
                        <a href="https://stad.gent/nl/node/806253">Privacy</a>
                    </li>
                    <li>
                        <a href="https://stad.gent/nl/responsible-disclosure">Responsible disclosure</a>
                    </li>
                    <li>
                        <a href="https://stad.gent/nl/node/806255">Toegankelijkheidsverklaring</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
{% endblock content %}
