{% extends "base.html" %}

{% block body_class %}catalogue{% endblock %}

{% block body %}

    <header class="controls">
        <label>text</label>
        <input class="get-input" type="text" value="{{params['text']}}" data-name="t"/>
        <button onClick="window.location.reload();">generate</button>

        <hr>

        <label>weight</label>
        <input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w"/>

        <label  class="fix-label" for="fix-checkbox"
                title="custom regex to try to map unrecognized character to ones that are processed by svgbob">
                autofix</label>
        <input  id="fix-checkbox" type="checkbox" 
                class="body-class-check" value="check-fix" checked/>

        <label  class="text-label" for="text-checkbox"
                title="display the remaining text in the svg output in red">
                output text</label>
        <input  id="text-checkbox" type="checkbox" 
                class="body-class-check" value="check-text" checked/>

        <script>
            let inputs = document.getElementsByClassName('get-input');
            for(let input of inputs){
                input.addEventListener('input', function(){
                    const url = new URL(window.location.href);
                    url.searchParams.set(input.dataset.name, input.value);
                    window.history.replaceState(null, null, url);
                });
            }
            function toggle_class(classname, val){
                if(val){
                    document.body.classList.add(classname);
                }
                else{
                    document.body.classList.remove(classname);
                }
            }
            let body_class_checkboxes = document.getElementsByClassName("body-class-check");
            for(let checkbox of body_class_checkboxes){
                let classname = checkbox.value;
                checkbox.addEventListener('input', function(){
                    toggle_class(classname, checkbox.checked);
                });
                toggle_class(classname, checkbox.checked);
            }
        </script>
    </header>

    <div class="box">
        {% for catalogue, legend in databases.items() %}
            <div class="legend {{catalogue}}"><strong>{{catalogue}}</strong> {{legend}}</div>
        {% endfor %}
    </div>

    {% for type, type_data in output.items()%}
        <details>
            <summary>{{type}} {{type_data['ascii']}}</summary>

            {% for catalogue in databases.keys() %}
              {% set fonts = type_data['fonts']|selectattr('catalogue', 'equalto', catalogue) %}
              {% for f in fonts %}
              <div class="split-screen {{f['catalogue']}}">

                  <h2>{{f['name']}} ({{f['catalogue']}})</h2>

                  <div class="f-ascii"><pre>{{f['ascii']|safe|escape}}</pre></div>
                  <div class="f-svg">{{f['svg']|safe|escape}}</div>

                  {% if f['autofix'] %}
                  <div class="f-ascii fix"><pre>{{f['ascii_fix_indication']|safe|escape}}</pre></div>
                  <div class="f-svg fix">{{f['svg_fix']|safe|escape}}</div>
                  {% endif %}

                <aside class="left">
                    <!-- title="display the font metadata, embedded inside of the figlet file" -->
                    <button>INFO ?</button>
                </aside>
                
                <aside class="right">
                    <button>> SVG</button>
                    <button>> HPGL</button>
                </aside>

              </div>
              {% endfor %}
              <hr>
            {% endfor %}

        </details>
    {% endfor %}

    <script>

    </script>

{% endblock %}