{% set webRoot = constant('PIMCORE_WEB_ROOT') %}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Pimcore :: Icon list</title>
    <style type="text/css">

        body {
            font-family: Arial;
            font-size: 12px;
        }

        .icons {
            margin: 0 auto;
            display:inline-block;
            padding-top: 20px;
        }
        .icon {
            text-align: center;
            width:100px;
            height:75px;
            margin: 0 10px 20px 0;
            float: left;
            font-size: 10px;
            word-wrap: break-word;
            padding-top: 5px;
            box-sizing: border-box;
        }

        .icon img:hover {
            cursor: copy;
        }

        #white .icon {
            background-color: #0C0F12;
        }

        #white .icon .label {
            color: #fff;
        }

        #flags .icon{
            height: 100px;
        }

        .info {
            text-align: center;
            clear: both;
            font-size: 22px;
        }

        .info small {
            font-size: 16px;
        }

        .icon img {
            width: 50px;
        }

        .language-icon img{
            width: 16px;
            cursor: copy;
        }

        .variant + .icon:not(.variant){
            border: 2px dotted green;
        }
        .variant{
            display: none;
            background-color: #eee;
        }

    </style>
</head>
<body>

<div class="info">
    {% if source is defined %}
        <small>{{ source|raw }}</small>
    {% endif %}
</div>

<div id="{{ type }}" class="icons">
    <div style="margin-bottom: 20px; text-align: left">ℹ Click on icon to copy path to clipboard.</div>

    {% if extraInfo is defined %}
        <div style="margin-bottom: 20px; text-align: left">{{ extraInfo }}</div>
    {% endif %}

    {% for icon in icons %}
        {% set iconPath = icon|replace({(webRoot): ''}) %}
        {#
            Any icon with basename that has a dash will be considered as a variant to avoid recurisvely searching for "parent" icon.
            It happens that all icon that have variants have at least a prefix of 4-5 characters.
        #}
        {% if ('-' in iconPath and iconPath|basename|split('-')[0]|length > 3) and (type =='twemoji') %}
            <div class="icon variant">
                {{ icon | pimcore_twemoji_variant_icon | raw }}
                <div class="label">{{ iconPath|basename }}</div>
            </div>
        {% else %}
            <div class="icon">

                {% if type == 'flags' %}
                    {% set country = iconPath|basename|replace({'.svg': ''}) %}
                    <div class="country_name" data-isocode="{{ country }}"></div>
                {% endif %}

                {% if loop.index < 100 %}
                    {{ icon | pimcore_inline_icon | raw }}
                {% else %}
                    {{ icon | pimcore_lazy_icon | raw }}
                {% endif %}

                <div class="label">
                    {{ iconPath in iconsCss  ? '*' : '' }}
                    {{ iconPath|basename }}
                </div>
            </div>
        {% endif %}
    {% endfor %}
</div>

<script
    src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous"></script>

<script {{ pimcore_csp.getNonceHtmlAttribute()|raw }}>
    $( document ).ready(function() {

        // Add click event to copy icon path to clipboard
        $('body').on('click', 'img', function () { copyStringToClipboard($(this).data('imgpath')); });

        // Twimoji only: clicking on icon with green border displays all its variants
        $('.icon:not(.variant)').each(function () {
            let variants = $(this).prevUntil('div.icon:not(.variant)');
            if (variants.length > 0) {
                $(this).on('click', function () {
                    variants.each(function () {
                        if (!$(this).is(':visible')) {
                            let img = $(this).children('img');
                            img.attr('src', img.data('imgpath'));
                            $(this).show();
                        }
                    });
                });
            }
        });

        // Country name from country ISO code
        const regionNames = new Intl.DisplayNames(['en'], {type: 'region'});
        $('.country_name').each(function(){
            try {
                let country = regionNames.of($(this).data('isocode').toUpperCase());
                $(this).text(country);
            } catch{
                // quick workaround for the ones that breaks it, eg. Scotland and Wels
                $(this).text($(this).data('isocode'));
            }
        })

    });

    const copyStringToClipboard = function (str) {
        let selection = document.getSelection(),
            prevSelection = (selection.rangeCount > 0) ? selection.getRangeAt(0) : false,
            el;

        // create element and insert string
        el = document.createElement('textarea');
        el.value = str;
        el.setAttribute('readonly', '');
        el.style.position = 'absolute';
        el.style.left = '-9999px';

        // insert element, select all text and copy
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);

        // restore previous selection
        if (prevSelection) {
            selection.removeAllRanges();
            selection.addRange(prevSelection);
        }
    };

</script>

</body>
</html>
