<div class="container-fluid">
	<div class="row mb-2">
		<div class="col-sm-6 d-none d-md-block ">
			<h1 class="m-0 text-dark">{{ lang['images_title'] }}</h1>
		</div>
		<div class="col-sm-6">
			<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">{{ lang['images_title'] }}</li>
			</ol>
		</div>
	</div>
</div>
<style>
	/* Simple Lightbox Styles */
	.lightbox-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.85);
		z-index: 9999;
		cursor: pointer;
	}
	.lightbox-overlay.active {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.lightbox-content {
		position: relative;
		max-width: 90%;
		max-height: 90vh;
		cursor: default;
	}
	.lightbox-content img {
		max-width: 100%;
		max-height: 90vh;
		display: block;
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
	}
	.lightbox-close {
		position: absolute;
		top: -40px;
		right: 0;
		color: white;
		font-size: 32px;
		font-weight: bold;
		background: none;
		border: none;
		cursor: pointer;
		padding: 5px 15px;
		opacity: 0.8;
		transition: opacity 0.3s;
	}
	.lightbox-close:hover {
		opacity: 1;
	}
	.lightbox-info {
		position: absolute;
		bottom: -40px;
		left: 0;
		right: 0;
		color: white;
		text-align: center;
		font-size: 14px;
	}
</style>
<div id="collapseImagesFilter" class="collapse">
	<div class="card mb-4">
		<div class="card-body">
			<form action="{{ php_self }}" method="get" name="options_bar">
				<input type="hidden" name="mod" value="images"/>
				<input type="hidden" name="action" value="list"/>
				<input type="hidden" name="area" value="{{ area }}"/>
				<div class="row">
					<div class="col-lg-3">
						<div class="form-group">
							<label>{{ lang['month'] }}</label>
							<select name="postdate" class="custom-select">
								<option selected value="">-
									{{ lang['all'] }}
									-</option>
								{{ dateslist|raw }}
							</select>
						</div>
					</div>
					<div class="col-lg-3">
						<div class="form-group">
							<label>{{ lang['category'] }}</label>
							{{ dirlistcat|raw }}
						</div>
					</div>
					<div class="col-lg-3">
						<div class="form-group">
							{% if status %}
								<label>{{ lang['author'] }}</label>
								<select name="author" class="custom-select">
									<option value="">-
										{{ lang['all'] }}
										-</option>
									{{ authorlist|raw }}
								</select>
							{% endif %}
						</div>
					</div>
					<div class="col-lg-3">
						<div class="form-group">
							<label>{{ lang['per_page'] }}</label>
							<input type="text" name="npp" value="{{ npp }}" class="form-control"/>
						</div>
						<div class="form-group mb-0 text-right">
							<button type="submit" class="btn btn-outline-primary">{{ lang['show'] }}</button>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<form id="delform" name="imagedelete" action="{{ php_self }}?mod=images" method="post">
	<input type="hidden" name="area" value="{{ area }}"/>
	<div class="card">
		<div class="card-header">
			<div class="d-flex">
				<div class="d-flex mr-2">
					<div class="custom-control custom-switch py-2 mr-2">
						<input id="tableViewSwitch" type="checkbox" class="custom-control-input"/>
						<label for="tableViewSwitch" class="custom-control-label">Табличный вид</label>
					</div>
					<div id="previewSwitchContainer" class="custom-control custom-switch py-2" style="display: none;">
						<input id="previewSwitch" type="checkbox" class="custom-control-input"/>
						<label for="previewSwitch" class="custom-control-label">Показать превью</label>
					</div>
				</div>
				<div class="custom-control custom-switch py-2 mr-auto">
					<input id="masterCheckbox" type="checkbox" class="custom-control-input" title="{{ lang['select_all'] }}" onclick="toggleAllImages(this)"/>
					<label for="masterCheckbox" class="custom-control-label">{{ lang['select_all_images']|default('Выделить все изображения') }}</label>
				</div>
				<button type="button" class="btn btn-outline-success ml-1" data-toggle="modal" data-target="#uploadImagesModal" data-backdrop="static">{{ lang['upload_img'] }}</button>
				{% if status %}
					<button type="button" class="btn btn-outline-primary ml-1" data-toggle="modal" data-target="#categoriesModal" data-backdrop="static" title="{{ lang['categories'] }}" data-bs-toggle="tooltip">
						<i class="fa fa-folder-open-o"></i>
					</button>
				{% endif %}
				<button type="button" class="btn btn-outline-primary ml-1" data-toggle="collapse" data-target="#collapseImagesFilter" title="{{ lang['filter']|default('Фильтр') }}" data-bs-toggle="tooltip">
					<i class="fa fa-filter"></i>
				</button>
			</div>
		</div>
		<!-- Карточный вид -->
		<div id="cardsView" class="row">
			<div class="col-12">
				<div class="panel-body">
					<div class="row">
						{% for entry in entries %}
							<!-- Карточный вид -->
							<div class="col-sm-12 col-md-6 col-lg-3 entry-card" data-id="{{ entry.id }}" data-filename="{{ entry.file_name }}" data-folder="{{ entry.folder }}" data-user="{{ entry.user }}" data-width="{{ entry.width }}" data-height="{{ entry.height }}" data-size="{{ entry.size }}" data-editlink="{{ entry.edit_link }}">
								<div class="cuadro_intro_hover " style="background-color:#cccccc;">
									<p class="cuadro" style="text-align:center; margin-top:20px;">
										{{ entry.preview_img|raw }}
									</p>
									<div class="caption">
										<div class="blur"></div>
										<div class="caption-text">
											<h6><input type="checkbox" name="files[]" value="{{ entry.id }}" class="check" data-toggle="tooltip" title="Выбрать" data-bs-toggle="tooltip"/>
												{{ entry.file_name }}<a data-toggle="tooltip" href="{{ entry.edit_link }}" title="{{ lang['edit']|default('Редактировать') }}" data-bs-toggle="tooltip">
													<i class="fa fa-pencil-square-o" style=" position: absolute; right: 7px; margin: 4px 0px;"></i>
												</a>
											</h6>
											<p>Категория :
												{{ entry.folder }}</p>
											<p>Загрузил :
												{{ entry.user }}</p>
											<p>SIZE :<span class="img-width">{{ entry.width }}</span>x<span class="img-height">{{ entry.height }}</span>
												{{ entry.size }}</p>
											<p>Просмотр :
												<a class="view-full lightbox-trigger" data-toggle="tooltip" href="{{ images_url }}/{{ entry.folder }}/{{ entry.name|default(entry.file_name) }}" data-lightbox-title="{{ entry.name|default(entry.file_name) }} ({{ entry.width }}x{{ entry.height }}, {{ entry.size }})" title="Полное изображение" data-bs-toggle="tooltip">
													<i class="fa fa-search-plus" aria-hidden="true"></i>
												</a>
												<a class="view-thumb lightbox-trigger" data-toggle="tooltip" href="{{ images_url }}/{{ entry.folder }}/thumb/{{ entry.name|default(entry.file_name) }}" data-lightbox-title="{{ entry.name|default(entry.file_name) }} (preview)" title="Уменьшенное изображение" data-bs-toggle="tooltip">
													<i class="fa fa-search-minus" aria-hidden="true"></i>
												</a>
											</p>
											<p>Вставка:
												<a class="insert-full" data-toggle="tooltip" href="javascript:insertimage('[img=&quot;{{ images_url }}/{{ entry.folder }}/{{ entry.name|default(entry.file_name) }}&quot; border=&quot;0&quot; width=&quot;{{ entry.width }}&quot; height=&quot;{{ entry.height }}&quot; align=&quot;&quot;]{{ entry.name|default(entry.file_name) }} ({{ entry.size }})[/img]', '')" title="Полное изображение" data-bs-toggle="tooltip">
													<i class="fa fa-share-square-o" aria-hidden="true"></i>
												</a>
												<a class="insert-preview" data-toggle="tooltip" href="javascript:insertimage('[url=&quot;{{ images_url }}/{{ entry.folder }}/{{ entry.name|default(entry.file_name) }}&quot; target=&quot;_blank&quot;][img=&quot;{{ images_url }}/{{ entry.folder }}/thumb/{{ entry.name|default(entry.file_name) }}&quot; border=&quot;0&quot; align=&quot;&quot;]{{ entry.name|default(entry.file_name) }} ({{ entry.size }})[/img][/url]', '')" title="Вставка превью с сылкой на полное изображение" data-bs-toggle="tooltip">
													<i class="fa fa-search-plus" aria-hidden="true"></i>
												</a>
												<a class="insert-thumb" data-toggle="tooltip" href="javascript:insertimage('[img=&quot;{{ images_url }}/{{ entry.folder }}/thumb/{{ entry.name|default(entry.file_name) }}&quot; border=&quot;0&quot; align=&quot;&quot;]{{ entry.name|default(entry.file_name) }}[/img]', '')" title="Вставка уменьшенного изображения" data-bs-toggle="tooltip">
													<i class="fa fa-search-minus" aria-hidden="true"></i>
												</a>
											</p>
										</div>
									</div>
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
		<!-- Табличный вид -->
		<div id="tableView" class="table-responsive" style="display: none;">
			<table id="entriesTable" class="table table-sm mb-0">
				<thead>
					<tr>
						<th colspan="3" width="80">{{ lang['header.insert']|default('Вставка') }}</th>
						<th class="preview-column">{{ lang['show_preview']|default('Превью') }}</th>
						<th>{{ lang['name']|default('Название') }}</th>
						<th colspan="2">{{ lang['header.view']|default('Вид') }}</th>
						<th colspan="2">{{ lang['size']|default('Размер') }}</th>
						<th>{{ lang['category']|default('Категория') }}</th>
						<th>{{ lang['author']|default('Автор') }}</th>
						<th>{{ lang['action']|default('Действия') }}</th>
						<th>
							<input class="check" type="checkbox" title="{{ lang['select_all'] }}" onclick="toggleAllImages(this)"/>
						</th>
					</tr>
				</thead>
				<tbody id="entriesTableBody">
					{% for entry in entries %}
						<!-- Табличный вид (скрыт по умолчанию) -->
						<tr class="entry-row" style="display: none;">
							<td>
								<a href="#" data-toggle="tooltip" onclick="insertimage('[img=&quot;{{ images_url }}/{{ entry.folder }}/{{ entry.name|default(entry.file_name) }}&quot; border=&quot;0&quot; width=&quot;{{ entry.width }}&quot; height=&quot;{{ entry.height }}&quot; align=&quot;&quot;]{{ entry.name|default(entry.file_name) }} ({{ entry.size }})[/img]', ''); return false;" title="Полное изображение" data-bs-toggle="tooltip">
									<i class="fa fa-share-square-o"></i>
								</a>
							</td>
							<td>
								<a href="#" data-toggle="tooltip" onclick="insertimage('[url=&quot;{{ images_url }}/{{ entry.folder }}/{{ entry.name|default(entry.file_name) }}&quot; target=&quot;_blank&quot;][img=&quot;{{ images_url }}/{{ entry.folder }}/thumb/{{ entry.name|default(entry.file_name) }}&quot; border=&quot;0&quot; align=&quot;&quot;]{{ entry.name|default(entry.file_name) }} ({{ entry.size }})[/img][/url]', ''); return false;" title="Вставка превью с сылкой на полное изображение" data-bs-toggle="tooltip">
									<i class="fa fa-search-plus"></i>
								</a>
							</td>
							<td>
								<a href="#" data-toggle="tooltip" onclick="insertimage('[img=&quot;{{ images_url }}/{{ entry.folder }}/thumb/{{ entry.name|default(entry.file_name) }}&quot; border=&quot;0&quot; align=&quot;&quot;]{{ entry.name|default(entry.file_name) }}[/img]', ''); return false;" title="Вставка уменьшенного изображения" data-bs-toggle="tooltip">
									<i class="fa fa-search-minus"></i>
								</a>
							</td>
							<td class="preview-column"><img src="{{ images_url }}/{{ entry.folder }}/thumb/{{ entry.name|default(entry.file_name) }}" style="max-width: 100px; max-height: 100px;"></td>
							<td>{{ entry.file_name }}</td>
							<td>
								<a class="lightbox-trigger" href="{{ images_url }}/{{ entry.folder }}/{{ entry.name|default(entry.file_name) }}" data-lightbox-title="{{ entry.name|default(entry.file_name) }} ({{ entry.width }}x{{ entry.height }}, {{ entry.size }})" title="Полное изображение" data-bs-toggle="tooltip">
									<i class="fa fa-search-plus"></i>
								</a>
							</td>
							<td>
								<a class="lightbox-trigger" href="{{ images_url }}/{{ entry.folder }}/thumb/{{ entry.name|default(entry.file_name) }}" data-lightbox-title="{{ entry.name|default(entry.file_name) }} (preview)" title="Уменьшенное изображение" data-bs-toggle="tooltip">
									<i class="fa fa-search-minus"></i>
								</a>
							</td>
							<td>{{ entry.width }}x{{ entry.height }}</td>
							<td nowrap>{{ entry.size }}</td>
							<td>{{ entry.folder }}</td>
							<td>{{ entry.user }}</td>
							<td>
								<a href="{{ entry.edit_link }}" title="Редактировать" data-bs-toggle="tooltip">
									<i class="fa fa-pencil"></i>
								</a>
							</td>
							<td><input type="checkbox" name="files[]" value="{{ entry.id }}"/></td>
						</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>
		<div class="card-footer">
			<div class="row">
				<div class="col-lg-6 mb-2 mb-lg-0">{{ pagesss|raw }}</div>
				<div class="col-lg-6">
					{% if status %}
						<div class="input-group">
							<select name="subaction" class="custom-select">
								<option value="">--
									{{ lang['action'] }}
									--</option>
								<option value="delete">{{ lang['delete'] }}</option>
								<option value="move">{{ lang['move'] }}</option>
							</select>
							{{ dirlist|raw }}
							<div class="input-group-append">
								<button type="submit" class="btn btn-outline-warning">OK</button>
							</div>
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</form>
<div id="uploadImagesModal" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 id="uploadImagesModalLabel" class="modal-title">{{ lang['upload_img'] }}</h5>
				<button type="button" class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<ul class="nav nav-tabs" role="tablist">
				<li class="nav-item">
					<a class="nav-link active" id="upload-tab" data-toggle="tab" href="#uploadTab" role="tab">{{ lang['upload_img']|default('Загрузка файлов') }}</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="url-tab" data-toggle="tab" href="#urlTab" role="tab">{{ lang['upload_img_url']|default('По ссылке') }}</a>
				</li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane fade show active" id="uploadTab" role="tabpanel">
					<form id="uploadnew_form" action="{{ php_self }}?mod=images" method="post" enctype="multipart/form-data" name="sn">
						<input type="hidden" name="subaction" value="upload"/>
						<input type="hidden" name="area" value="{{ area }}"/>
						<div class="modal-body">
							<div class="form-group row">
								<label class="col-sm-4 col-form-label">{{ lang['category'] }}</label>
								<div class="col-sm-8">{{ dirlistS|raw }}</div>
							</div>
							<div class="form-group row">
								<div class="col-sm-8 offset-4">
									<label class="col-form-label d-block"><input id="flagReplace" type="checkbox" name="replace" value="1"/>
										{{ lang['do_replace'] }}</label>
									<label class="col-form-label d-block"><input id="flagRand" type="checkbox" name="rand" value="1"/>
										{{ lang['do_rand'] }}</label>
									<label class="col-form-label d-block"><input id="flagThumb" type="checkbox" name="thumb" value="1" {{ thumb_mode }} {{ thumb_checked }}/>
										{{ lang['do_preview'] }}</label>
									<label class="col-form-label d-block"><input id="flagStamp" type="checkbox" name="stamp" value="1" {{ stamp_mode }} {{ stamp_checked }}/>
										{{ lang['do_wmimage'] }}</label>
								</div>
							</div>
							<div class="table-responsive">
								<table id="imageup" class="table table-sm">
									<tbody>
										<tr id="row">
											<td width="10">1:</td>
											<td><input id="fileUploadInput" type="file" name="userfile[0]"/></td>
										</tr>
									</tbody>
								</table>
							</div>
							<div id="showRemoveAddButtoms" class="form-group text-right">
								<div class="btn-group btn-group-sm" role="group">
									<button type="button" onclick="AddImages();return false;" class="btn btn-outline-success">{{ lang['onemore'] }}</button>
									<button type="button" onclick="RemoveImages();return false;" class="btn btn-outline-danger">{{ lang['delone'] }}</button>
								</div>
							</div>
						</div>
						<div class="modal-footer text-right">
							<button type="submit" class="btn btn-outline-success">{{ lang['upload'] }}</button>
						</div>
					</form>
				</div>
				<div class="tab-pane fade" id="urlTab" role="tabpanel">
					<form action="{{ php_self }}?mod=images" method="post" name="snup">
						<input type="hidden" name="subaction" value="uploadurl"/>
						<input type="hidden" name="area" value="{{ area }}"/>
						<div class="modal-body">
							<div class="form-group row">
								<label class="col-sm-4 col-form-label">{{ lang['category'] }}</label>
								<div class="col-sm-8">{{ dirlistS|raw }}</div>
							</div>
							<div class="form-group row">
								<div class="col-sm-8 offset-sm-4">
									<label class="col-form-label d-block"><input id="replace2" type="checkbox" name="replace" value="1"/>
										{{ lang['do_replace'] }}</label>
									<label class="col-form-label d-block"><input id="rand2" type="checkbox" name="rand" value="1"/>
										{{ lang['do_rand'] }}</label>
									<label class="col-form-label d-block"><input id="thumb2" type="checkbox" name="thumb" value="1" {{ thumb_mode }} {{ thumb_checked }}/>
										{{ lang['do_preview'] }}</label>
									<label class="col-form-label d-block"><input id="stamp2" type="checkbox" name="stamp" value="1" {{ stamp_mode }} {{ stamp_checked }}/>
										{{ lang['do_wmimage'] }}</label>
								</div>
							</div>
							<div class="table-responsive">
								<table id="imageup2" class="table table-sm">
									<tbody>
										<tr id="row">
											<td width="10">1:</td>
											<td><input type="text" name="userurl[0]" class="form-control"/></td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="form-group text-right">
								<div class="btn-group btn-group-sm" role="group">
									<button type="button" onclick="AddImages2();return false;" class="btn btn-outline-success">{{ lang['onemore'] }}</button>
									<button type="button" onclick="RemoveImages2();return false;" class="btn btn-outline-danger">{{ lang['delone'] }}</button>
								</div>
							</div>
						</div>
						<div class="modal-footer text-right">
							<button type="submit" class="btn btn-outline-success">{{ lang['upload'] }}</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
{% if status %}
	<div id="categoriesModal" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 id="categoriesModalLabel" class="modal-title">{{ lang['categories'] }}</h5>
					<button type="button" class="close" data-dismiss="modal">
						<span>&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<form action="{{ php_self }}?mod=images" method="post" name="newcat">
						<input type="hidden" name="subaction" value="newcat"/>
						<input type="hidden" name="area" value="{{ area }}"/>
						<div class="form-group row">
							<label class="col-sm-4 col-form-label">{{ lang['addnewcat'] }}</label>
							<div class="col-sm-8">
								<div class="input-group mb-3">
									<input type="text" name="newfolder" class="form-control"/>
									<div class="input-group-append">
										<button type="submit" class="btn btn-outline-success">OK</button>
									</div>
								</div>
							</div>
						</div>
					</form>
					<form action="{{ php_self }}?mod=images" method="post" name="delcat">
						<input type="hidden" name="subaction" value="delcat"/>
						<input type="hidden" name="area" value="{{ area }}"/>
						<div class="form-group row">
							<label class="col-sm-4 col-form-label">{{ lang['delcat'] }}</label>
							<div class="col-sm-8">
								<div class="input-group mb-3">
									{{ dirlist|raw }}
									<div class="input-group-append">
										<button type="submit" class="btn btn-outline-danger">OK</button>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
{% endif %}
 <script type="text/javascript">
	// Функция для работы с 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 cardsView = document.getElementById('cardsView');
		const tableView = document.getElementById('tableView');
		const tableSwitch = document.getElementById('tableViewSwitch');
		const previewSwitch = document.getElementById('previewSwitch');
		const previewSwitchContainer = document.getElementById('previewSwitchContainer');
		// Проверяем сохраненное значение вида
		const savedView = getCookie('img_view_mode');
		if (savedView === 'table') {
			tableSwitch.checked = true;
			switchToTableView();
		}
		// Проверяем сохраненное значение превью
		const savedPreview = getCookie('img_preview');
		if (savedPreview === '0') {
			previewSwitch.checked = false;
			togglePreviewColumn(false);
		} else {
			previewSwitch.checked = true;
		}
		// Обработчик переключателя вида
		tableSwitch.addEventListener('change', function () {
			if (this.checked) {
				setCookie('img_view_mode', 'table', 365);
				switchToTableView();
			} else {
				setCookie('img_view_mode', 'cards', 365);
				switchToCardsView();
			}
		});
		// Обработчик переключателя превью
		previewSwitch.addEventListener('change', function () {
			const showPreview = this.checked;
			setCookie('img_preview', showPreview ? '1' : '0', 365);
			togglePreviewColumn(showPreview);
		});
		function switchToTableView() {
			cardsView.style.display = 'none';
			tableView.style.display = 'block';
			previewSwitchContainer.style.display = 'block';
			// Показываем строки таблицы, скрываем карточки
			document.querySelectorAll('.entry-card').forEach(card => card.style.display = 'none');
			document.querySelectorAll('.entry-row').forEach(row => row.style.display = '');
		}
		function switchToCardsView() {
			cardsView.style.display = 'block';
			tableView.style.display = 'none';
			previewSwitchContainer.style.display = 'none';
			// Показываем карточки, скрываем строки таблицы
			document.querySelectorAll('.entry-card').forEach(card => card.style.display = '');
			document.querySelectorAll('.entry-row').forEach(row => row.style.display = 'none');
		}
		function togglePreviewColumn(show) {
			const displayValue = show ? '' : 'none';
			document.querySelectorAll('.preview-column').forEach(col => {
				col.style.display = displayValue;
			});
		}
	});
