<script type="text/javascript" language="javascript">
// Современная реализация фильтра плагинов
var qShowState = 0;
// Функции для cookies будут определены ниже, используем их через setTimeout
// Инициализация из cookies произойдет при DOMContentLoaded
// Функция установки режима отображения
function setDisplayMode(mode) {
    qShowState = mode;
    // Сохраняем в cookie (функция будет доступна позже)
    if (typeof setCookie === 'function') {
        setCookie('ngadm_pstatus', qShowState, 365);
    }
    // Получаем все строки таблицы плагинов
    const rows = document.querySelectorAll('#pluginMenu table tr[class*="pluginEntry"]');
    rows.forEach(function(row) {
        let shouldShow = false;
        if (qShowState === 0) {
            // Показать все
            shouldShow = true;
        } else if (qShowState === 1 && row.classList.contains('pluginEntryActive')) {
            // Показать активные
            shouldShow = true;
        } else if (qShowState === 2 && row.classList.contains('pluginEntryInactive')) {
            // Показать неактивные
            shouldShow = true;
        } else if (qShowState === 3 && row.classList.contains('pluginEntryUninstalled')) {
            // Показать неустановленные
            shouldShow = true;
        }
        row.style.display = shouldShow ? '' : 'none';
    });
    // Обновление классов кнопок
    const btnAll = document.getElementById('pTypeAll');
    const btnActive = document.getElementById('pTypeActive');
    const btnInactive = document.getElementById('pTypeInactive');
    const btnUninstalled = document.getElementById('pTypeUninstalled');
    if (btnAll) btnAll.className = (qShowState === 0) ? 'pActive' : 'pInactive';
    if (btnActive) btnActive.className = (qShowState === 1) ? 'pActive' : 'pInactive';
    if (btnInactive) btnInactive.className = (qShowState === 2) ? 'pActive' : 'pInactive';
    if (btnUninstalled) btnUninstalled.className = (qShowState === 3) ? 'pActive' : 'pInactive';
}
</script>
<div  class="comments-area" style=" margin-bottom: 30px;">
	<div class="row mb-2">
		<div class="col-sm-3 d-none d-md-block ">
			<h3>{{ lang['extras'] }}</h3>
		</div>
		<!-- /.col -->
		<div class="col-sm-9">
			<ol class="breadcrumb float-sm-right">
				<li class="breadcrumb-item">
					<a href="{{ php_self }}">
						<i class="fa fa-home"></i>
					</a>
				</li>
				<li class="breadcrumb-item active" aria-current="page"><a href="{{ php_self }}?mod=extras">{{ lang['extras'] }}</a></li>
			</ol>
		</div>
		<!-- /.col -->
	</div>
	<!-- /.row -->
</div>
<div  class="comments-area">
<div id="pluginMenu">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width=100% colspan="8" class="contentNav">
<div id="pluginTypeMenu">
<a id="pTypeAll" class="pInactive" onclick="setDisplayMode(0);">{{ lang['list.all'] }} ({{ cntAll }})</a><span class="pSeparator">&nbsp;</span>
<a id="pTypeActive" class="pInactive" onclick="setDisplayMode(1);">{{ lang['list.active'] }} ({{ cntActive }})</a><span class="pSeparator">&nbsp;</span>
<a id="pTypeInactive" class="pInactive" onclick="setDisplayMode(2);">{{ lang['list.inactive'] }} ({{ cntInactive }})</a><span class="pSeparator">&nbsp;</span>
<a id="pTypeUninstalled" class="pInactive" onclick="setDisplayMode(3);">{{ lang['list.needinstall'] }} ({{ cntUninstalled }})</a>
</div>
&nbsp;
</td>
</tr>
<tr align="left" class="contHead">
<td>{{ lang['id'] }}</td>
<td>{{ lang['title'] }}</td>
<td>{{ lang['type'] }}</td>
<td>{{ lang['version'] }}</td>
<td>&nbsp;</td>
<td>{{ lang['description'] }}</td>
<td>{{ lang['author'] }}</td>
<td>{{ lang['action'] }}</td>
</tr>
{% for entry in entries %}
					<tr class="{{ entry.style }} all" id="plugin_{{ entry.id }}">
						<td>
							{% if entry.flags.isCompatible %}
								<i class="fa fa-check-circle-o" aria-hidden="true" style="color: green;"></i>
							{% else %}
								<i class="fa fa-window-close-o" aria-hidden="true" style="color: red;"></i>
							{% endif %}
						</td>
						<td nowrap>{{ entry.id }}
							{{ entry.new }}</td>
						<td>{{ entry.type }}</td>
						<td>{{ entry.version }}</td>
						<td nowrap>
							<a href="#" class="mr-2 open-modal" data-toggle="modal" data-target="#readmeModal" data-url="{{ entry.readme }}" title="{{ lang['entry.readme'] }}" data-bs-toggle="tooltip">
								<i class="fa fa-file-word-o" aria-hidden="true"></i>
							</a>|
							<a href="#" class="open-modal" data-toggle="modal" data-target="#historyModal" data-url="{{ entry.history }}" title="{{ lang['entry.history'] }}" data-bs-toggle="tooltip">
								<i class="fa fa-history" aria-hidden="true"></i>
							</a>
						</td>
						<td>{{ entry.description }}</td>
						<td>{{ entry.author_url }}</td>
						<td nowrap>
<a href="{{ entry.url }}" class="btn btn-outline-primary btn-sm" title="{{ lang['settings'] }}" data-bs-toggle="tooltip">
	<i class="fa fa-cog" aria-hidden="true"></i>
</a>
						{{ entry.link }}
							{{ entry.install }}
							</td>
					</tr>
				{% endfor %}
