{% extends "base.html" %}

{% block body_container %}
    <div class="header-container">
        {% include "title.html" %}

        <span class="header-menu">
            {% match context.user %}
            {% when Some with (user) %}
                <a class="create-recipe" href="/recipe/new" >{{ context.tr.t(Sentence::CreateNewRecipe) }}</a>
                <a href="/{{ context.tr.current_lang_code() }}/user/edit">
                    {% if user.name == "" %}
                        {{ user.email }}
                    {% else %}
                        {{ user.name }}
                    {% endif %}
                </a> / <a href="/signout">{{ context.tr.t(Sentence::SignOut) }}</a>
            {% when None %}
                <a href="/{{ context.tr.current_lang_code() }}/signin" >{{ context.tr.t(Sentence::SignInMenu) }}</a>/<a href="/{{ context.tr.current_lang_code() }}/signup">{{ context.tr.t(Sentence::SignUpMenu) }}</a>/<a href="/{{ context.tr.current_lang_code() }}/ask_reset_password">{{ context.tr.t(Sentence::LostPassword) }}</a>
            {% endmatch %}

            <select id="select-website-language">
            {% for lang in translation::available_languages() %}
                <option value="{{ lang.0 }}"
                {%~ if context.tr.current_lang_code() == lang.0 %}
                    selected
                {% endif %}
                >{{ lang.1 }}</option>
            {% endfor %}
            </select>

            <label id="toggle-theme">
                <input type="checkbox"
                {%~ if !context.dark_theme %}
                    checked
                {% endif %} >
                <span class="slider"></span>
            </label>
        </span>
    </div>

    <div class="main-container">
        {% block main_container %}{% endblock %}
    </div>

{% endblock %}