{% extends 'tools/ascii/master.twig' %}

{% set header_title = 'ascii table' %}
{% set master_breadcrumbs = [{ url: '/tools', text: 'tools' }, { url: '/tools/ascii', text: 'ascii' }] %}

{% block column_left %}
    <div class="sidelist">
        <div class="sidelist-title">About</div>
        <div class="sidelist-body">
            <p>This page provides a filterable ASCII table allowing for quick lookup, in case you need a Delta Line Escape character for some reason.</p>
            <p>I've heard the Linux manual pages also have an equivalent but sometimes you don't readily have access to a Linux terminal ok...</p>
        </div>
    </div>

    <div class="sidelist">
        <div class="sidelist-title">Filters</div>
        <div class="sidelist-body">
            <a class="sidelist-item sidelist-item-link js-ascii-quick-filter" href="#" data-filter="">
                <div class="sidelist-item-icon">A</div>
                <div class="sidelist-item-label">All characters</div>
            </a>
            <a class="sidelist-item sidelist-item-link js-ascii-quick-filter" href="#control" data-filter="control">
                <div class="sidelist-item-icon">C</div>
                <div class="sidelist-item-label">Control characters</div>
            </a>
            <a class="sidelist-item sidelist-item-link js-ascii-quick-filter" href="#printable" data-filter="printable">
                <div class="sidelist-item-icon">P</div>
                <div class="sidelist-item-label">Printable characters</div>
            </a>
        </div>
    </div>
{% endblock %}

{% block column_centre %}
    <div class="ascii-search">
        <div class="ascii-search-box">
            <input type="search" class="js-ascii-search" placeholder="Filter..." autocomplete="off">
        </div>
    </div>

    <div class="ascii-hint">
        <div class="ascii-hint-body">
            Type <em><code>printable</code></em> for all printable characters, or <em><code>control</code></em> for all control characters.
        </div>
    </div>

    <div class="ascii-chars">
        {% for info in chars %}
            {% set print = info.string %}

            <div class="ascii-char {{ info.isPrintable ? 'ascii-char-printable' : 'ascii-char-control' }} js-ascii-char" data-key-code="{{ info.decimal }}" data-key-desc="{{ info.name }}" data-key-print="{{ info.string }}" data-copy="{{ info.string }}" {% if info.hasHtml %}data-key-html="{{ info.html }}"{% endif %}>
                <div class="ascii-char-main">
                    <div class="ascii-char-print">{{ info.string }}</div>
                    <div class="ascii-char-desc">{{ info.name }}</div>
                </div>
                <div class="ascii-char-misc">
                    <div class="ascii-char-misc-item" data-copy="{{ info.decimal }}">
                        <div class="ascii-char-misc-item-head">Dec</div>
                        <div class="ascii-char-misc-item-value">{{ info.decimal }}</div>
                    </div>
                    <div class="ascii-char-misc-item" data-copy="{{ info.octal }}">
                        <div class="ascii-char-misc-item-head">Oct</div>
                        <div class="ascii-char-misc-item-value">{{ info.octal }}</div>
                    </div>
                    <div class="ascii-char-misc-item" data-copy="{{ info.hex }}">
                        <div class="ascii-char-misc-item-head">Hex</div>
                        <div class="ascii-char-misc-item-value">{{ info.hex }}</div>
                    </div>
                    {% if info.hasHtml %}
                    <div class="ascii-char-misc-item" data-copy="&amp;{{ info.html }};">
                        <div class="ascii-char-misc-item-head">HTML</div>
                        <div class="ascii-char-misc-item-value">&amp;{{ info.html }};</div>
                    </div>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
    <script type="application/json" class="js-ascii-table">{{ chars|json_encode|raw }}</script>
{% endblock %}