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

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

{% 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" rows="6" class="form-control">{% if checks %}{% for pers in checks %}{{ pers.name }}
{% endfor %}
{% endif %}</textarea>
                </div>
                <div class="mt-2">
                    <button class="btn btn-primary">
                       {% translate "Проверить" %}
                    </button>
                    <button class="btn btn-secondary ms-1" onclick="clearCharsList()">
                       {% translate "Очистить список" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
    {% if isCheckResult %}
        <div class="card mt-4">
            <div class="card-header">
               {% translate "Результат проверки" %}
            </div>
            <div class="card-body">
                {% for character in unknown_characters %}
                    <div class="d-flex justify-content-between">
                            <span class="mw-50 w-50 min-vw-50 bg-danger border-danger rounded-3 p-2 ps-4 mb-2" style="background-image: url({% static 'images/unknown.jpg'%}); background-repeat: no-repeat; background-size: contain;">
                                <div class="ps-4 d-flex justify-content-between">
                                    <div class="pt-2">
                                        <span class="ms-4 mt-2">
                                            {{ character }} - <b>{% translate "НЕТ" %}</b>
                                        </span>
                                    </div>
                                    <div>
                                        <button class="btn btn-danger ms-4" onclick="copyToClipboard(this,'{{character}}')">
                                            <i class="fa fa-clipboard align-self-end" style="cursor: pointer"></i>
                                        </button>
                                    </div>
                                </div>
                            </span>
                        </div>
                {% endfor %}
                {% for character in known_characters %}
                    <div class="d-flex justify-content-between">
                        <span class="mw-50 w-50 min-vw-50 bg-{{character.status_class}} rounded-3 p-2 ps-4 mb-2" style="background-image: url({{character.portrait_url}}); background-repeat: no-repeat; background-size: contain;">
                            <div class="ps-4 d-flex justify-content-between">
                                <div class="pt-2">
                                    <span class="ms-4 mt-2">
                                        {{ character.nick_name }} - <b>{% translate "ДА" %}</b>
                                    </span>
                                </div>
                                <div>
                                    <button class="btn btn-{{character.status_class}} ms-4" onclick="copyToClipboard(this,'{{character.nick_name}}')">
                                        <i class="fa fa-clipboard align-self-end" style="cursor: pointer"></i>
                                    </button>
                                    {% if character.has_alts %}
                                        <button class="btn btn-{{character.status_class}}" onclick="showAltsDialog('{{character.nick_name}}', {{ character.alts_json }})">
                                            <i class="fa fa-users"></i>
                                        </button>
                                    {% endif %}
                                </div>
                            </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 "Список альтов" %} <span id="selectedCharName"></span></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(selectedChar, chars) {
        var dialog = document.getElementById('altsDialog');
        var list = document.getElementById('altsList');
        
        document.getElementById('selectedCharName').innerText = selectedChar;

        while (list.firstChild) {
            list.removeChild(list.firstChild);
        }

        if (!chars || chars.length === 0) {
            var item = document.createElement('li');
            item.textContent = 'Нет альтернативных персонажей';
            list.append(item);
        } else {
            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].corporation_ticker}] ${chars[i].nick_name}`;
                corpIcon.setAttribute('width',32);
                corpIcon.setAttribute('src',chars[i].corporation_logo_url);
                portrait.setAttribute('width', 32);
                portrait.setAttribute('src',chars[i].portrait_url);
                item.classList.add('mb-1');

                if (!chars[i].verified)
                    item.classList.add('bg-warning');


                item.append(portrait);
                item.append(corpIcon);

                var auditLink = document.createElement('a');
                auditLink.setAttribute('href',`/audit/r/${chars[i].char_id}/account/list`);
                auditLink.setAttribute('target','_blank');
                auditLink.classList.add("fa-solid","fa-square-arrow-up-right", "ms-2", "audit-link");
                //auditLink.textContent = `[${chars[i].corporation_ticker}] ${chars[i].nick_name}`;

                item.append(nickname);

                item.append(auditLink);

                if(chars[i].is_main){
                    var icn = document.createElement('i');
                    icn.classList.add("fa-solid","fa-star", "ms-4");
                    item.append(icn);
                }

                list.append(item);
            }
        }

        new bootstrap.Modal(dialog).show();
    }

    function clearCharsList(){
        document.getElementById('charslist').value = '';
        document.getElementById('charslist').innerText = '';
    }
</script>
{% endblock %}

{% block extra_css %}
<style>
    #altsList{
        padding: 0;
    }
    .character{

    }
</style>
{% endblock %}

{% block extra_script %}
{% endblock %}