</script>
 <script type="text/javascript">
function AddImages() {
var tbl = document.getElementById('imageup');
var lastRow = tbl.rows.length;
var iteration = lastRow + 1;var row = tbl.insertRow(lastRow);
var cellRight = row.insertCell(0);
cellRight.innerHTML = '<span>' + iteration + ': </span>';
cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'file');
el.setAttribute('name', 'userfile[' + iteration + ']');
el.setAttribute('size', '60');
el.setAttribute('value', iteration);
cellRight.appendChild(el);
}
function RemoveImages() {
var tbl = document.getElementById('imageup');
var lastRow = tbl.rows.length;
if (lastRow > 1) {
tbl.deleteRow(lastRow - 1);
}
}
function AddImages2() {
var tbl = document.getElementById('imageup2');
var lastRow = tbl.rows.length;
var iteration = lastRow + 1;
var row = tbl.insertRow(lastRow);
var cellRight = row.insertCell(0);
cellRight.innerHTML = '<span>' + iteration + ': </span>';
cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'userurl[' + iteration + ']');
el.setAttribute('size', '60');
el.setAttribute('class', 'form-control');
cellRight.appendChild(el);
}
function RemoveImages2() {
var tbl = document.getElementById('imageup2');
var lastRow = tbl.rows.length;
if (lastRow > 1) {
tbl.deleteRow(lastRow - 1);
}
}
</script>
 <script type="text/javascript">
	// Функция для выделения/снятия выделения всех изображений
	function toggleAllImages(masterCheckbox) {
		const isChecked = masterCheckbox.checked;
		const imageCheckboxes = document.querySelectorAll('input[name="files[]"]');
		imageCheckboxes.forEach(checkbox => {
			// Проверяем, что checkbox видим (его родитель не скрыт)
			if (checkbox.value && checkbox.offsetParent !== null) {
				checkbox.checked = isChecked;
			}
		});
	}
