<!DOCTYPE html>
{% load i18n %}
<html lang="{{ LANGUAGE_CODE }}">
<head>
    <title>Kasu - {% block title %}{{ current_page.menu_name|default:current_top_page.menu_name|default:"traditionelle asiatische Spielkultur"}}{% endblock %}</title>
    <meta name="description" content="{% block description %}{% endblock %}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta charset="UTF-8">
    <!--[if lt IE 9]>
    <script type="text/javascript">
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
    </script>
    <![endif]-->
    <link rel="stylesheet" href="{{STATIC_URL}}css/kasu.css" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="alternate" type="application/rss+xml" title="{% trans 'Current News' %}"
          href="{% url 'feed-latest-news' %}"/>
    <link rel="alternate" type="application/rss+xml" title="{% trans 'Recent Comments' %}"
          href="{% url 'feed-latest-comments' %}"/>
    <link rel="shortcut icon" href="{{STATIC_URL}}img/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="{{STATIC_URL}}img/apple-touch-icon-180x180.png" />
    <link rel="icon" type="image/png" href="{{STATIC_URL}}img/favicon-96x96.png" sizes="96x96" />


    {% block opengraph %}
    <meta property="og:type" content="website"/>
    <meta property="og:title" content="Kasu - Verein Japanische Spielekultur"/>
    <meta property="og:url" content="http://www.kasu.at{{ request.path_info }}"/>
    <meta property="og:image" content="http://www.kasu.at/static/img/logo.png"/>
    {% endblock %}
    {% block extra_head %}{% endblock %}
    <script src="{{ STATIC_URL }}js/piwik.js"></script>
</head>
<body id="body" {% block itemscope %}{% endblock %}>
    <header id="siteheader">
    <div id="sitelogo"><a href="/index.html">Kasu - traditionelle asiatische Spielkultur</a></div>
    <nav id="mainnav">
        <input type="checkbox" id="toggle" aria-hidden="true" />
        <label for="toggle" class="toggle" onclick aria-hidden="true"><span class="fa fa-bars"></span> {% trans "Menu" %}</label>
        <ul class="main_menu">
            {% for item in top_menu_items %}
            <li><a href="{{item.get_absolute_url}}" title="{{ item.title }}"
                   class="{%if item.active %}active{% endif %}">{{item.menu_name}}</a>
                {% if item.subpages.all %}
                <ul class="main_dropdown">
                  {% for subpage in item.subpages.all %}<li><a
                  href="{{subpage.get_absolute_url}}"
                  {% ifequal subpage current_page %}class="active"{% endifequal %}>{{subpage.menu_name}}</a></li>
                  {% endfor %}
                </ul>
                {% endif %}
            </li>
            {% endfor %}
        </ul>
    </nav>
</header>
    <main id="maincontent">
    <header id="jumbotron"
         style="background-image: url('{% block jumbotron_background %}{{STATIC_URL}}img/teaser/{{current_top_page.slug|default:'jumbotron'}}.jpg{% endblock %}')">
    <aside id="redbox">
        {% block redbox %}
        {% if current_event %}
            <h2>{% trans "Current Event" %}</h2>
            <h3>{{ current_event.name}}</h3>
            <ul class="fa-ul">
                <li><span class="fa-li fa fa-clock-o"></span><strong>{% trans "Since" %}:</strong> {{current_event.start|timesince}}</li>
                <li><span class="fa-li fa fa-calendar"></span><strong>{% trans "Start" %}:</strong>
                    <time datetime="{{current_event.start|date:'c'}}">{{current_event.start|date:'DATETIME_FORMAT'}}</time>
                </li>
                <li><span class="fa-li fa fa-map-marker"></span><strong>{% trans "Location" %}:</strong> {{ current_event.location }}</li>
            </ul>
            <div class="right"><a class="button" href="{{current_event.get_absolute_url}}">
            {% trans "More Details" %} <span class="fa fa-arrow-right"></span></a></div>
        {% else %}
        <h2>{% trans "Next Event" %}</h2>
            <h3>{{ next_event.name}}</h3>
            <ul class="fa-ul">
                <li><span class="fa-li fa fa-clock-o"></span><strong>{% trans "in" %}:</strong> {{next_event.start|timeuntil}}</li>
                <li><span class="fa-li fa fa-calendar"></span><strong>{% trans "Start" %}:</strong>
                    <time datetime="{{next_event.start|date:'c'}}">{{next_event.start|date:'DATETIME_FORMAT' }}</time>
                </li>
                <li><span class="fa-li fa fa-map-marker"></span><strong>{% trans "Location" %}:</strong> {{ next_event.location }}</li>
            </ul>
            <div class="right"><a class="button" href="{{next_event.get_absolute_url}}">{% trans "More Details" %}
            <span class="fa fa-arrow-right"></span></a></div>
        {% endif %}
        <h3 class="clearfix">{% trans "Upcoming events" %}
            <a href="{% url 'events-ical' %}" aria-label="iCal Feed"><span class="fa fa-rss-square" title="iCal Feed"></span></a>
        </h3>
        <ul class="fa-ul">
            {% for event in upcoming_events %}
            <li><span class="fa-li fa fa-calendar-o"></span>
                <a href="{{ event.get_absolute_url}}">
                <time datetime="{{event.start|date:'c'}}">{{event.start|date:'D d. M:'}}</time>
                {{event.name}}</a></li>
            {% endfor %}
        </ul>
        {% endblock %}
    </aside>
    {% block teaser %}
        <h1>{% if title %}{{title}}{% elif current_page %}{{ current_page.title }}{% elif current_top_page %}{{current_top_page.title }}{% endif %}</h1>
    {% endblock %}
    </header>
    {% block navigation %}{% if current_top_page.subpages.count %}
    <ul id="navigation">
    <li><a href="{{current_top_page.get_absolute_url}}"
           class="{% ifequal current_page current_top_page %}{% endifequal %}">{{current_top_page.menu_name}}</a></li>
    {% for subpage in current_top_page.subpages.all %}
    <li><a href="{{subpage.get_absolute_url}}" class="{% ifequal subpage current_page %}active{% endifequal %}">{{subpage.menu_name}}</a>
    </li>
    {% endfor %}
    {% block additional_nav_elements %}{% endblock %}
