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

{% block content %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-xl-10 col-xxl-9">
            <div class="card shadow">
                <div class="card-header d-flex flex-wrap justify-content-center align-items-center justify-content-sm-between gap-3">
                    <h5 class="display-6 text-nowrap text-capitalize mb-0">Загруженные плагины PMS систем</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>Plugin Name</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for plugin_name, plugin_info in plugins.items %}
                                <tr>
                                    <td>{{ plugin_name }}</td>
                                    <td>{{ plugin_info.description|default:"No description available" }}</td>
 
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="3" class="text-center">Нет доступных плагинов.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="{% url 'admin:index' %}" class="btn btn-primary">Вернуться в админку</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="pluginCodeModal" tabindex="-1" aria-labelledby="pluginCodeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pluginCodeModalLabel">Подробнее</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h6><strong>Имя класса:</strong> <span id="className"></span></h6>
                <h6><strong>Модуль:</strong> <span id="module"></span></h6>
                <hr>
                <h6><strong>Код:</strong></h6>
                <pre><code id="pluginCode"></code></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Настройка модального окна
        const modalElement = document.getElementById('pluginCodeModal');
        const modal = new bootstrap.Modal(modalElement);

        // Обработка кнопки открытия
        document.querySelectorAll('.view-plugin').forEach(button => {
            button.addEventListener('click', () => {
                const pluginName = button.getAttribute('data-plugin-name');
                const pluginCode = button.getAttribute('data-plugin-code') || 'Code unavailable';
                const className = button.getAttribute('data-class-name') || 'Class name unavailable';
                const module = button.getAttribute('data-module') || 'Module unavailable';

                // Установка данных в модальное окно
                document.getElementById('pluginCodeModalLabel').textContent = `Plugin: ${pluginName}`;
                document.getElementById('pluginCode').textContent = pluginCode;
                document.getElementById('className').textContent = className;
                document.getElementById('module').textContent = module;

                modal.show();
            });
        });

        // Убираем размытие после закрытия
        modalElement.addEventListener('hidden.bs.modal', () => {
            const backdrop = document.querySelector('.modal-backdrop');
            if (backdrop) backdrop.remove();
            document.body.classList.remove('modal-open');
        });
    });
</script>


{% endblock %}
