{% extends 'manage/general/master.twig' %}
{% from 'macros.twig' import container_title %}

{% block manage_content %}
    <div class="container manage__emotes">
        {{ container_title('<i class="fas fa-grimace fa-fw"></i> Emoticons') }}

        <div class="manage__description">
            Here you can manage emoticons and their aliases and other properties. There are no imposed restrictions on strings (aside from being ASCII only) but if you add shit like spaces or uppercase letters I will kill you dead.
        </div>

        <div class="manage__emotes__actions">
            <a class="input__button" href="{{ url('manage-general-emoticon') }}">Add</a>
        </div>

        <div class="manage__emotes__list">
            <div class="manage__emotes__entry manage__emotes__entry--header">
                <div class="manage__emotes__entry__id">
                    ID
                </div>
                <div class="manage__emotes__entry__order">
                    Order
                </div>
                <div class="manage__emotes__entry__hierarchy">
                    Rank
                </div>
                <div class="manage__emotes__entry__image">
                    Image
                </div>
                <div class="manage__emotes__entry__actions">
                    Actions
                </div>
            </div>

            {% for emote in emotes %}
                <div id="emote-{{ emote.id }}" class="manage__emotes__entry">
                    <div class="manage__emotes__entry__id">
                        #{{ emote.id }}
                    </div>
                    <div class="manage__emotes__entry__order">
                        {{ emote.order }}
                    </div>
                    <div class="manage__emotes__entry__hierarchy">
                        {{ emote.minRank }}
                    </div>
                    <div class="manage__emotes__entry__image">
                        <img src="{{ emote.url }}" alt="{{ emote.url }}" class="emoticon manage__emotes__emoticon">
                    </div>
                    <div class="manage__emotes__entry__actions">
                        <button class="input__button input__button--autosize" title="Create Alias" onclick="createEmoteAlias({{ emote.id }}, prompt('Enter an alias for this emoticon...'))"><i class="fas fa-copy fa-fw"></i></button>
                        <a class="input__button input__button--autosize" href="{{ url('manage-general-emoticon', {'emote': emote.id}) }}" title="Edit"><i class="fas fa-edit fa-fw"></i></a>
                        <a class="input__button input__button--autosize input__button--destroy" href="{{ url('manage-general-emoticon-delete', {'emote': emote.id}) }}" title="Delete" onclick="return confirm('ARE YOU SURE ABOUT THAT?');"><i class="fas fa-times fa-fw"></i></a>
                        <a class="input__button input__button--autosize input__button--blue" href="{{ url('manage-general-emoticon-order-up', {'emote': emote.id}) }}" title="Move up"><i class="fas fa-angle-up fa-fw"></i></a>
                        <a class="input__button input__button--autosize input__button--blue" href="{{ url('manage-general-emoticon-order-down', {'emote': emote.id}) }}" title="Move down"><i class="fas fa-angle-down fa-fw"></i></a>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <script>
        function createEmoteAlias(id, alias) {
            if(!id || !alias)
                return;

            var xhr = new XMLHttpRequest;
            xhr.addEventListener('readystatechange', () => {
                if(xhr.readyState !== 4)
                    return;
                location.reload();
            });
            xhr.open('GET', "{{ url('manage-general-emoticon-alias', {'emote': '%1', 'string': '%2'})|raw }}".replace('%1', id).replace('%2', alias));
            xhr.send();
        }
    </script>
{% endblock %}