</script>
 <script type="text/javascript">
		$(document).ready(function () {
// Показ/скрытие селекта категории при выборе действия "Переместить"
$('#delform').on('change input', function () {
	var form = this;
	if (form && form.elements && form.elements.subaction) {
		var show = (form.elements.subaction.value === 'move');
		if (form.elements.category) {
			$(form.elements.category).toggle(show);
		}
	}
}).trigger('change');
$('#uploadnew_form').on('submit', function (e) {
e.preventDefault();
$('#uploadImagesModal').on('hidden.bs.modal', function () {
document.location = document.location;
});
$('#fileUploadInput').uploadifive('upload');
});
var fileCounter = 1;
var uploader = $('#fileUploadInput').uploadifive({
auto: false,
uploadScript:'{{ admin_url }}/rpc.php?methodName=admin.files.upload',
cancelImg:'{{ skins_url }}/images/up_cancel.png',
folder: '',
fileExt:'{{ listExt }}',
fileDesc:'{{ descExt }}',
sizeLimit:'{{ maxSize }}',
multi: true,
buttonText: 'Выбрать изображение ...',
width: 200,
onInit: function () {
$('#showRemoveAddButtoms').hide();
$('#flagThumb').prop('checked', true).prop('disabled', true).parent().hide();
},
onUpload: function (filesToUpload) {
var formData = {
ngAuthCookie:'{{ authcookie }}',
uploadType: 'image',
category: $('#categorySelect').val(),
rand: $('#flagRand').is(':checked') ? 1 : 0,
replace: $('#flagReplace').is(':checked') ? 1 : 0,
thumb: 1,
stamp: $('#flagStamp').is(':checked') ? 1 : 0,
forceRename: 1
};
$.each(this.fileQueue, function (index, file) {
if (file.newName) {
formData['newFilename_' + index] = file.newName;
}
});
uploader.data('uploadifive').settings.formData = formData;
},
onAdd: function (file) {
try {
var originalName = file.name;
var extension = originalName.split('.').pop().toLowerCase().substring(0, 4);
var newName = (fileCounter++).toString().padStart(3, '0') + '.' + extension;
if (newName.length > 22) {
newName = newName.substring(0, 22);
}
file.newName = newName;
file.name = newName;
return true;
} catch (e) {
console.error('Error renaming file:', e);
return true;
}
},
onUploadComplete: function (fileObj, data) {
try {
var response = JSON.parse(data);
fileObj.queueItem.find('.fileinfo').replaceWith(response.status ? '<div class="text-info">' + response.errorText + '</div>' : '<div class="text-danger">(' + response.errorCode + ') ' + response.errorText + ' ' + response.errorDescription + '</div>');
} catch (e) {
console.error('Error processing upload response:', e);
}
},
onError: function (errorType, file) {
console.error('Upload error:', errorType, file);
}
});
});
</script>
<!-- Simple Lightbox Modal -->
	<div class="lightbox-overlay" id="imageLightbox"> <div class="lightbox-content">
		<button class="lightbox-close" id="lightboxClose">&times;</button>
		<img id="lightboxImage" src="" alt="">
		<div class="lightbox-info" id="lightboxInfo"></div>
	</div>