</table>
</div>
</div>
<!-- Модальное окно для README -->
<div class="modal fade" id="readmeModal" tabindex="-1" role="dialog" aria-labelledby="readmeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="readmeModalLabel">{{ lang['entry.readme'] }}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<iframe id="readmeContent" src="" style="width: 100%; height: 500px; border: none;"></iframe>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ lang['entry.close'] }}</button>
			</div>
		</div>
	</div>
</div>
<!-- Модальное окно для истории -->
<div class="modal fade" id="historyModal" tabindex="-1" role="dialog" aria-labelledby="historyModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="historyModalLabel">{{ lang['entry.history'] }}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<iframe id="historyContent" src="" style="width: 100%; height: 500px; border: none;"></iframe>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ lang['entry.close'] }}</button>
			</div>
		</div>
	</div>
</div>
 <script>
	// Функция для работы с cookie
	function setCookie(name, value, days) {
		let expires = '';
		if (days) {
			const date = new Date();
			date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
			expires = '; expires=' + date.toUTCString();
		}
		document.cookie = name + '=' + (value || '') + expires + '; path=/';
	}
	function getCookie(name) {
		const nameEQ = name + '=';
		const ca = document.cookie.split(';');
		for (let i = 0; i < ca.length; i++) {
			let c = ca[i];
			while (c.charAt(0) === ' ') c = c.substring(1, c.length);
			if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
		}
		return null;
	}
	document.addEventListener('DOMContentLoaded', function () {
		// Инициализация фильтра плагинов
		const cookieStatus = getCookie('ngadm_pstatus');
		if (cookieStatus !== null && !isNaN(Number(cookieStatus))) {
			qShowState = Number(cookieStatus);
		}
		setDisplayMode(qShowState);
		const cardsView = document.getElementById('cardsView');
		const tableView = document.getElementById('tableView');
		const tableSwitch = document.getElementById('tableViewSwitch');
		// Проверяем сохраненное значение
		const savedView = getCookie('extras_table_view');
		if (savedView === 'table') {
			tableSwitch.checked = true;
			cardsView.style.display = 'none';
			tableView.style.display = 'block';
		}
		// Обработчик переключателя
		tableSwitch.addEventListener('change', function () {
			if (this.checked) {
				setCookie('extras_table_view', 'table', 365);
				cardsView.style.display = 'none';
				tableView.style.display = 'block';
			} else {
				setCookie('extras_table_view', 'cards', 365);
				cardsView.style.display = 'block';
				tableView.style.display = 'none';
			}
		});
		// Обработчик для README в карточках
		const readmeLinks = document.querySelectorAll('.open-modal[data-target="#readmeModal"]');
		readmeLinks.forEach(link => {
			link.addEventListener('click', function () {
				const url = this.getAttribute('data-url');
				document.getElementById('readmeContent').src = url;
			});
		});
		// Обработчик для истории в карточках
		const historyLinks = document.querySelectorAll('.open-modal[data-target="#historyModal"]');
		historyLinks.forEach(link => {
			link.addEventListener('click', function () {
				const url = this.getAttribute('data-url');
				document.getElementById('historyContent').src = url;
			});
		});
		// Фильтр вкладок - работает для обоих видов
		const filterButtons = document.querySelectorAll('.nav-tabs .nav-link');
		const pluginCards = document.querySelectorAll('.plugin-card');
		const pluginRows = document.querySelectorAll('#plugin-table tr');
		function saveSelectedFilter(filter) {
			localStorage.setItem('selectedFilter', filter);
		}
		function getSavedFilter() {
			return localStorage.getItem('selectedFilter') || 'pluginEntryActive';
		}
		// Применяем сохраненный фильтр
		filterButtons.forEach(btn => btn.classList.remove('active'));
		const savedFilter = getSavedFilter();
		const activeButtons = document.querySelectorAll(`.nav-tabs .nav-link[data-filter="${savedFilter}"]`);
		activeButtons.forEach(btn => btn.classList.add('active'));
		filterCards(savedFilter);
		// Обработчик кликов по вкладкам
		filterButtons.forEach(button => {
			button.addEventListener('click', function (e) {
				e.preventDefault();
				document.querySelectorAll('.nav-tabs .nav-link').forEach(btn => btn.classList.remove('active'));
				document.querySelectorAll(`.nav-tabs .nav-link[data-filter="${this.dataset.filter}"]`).forEach(btn => btn.classList.add('active'));
				const filter = this.dataset.filter;
				saveSelectedFilter(filter);
				filterCards(filter);
			});
		});
		function filterCards(filter) {
			// Фильтр для карточек
			pluginCards.forEach(card => {
				if (filter === 'all' || card.classList.contains(filter)) {
					card.style.display = 'block';
				} else {
					card.style.display = 'none';
				}
			});
			// Фильтр для таблицы
			pluginRows.forEach(row => {
				if (filter === 'all' || row.classList.contains(filter)) {
					row.style.display = '';
				} else {
					row.style.display = 'none';
				}
			});
		}
		// Поиск
		const searchInput = document.getElementById('searchInput');
		if (searchInput) {
			searchInput.addEventListener('input', function () {
				const query = this.value.toLowerCase();
				// Поиск в карточках
				pluginCards.forEach(card => {
					const title = card.querySelector('.card-title').textContent.toLowerCase();
					if (title.includes(query)) {
						card.style.display = 'block';
					} else {
						card.style.display = 'none';
					}
				});
				// Поиск в таблице
				pluginRows.forEach(row => {
					const titleCell = row.cells && row.cells[2] ? row.cells[2] : row.querySelector('td:nth-child(3)');
					const text = (titleCell ? titleCell.textContent : row.textContent) || '';
					if (text.toLowerCase().includes(query)) {
						row.style.display = '';
					} else {
						row.style.display = 'none';
					}
				});
			});
		}
	});
</script>
