{% if is_standalone %}
    {% extends "base_standalone.jinja" %}
{% else %}
    {% extends "base_www.jinja" %}
{% endif %}

{% block head_title %}{{ l10n(tool_data.metadata.head.title_key, tool_id, user_lang) }}{% endblock %}
{% block head_description %}{{ l10n(tool_data.metadata.head.description_key, tool_id, user_lang) }}{% endblock %}

{% block extra_stylesheets %}
    {{ render_applet_head(applet_data, is_standalone) }}
{% endblock %}

{% block header_title %}
    {% if not is_standalone %}
        <i class="fad fa-briefcase t-size-16 mr-s t-muted"></i><a href="../" class="a-hidden">{{ l10n("header.root", "projects", user_lang) }}</a>
        <span class="mobile-hide"><span class="mx-s t-size-15">❱</span>{{ l10n(tool_data.metadata.general.title_key, tool_id, user_lang) }}</span>
    {% else %}
        {% if not is_brandless %}
            <span class="mobile-hide">NibblePoker<span class="mx-s t-size-15">❱</span></span>
        {% endif %}
        {{ l10n(tool_data.metadata.general.title_key, tool_id, user_lang) }}
    {% endif %}
{% endblock %}

{% block opengraph_tags %}
    <!-- Required fields -->
    <meta property="og:title"
          content="{{ l10n(tool_data.metadata.opengraph.title_key, tool_id, user_lang) }}">
    <meta property="og:url"
          content="{{ "https://nibblepoker." + domain_tld  + "/tools/" + tool_id }}">
    <meta property="og:description"
          content="{{ l10n(tool_data.metadata.opengraph.description_key, tool_id, user_lang) }}">

    <!-- Optional fields -->
    {% if tool_data.metadata.opengraph.image_url is not none %}
        <meta property="og:image"
              content="{{ "https://nibblepoker." + domain_tld  + tool_data.metadata.opengraph.image_url }}">
        {% if tool_data.metadata.opengraph.image_type is not none %}
            <meta property="og:image:type"
                  content="{{ tool_data.metadata.opengraph.image_type }}">
        {% endif %}
    {% endif %}
{% endblock %}

{% block extra_head_tags %}
    <meta name="description"
          content="{{ l10n(tool_data.metadata.head.description_key, tool_id, user_lang) }}">
    <!--<meta name="keywords" content="HTML, CSS, JavaScript">-->
{% endblock %}

{% block main_content %}
    {% if not is_standalone %}
        {{ render_h1(
            '<i class="' + tool_data.metadata.general.icon + ' t-size-16 mr-s t-muted"></i>' +
            l10n(tool_data.metadata.general.title_key, tool_id, user_lang)
        ) }}
        <div class="p-s">
            {% include 'applets/'+applet_data.id+'.jinja' %}
        </div>
    {% else %}
        {% include 'applets/'+applet_data.id+'.jinja' %}
    {% endif %}
{% endblock %}

{% block extra_scripts %}
    <!--<script src="{{ url_for("static", filename="resources/NibblePoker/js/nibblepoker-default.min.js") }}"></script>-->

    {{ render_applet_scripts(applet_data, is_standalone) }}
{% endblock %}