{% extends "common/base.html" %}
{% block title %}Fusion Pixel - Playground{% endblock %}
{% block style %}
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        {% for font_config in font_configs.values() %}
        {% for width_mode in width_modes %}
        .font-{{ font_config.font_size }}px-{{ width_mode }} {
            font-size: {{ font_config.font_size * 2 }}px;
            line-height: {{ font_config.line_height * 2 }}px;
        }
        {% for locale, language_flavor in locale_to_language_flavor.items() %}
        {% with font_family = 'fusion-pixel-' ~ font_config.font_size ~ 'px-' ~ width_mode ~ '-' ~ language_flavor %}
        @font-face {
            font-family: {{ font_family }};
            src: url("{{ font_family }}.woff2?r={{ build_random_key }}");
        }
        .font-{{ font_config.font_size }}px-{{ width_mode }}:lang({{ locale }}) {
            font-family: {{ font_family }}, serif;
        }
        {% endwith %}
        {% endfor %}
        {% endfor %}
        {% endfor %}
        .toolbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }
        .options-group {
            height: 36px;
            display: flex;
            flex-direction: row;
            background-color: #ffd339;
        }
        .option {
            height: 100%;
            margin-left: 24px;
            margin-right: 24px;
            display: flex;
            flex-direction: row;
            align-items: center;
            color: #4b4b4b;
            font-family: fusion-pixel-12px-monospaced-latin, sans-serif;
            font-size: 24px;
            line-height: 36px;
        }
        .option input[type="radio"] {
            display: none;
        }
        .option input[type="radio"] + span {
            width: 10px;
            height: 10px;
            margin-left: 12px;
            margin-right: 12px;
            border-width: 2px;
            border-color: #4b4b4b;
            border-style: solid;
        }
        .option input[type="radio"]:checked + span {
            background-color: #4b4b4b;
        }
        .content {
            position: fixed;
            top: 108px;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .content textarea {
            width: 100%;
            height: 100%;
            padding: 24px;
            color: #4b4b4b;
            outline: none;
            border: none;
            resize: none;
        }
    </style>
{% endblock %}
{% block body %}
    <form class="toolbar">
        <div class="options-group">
            {% for font_config in font_configs.values() %}
            <label class="option">
                <input id="radio-font-size-{{ font_config.font_size }}" name="font_size" type="radio" onchange="onFontSizeChange('{{ font_config.font_size }}')">
                <span></span>
                {{ font_config.font_size }}px
            </label>
            {% endfor %}
        </div>
        <div class="options-group" style="background-color: #94e34a;">
            {% for width_mode in width_modes %}
            <label class="option">
                <input id="radio-width-mode-{{ width_mode }}" name="width_mode" type="radio" onchange="onWidthModeChange('{{ width_mode }}')">
                <span></span>
                {{ width_mode }}
            </label>
            {% endfor %}
        </div>
        <div class="options-group" style="background-color: #6ebdff;">
            {% for locale, language_flavor in locale_to_language_flavor.items() %}
            <label class="option">
                <input id="radio-locale-{{ locale }}" name="locale" type="radio" onchange="onLocaleChange('{{ locale }}')">
                <span></span>
                {{ language_flavor.replace('_', '-') }}
            </label>
            {% endfor %}
        </div>
    </form>
    <label class="content">
        <textarea id="input-box" placeholder="请随便写点什么… / Please input something…"></textarea>
    </label>
    <script>
        let inputBox = document.getElementById('input-box')

        let settings = {
            fontSize: 12,
            widthMode: 'proportional',
            locale: 'zh-hans',
        }

        function applySettings() {
            localStorage.setItem('settings:playground', JSON.stringify(settings))
            inputBox.className = 'font-' + settings.fontSize + 'px-' + settings.widthMode
            inputBox.setAttribute('lang', settings.locale)
        }

        function onFontSizeChange(fontSize) {
            settings.fontSize = fontSize
            applySettings()
        }

        function onWidthModeChange(widthMode) {
            settings.widthMode = widthMode
            applySettings()
        }

        function onLocaleChange(locale) {
            settings.locale = locale
            applySettings()
        }

        let json = localStorage.getItem('settings:playground')
        if (json) {
            Object.assign(settings, JSON.parse(json))
        }
        document.getElementById('radio-font-size-' + settings.fontSize).checked = true
        document.getElementById('radio-width-mode-' + settings.widthMode).checked = true
        document.getElementById('radio-locale-' + settings.locale).checked = true
        applySettings()
    </script>
{% endblock %}