{% extends 'authcheck/base.html' %}

{% load i18n %}
{% load humanize %}

{% block details %}
    <div class="card">
        <div class="card-header">
            <div class="card-title">{% translate "Список персонажей" %}</div>
        </div>
        <div class="card-body">
            <form method="POST" action="">
                <input type='hidden' name='csrfmiddlewaretoken' value="{{ csrf_token }}" />
                <div>
                    <textarea id="charslist" name="charslist" class="form-control"></textarea>
                </div>
                <div class="mt-2">
                    <button class="btn btn-primary">
                       {% translate "Проверить" %}
                    </div>
                </div>
            </form>
        </div>
    </div>
    {% if checks %}
        <div class="card mt-4">
            <div class="card-header">
               {% translate "Результат проверки" %}
            </div>
            <div class="card-body">
                    {% for result in checks %}
                        <div class="d-flex justify-content-between">
                            <span class="{% if result.exist  %}bg-success border-success{% else %}bg-danger border-danger{% endif %} rounded-3 p-2 ps-4 mb-2" style="background-image: url({% if result.exist %}{{result.portrait}}{% endif %}); background-repeat: no-repeat; background-size: contain;">
                                <div class="ps-4 d-flex justify-content-between">
                                    <span class="ms-4 mt-2">
                                        {{ result.name }} - {% if result.exist %}{% translate "ДА" %} {% else %} {% translate "НЕТ" %} {% endif %} 
                                    </span>
                                    <button class="btn {% if result.exist %}btn-success{% else %}btn-danger{% endif %} ms-4" onclick="copyToClipboard(this,'{{result.name}}')">
                                        <i class="fa fa-clipboard align-self-end" style="cursor: pointer"></i>
                                    </button>
                                    {% if result.charslist %}
                                        <button class="btn btn-success" onclick="showAltsDialog({% if result.charslist %}{{ result.alts_json }}{% endif %})">
                                            <i class="fa fa-users"></i>
                                        </button>
                                    {% endif %}
                                </div>
                            </span>
                        </div>
                    {% endfor %}
            </div>
        </div>

        <!-- Modal -->
        <div class="modal" id="altsDialog"  tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="altsModalLabel">{% translate "Список альтов" %}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <ul id="altsList" style="list-style:none;">
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Закрыть диалог" %}</button>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block extra_javascript %}
<script>
    async function copyToClipboard(sender, text) {
    try {
        await navigator.clipboard.writeText(text);
        var icon = sender.childNodes[1];
        icon.classList.remove('fa-clipboard');
        icon.classList.add('fa-check');
        
        window.setTimeout((sender)=> {
            sender.classList.add('fa-clipboard');
            sender.classList.remove('fa-check');
        }, 1000, icon);

        console.log('Content copied to clipboard successfully!');
    } catch (err) {
        console.error('Failed to copy: ', err);
    }
    }
    async function showAltsDialog(chars) {
        var dialog = document.getElementById('altsDialog');
        var list = document.getElementById('altsList');
        
        while (list.firstChild) {
            list.removeChild(list.firstChild);
        }

        for(var i = 0; i < chars.length; i++){
            var item = document.createElement('li');
            var nickname = document.createElement('span');
            var corpIcon = document.createElement('img');
            var portrait = document.createElement('img');
            nickname.textContent = chars[i].name;
            corpIcon.setAttribute('width',32);
            corpIcon.setAttribute('src',chars[i].corp_icon);
            portrait.setAttribute('width', 32);
            portrait.setAttribute('src',chars[i].portrait);
            item.append(portrait);
            item.append(corpIcon);
            item.append(nickname);
            list.append(item);
        }

        new bootstrap.Modal(dialog).show();
    }
</script>
{% endblock %}

{% block extra_css %}
{% endblock %}

{% block extra_script %}
{% endblock %}