<!DOCTYPE html>
{%- if theme == "light" %}
<html lang="{{ lang }}" data-theme="light">
{%- else %}
<html lang="{{ lang }}" data-theme="dark">
{%- endif %}

<head>
    <title>{{ title }}</title>
    <script type="text/javascript" src="/js/toggle.js?t={{ epoch }}"></script>
    <link rel="stylesheet" type="text/css" href="/css/base.css?t={{ epoch }}">
    <link rel="stylesheet" type="text/css" href="/css/colors.css?t={{ epoch }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
    <link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">
    <link rel="mask-icon" href="{{ url_for('static', filename='safari-pinned-tab.svg') }}" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="robots" content="noindex, nofollow">
    <meta property="og:title" content="{{ title }}">
    <meta property="og:site_name" content="{{ title }}">
    <meta property="og:url" content="{{ url }}">
    <meta property="og:description" content="{{ desc }}">
    <meta property="og:type" content="website">
    <meta property="og:image" content="{{ url_for('static', filename='ab.jpg') }}">
</head>

<body>
    <div id="content">
        <div id="header">{{ title }}</div>
        <hr>
        {%- set id = namespace(value=0) %}
        {%- for question in content %}
        {%- set id.value = id.value + 1 %}
        <div class="ab">
            <input type="radio" id="a{{ id.value }}" class="a" name="group-{{ id.value }}">
            <label for="a{{ id.value }}" class="a" title="{{ question['A'] }}"> A)&nbsp;{{ question['A'] }}</label>
            <div class="separator">{{ separator }}</div>
            <input type="radio" id="b{{ id.value }}" class="b" name="group-{{ id.value }}">
            <label for="b{{ id.value }}" class="b" title="{{ question['B'] }}">B)&nbsp;{{ question['B'] }}</label>
        </div>
        <hr>
        {%- endfor %}
        <div id="footer">
            <div id="questions">{{ questions_prefix }} {{ num_lines }} {{ questions_suffix }}<br><a
                    href="mailto:{{ mailto }}">Einreichen!</a></div>
            <div class="spacer">&nbsp;</div>
            <div class="toggle">
                {%- if theme == "light" %}
                <input type="checkbox" id="toggle_checkbox">
                {%- else %}
                <input type="checkbox" id="toggle_checkbox" checked="checked">
                {%- endif %}
                <label for="toggle_checkbox" class="toggle_label">
                    <div id="star">
                        <div class="star" id="star-1">★</div>
                        <div class="star" id="star-2">★</div>
                    </div>
                    <div id="moon"></div>
                </label>
            </div>
            <form action="/" method="get">
                <input type="hidden" name="t" value="{{ epoch }}">
                <button id="next" type="submit">{{ more }}</button>
            </form>
        </div>
    </div>
    <script type="text/javascript">
        initToggle();
    </script>
</body>

</html>