</ul>
    {% endif %}{% endblock %}
    {% block messages %}{% if messages %}
    <ul id="messages">
    {% for message in messages %}
    <li class="{{ message.tags }}">
        <span class="fa fa-2x {% if message.tags == success %}fa-check{% else %}fa-exclamation-triangle{% endif %}"></span>
        {{ message }}
    </li>
    {% endfor %}
</ul>
    {% endif %}{% endblock %}
    {% block maincontent %}
    <div id="content">{% block content %}{% endblock %}</div>
    {% endblock %}
    {% block paginator %}
    {% if page_obj.has_other_pages %}{% include 'paginator.html' %}{% endif %}
    {% endblock %}
    {% block comments %}{% endblock %}
    <br class="clear"/>
    <p id="bottom_buttonbar" class="buttonbar">
        {% block buttonbar %}
        {% if current_page and perms.content.add_page %}
            <a href="{% url 'add-page' current_page.path %}" class="button"><span class="fa fa-plus"></span>
                {% trans "Add Subpage" %}</a>
        {% endif %}

        {% if current_page and perms.content.change_page %}
        <a href="{% url 'edit-page' current_page.path %}" class="button"><span class="fa fa-pencil"></span>
            {% trans "Edit Page" %}</a>
        {% endif %}
        {% block additional_buttonbar %}{% endblock %}
        {% endblock %}
    </p>
</main>
    <footer id="footer">
    <p><strong>Herausgeber:</strong> Verein Kasu - traditionelle asiatische Spielkultur (<a
            href="/about.html#impressum">{% trans "Imprint" %}</a> &ndash; <a
            href='ma&#105;&#108;to&#58;ve&#37;72e&#37;6&#57;n&#64;%6&#66;%61su&#46;a%7&#52;'>{% trans "contact" %}</a>)
    </p>

    <form action="/i18n/setlang/" method="post" class="right">
        {% csrf_token %}
        <label for="language">{% trans "Language" %}:</label>
        <select name="language" id="language">
            {% get_language_info_list for LANGUAGES as languages %}
            {% for language in languages %}
            <option value="{{language.code}}" {% ifequal language.code LANGUAGE_CODE %}
                    selected="selected" {% endifequal %}>{{ language.name_local }} ({{ language.code }})
            </option>
            {% endfor %}
        </select>
        <button type="submit">{% trans "Go" %}</button>
    </form>
</footer>
<nav id="usernav">
    {% if user.is_authenticated %}
    {% trans "Logged in as" %}:
    <a rel="nofollow" href="{% url 'membership-details' user.username %}">{{user.username}}</a> -
    {% if user.is_staff %}<a href="/admin">{% trans "Admin" %}</a>{% endif %}
    <a rel="nofollow" href="{% url 'logout' %}?next={{ request.path_info }}">{% trans "Logout" %}</a>
    {% else %}
    {% trans "no user logged in" %} -
    <a rel="nofollow" href="{% url 'membership-register' %}">{% trans "register" %}</a>
    <a rel="nofollow" href="{% url 'login' %}?next={{ request.path_info }}">{% trans "login" %}</a>
    <a rel="nofollow" href="{% url 'social:begin' 'facebook' %}" class="fa fa-facebook"
       title="{% trans 'Login with Facebook' %}" aria-label="{% trans 'Login with Facebook' %}"></a>
    <a rel="nofollow" href="{% url 'social:begin' 'twitter' %}" class="fa fa-twitter"
       title="{% trans 'Login with Twitter' %}" aria-label="{% trans 'Login with Twitter' %}"></a>
    <a rel="nofollow" href="{% url 'social:begin' 'google-oauth2' %}" class="fa fa-google"
       title="{% trans 'Login with Google' %}" aria-label="{% trans 'Login with Google' %}"></a>
    {% endif %}
</nav>
</body>
</html>