</div>
 <script type="text/javascript">
// Simple Lightbox functionality
(function() {
	const lightbox = document.getElementById('imageLightbox');
	const lightboxImg = document.getElementById('lightboxImage');
	const lightboxInfo = document.getElementById('lightboxInfo');
	const lightboxClose = document.getElementById('lightboxClose');
	if (!lightbox || !lightboxImg) return;
	// Open lightbox
	document.addEventListener('click', function(e) {
		const trigger = e.target.closest('.lightbox-trigger');
		if (trigger) {
			e.preventDefault();
			const imgSrc = trigger.getAttribute('href');
			const imgTitle = trigger.getAttribute('data-lightbox-title') || '';
			lightboxImg.src = imgSrc;
			lightboxInfo.textContent = imgTitle;
			lightbox.classList.add('active');
		}
	});
	// Close lightbox
	function closeLightbox() {
		lightbox.classList.remove('active');
		setTimeout(function() {
			lightboxImg.src = '';
		}, 300);
	}
	lightboxClose.addEventListener('click', function(e) {
		e.stopPropagation();
		closeLightbox();
	});
	lightbox.addEventListener('click', function(e) {
		if (e.target === lightbox) {
			closeLightbox();
		}
	});
	// Close on ESC key
	document.addEventListener('keydown', function(e) {
		if (e.key === 'Escape' && lightbox.classList.contains('active')) {
			closeLightbox();
		}
	});
})();
</script>
