{% extends 'br_compensations/base.html' %}
{% load humanize %}
{% load static %}
{% load i18n %}
{% block title %}{% trans "Мои потери" %}{% endblock %}

{% block extra_css %}
<style>
    .ship-icon {
        width: 32px;
        height: 32px;
        margin-right: 8px;
    }
    .portrait-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
    }
    .kill-row-pending {
        background-color: rgba(255, 193, 7, 0.1) !important;
    }
    .kill-row-exists {
        background-color: rgba(25, 135, 84, 0.1) !important;
    }
    .kill-row-rejected {
        background-color: rgba(220, 53, 69, 0.1) !important;
    }
    .loading-overlay {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 300px;
    }
    .status-badge {
        font-size: 0.75rem;
    }
</style>
<link href="/static/br_compensations/css/style.css" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="container-flex">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-0">
                            {% trans "Мои потери" %}
                            {% if character_name %}
                                <small class="text-muted">— {{ character_name }}</small>
                            {% endif %}
                        </h5>
                    </div>
                    <div>
                        <button id="refreshKills" class="btn btn-outline-secondary btn-sm">
                            <i class="fa-solid fa-arrows-rotate"></i> {% trans "Обновить" %}
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    {% if not has_valid_token %}
                    <div class="alert alert-warning">
                        <i class="fa-solid fa-triangle-exclamation"></i>
                        {% trans "Для отображения ваших потерь необходим ESI токен с разрешением esi-killmails.read_killmail.v1. Пожалуйста, авторизуйтесь через EVE SSO." %}
                    </div>
                    {% endif %}

                    <div id="loadingIndicator" class="loading-overlay">
                        <div class="text-center">
                            <i class="fa-solid fa-spinner fa-spin fa-3x text-primary"></i>
                            <p class="mt-3">{% trans "Загрузка данных с zkillboard..." %}</p>
                        </div>
                    </div>

                    <div id="errorContainer" style="display: none;">
                        <div class="alert alert-danger" id="errorMessage"></div>
                    </div>

                    <div id="killsContainer" style="display: none;">
                        <div id="killsCount" class="mb-2 text-muted"></div>
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>{% trans "Корабль" %}</th>
                                    <th>{% trans "Место" %}</th>
                                    {% comment %} <th>{% trans "Потери" %}</th>
                                    <th>{% trans "Фит" %}</th> {% endcomment %}
                                    <th>{% trans "Дата" %}</th>
                                    <th>{% trans "Статус" %}</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="killsTableBody">
                            </tbody>
                        </table>
                    </div>

                    <div id="noKillsMessage" style="display: none;">
                        <div class="alert alert-info">
                            <i class="fa-solid fa-info-circle"></i>
                            {% trans "Потери не найдены." %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Compensation Request Modal -->
<div class="modal fade" id="compensationRequestModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans "Запрос компенсации" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>{% trans "Выберите тип операции для данного килла:" %}</p>
                <div id="modalKillInfo" class="mb-3 p-3 bg-dark text-light rounded"></div>
                <div class="mb-3">
                    <label for="killTypeSelect" class="form-label fw-bold">{% trans "Тип операции" %}</label>
                    <select id="killTypeSelect" class="form-select">
                        <option value="C">{% trans "CTA (Альянс-масштаб)" %}</option>
                        <option value="H" selected>{% trans "HOMEDEF (Защита дома)" %}</option>
                        <option value="O">{% trans "OTHER (Другое)" %}</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Отмена" %}</button>
                <button type="button" class="btn btn-primary" id="confirmCompensationRequest">
                    <i class="fa-solid fa-paper-plane"></i> {% trans "Отправить запрос" %}
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_javascript %}
{{ block.super }}
<script>
    window.USER_KILLS_CONFIG = {
        characterId: {{ character_id|default:"null" }},
        hasValidToken: {% if has_valid_token %}true{% else %}false{% endif %},
        apiBaseUrl: '/br_compensations/api/user/',
    };
</script>
<script src="/static/br_compensations/js/user-kills.js" type="text/javascript"></script>
{% endblock %}