{% INCLUDE 'overall_header.html' %}

<h1>{{ lang('BANNER_SCROLL_TITLE') }}</h1>

<p>{{ lang('BANNER_SCROLL_INTRO') }}</p>

<p>{{ lang('BANNER_SCROLL_DONATE_EXPLAIN') }} {{ lang('BANNER_SCROLL_DONATE') }}</p>

{% if not S_RBS_UPLOAD_DIR_WRITABLE %}
<div class="errorbox">
	<p>{{ lang('BANNER_SCROLL_UPLOAD_DIR_WARNING', RBS_UPLOAD_DIR) }}</p>
</div>
{% endif %}

<form id="acp_banner_scroll_enable" method="post" action="{{ U_ACTION }}">
  <fieldset>
    <legend>{{ lang('BANNER_SCROLL_ENABLE') }}</legend>
        <dl>
			<dt><label for="enable_banner_scroll_yes">{{ lang('BANNER_SCROLL_ENABLE') }}{{ lang('COLON') }}</label><br /><span>{{ lang('BANNER_SCROLL_ENABLE_EXPLAIN') }}<br />{{ lang('BANNER_SCROLL_VERSION') }} {{ BANNER_VERSION }} {{ lang('BANNER_SCROLL_CHECK') }}</span></dt>
			<dd><label><input type="radio" class="radio" name="enable_banner_scroll" id="enable_banner_scroll_yes" value="1"{% if S_BANNER_SCROLL_ENABLED %} checked="checked"{% endif %} /> {{ lang('YES') }}</label>
				<label><input type="radio" class="radio" name="enable_banner_scroll" id="enable_banner_scroll_no" value="0"{% if not S_BANNER_SCROLL_ENABLED %} checked="checked"{% endif %} /> {{ lang('NO') }}</label></dd>
		</dl>
		<dl>
			<dt><label for="resize_mode_crop">{{ lang('BANNER_SCROLL_RESIZE_MODE') }}</label><br /><span>{{ lang('BANNER_SCROLL_RESIZE_EXPLAIN') }}<br />{{ lang('BANNER_SCROLL_RESIZE_NOTE') }}</span></dt>
			<dd>
				<label><input type="radio" class="radio" name="resize_mode" id="resize_mode_crop" value="crop"{% if RBS_RESIZE_MODE == 'crop' %} checked="checked"{% endif %} /> {{ lang('BANNER_SCROLL_RESIZE_CROP') }}</label>
				<label><input type="radio" class="radio" name="resize_mode" id="resize_mode_contain" value="contain"{% if RBS_RESIZE_MODE == 'contain' %} checked="checked"{% endif %} /> {{ lang('BANNER_SCROLL_RESIZE_CONTAIN') }}</label>
			</dd>
		</dl>
    <p class="submit-buttons">
		  <input class="button1" type="submit" name="enable_submit" value="{{ lang('SUBMIT') }}" />&nbsp;
		  <input class="button2" type="reset" name="reset" value="{{ lang('RESET') }}" />
    </p>
    {{ S_FORM_TOKEN }}
	</fieldset>
</form>

<form id="acp_banner_scroll_edit" method="post" action="{{ U_ACTION }}" enctype="multipart/form-data">  
  <fieldset>
    <legend>{% if B_EDIT %}{{ lang('BANNER_SCROLL_EDIT') }}{% else %}{{ lang('BANNER_SCROLL_ADD') }}{% endif %}</legend>
        <dl>
			<dt><label for="name">{{ lang('BANNER_SCROLL_NAME') }}</label><br /><span>{{ lang('BANNER_SCROLL_NAME_EXPLAIN') }}</span></dt>
			<dd><input type="text" size="40" id="name" name="name"{% if B_NAME %} value="{{ B_NAME }}"{% endif %} /></dd>
		</dl>
		<dl>
			<dt><label for="url">{{ lang('BANNER_SCROLL_URL') }}</label><br /><span>{{ lang('BANNER_SCROLL_URL_EXPLAIN') }}</span></dt>
			<dd><input type="text" size="40" id="url" name="url"{% if B_URL %} value="{{ B_URL }}"{% endif %} /></dd>
		</dl>
		<dl>
			<dt><label for="image">{{ lang('BANNER_SCROLL_IMAGE') }}</label><br /><span>{{ lang('BANNER_SCROLL_IMAGE_EXPLAIN') }}</span></dt>
			<dd><input type="text" size="40" id="image" name="image"{% if B_IMAGE %} value="{{ B_IMAGE }}"{% endif %} /></dd>
		</dl>
		<dl>
			<dt><label for="banner_file">{{ lang('BANNER_SCROLL_UPLOAD') }}</label><br /><span>{{ lang('BANNER_SCROLL_UPLOAD_EXPLAIN', RBS_MAX_UPLOAD_MB, RBS_MAX_UPLOAD_WIDTH, RBS_MAX_UPLOAD_HEIGHT, RBS_TARGET_WIDTH, RBS_TARGET_HEIGHT) }}</span></dt>
			<dd>
				<input type="file"
					id="banner_file"
					name="banner_file"
					accept="image/*"
					data-max-bytes="{{ RBS_MAX_UPLOAD_BYTES }}"
					data-max-width="{{ RBS_MAX_UPLOAD_WIDTH }}"
					data-max-height="{{ RBS_MAX_UPLOAD_HEIGHT }}"
					data-error-size="{{ lang('BANNER_SCROLL_UPLOAD_ERROR_SIZE', RBS_MAX_UPLOAD_MB) }}"
					data-error-dim="{{ lang('BANNER_SCROLL_UPLOAD_ERROR_DIMENSIONS', RBS_MAX_UPLOAD_WIDTH, RBS_MAX_UPLOAD_HEIGHT) }}" />
				<div id="banner_preview_error" class="errorbox" style="display: none;"></div>
				<div id="banner_preview" style="margin-top: 8px; {% if not B_IMAGE %}display: none;{% endif %}">
					<strong>{{ lang('BANNER_SCROLL_UPLOAD_PREVIEW') }}</strong><br />
					<img id="banner_preview_img"
						src="{% if B_IMAGE %}{{ B_IMAGE }}{% endif %}"
						alt=""
						style="width: {{ RBS_TARGET_WIDTH }}px; height: {{ RBS_TARGET_HEIGHT }}px; max-width: 100%; object-fit: {{ RBS_PREVIEW_FIT }}; border-radius: 4px; margin-top: 6px;" />
					<div id="banner_preview_meta" class="small" style="margin-top: 4px;"></div>
				</div>
			</dd>
		</dl>
    <p class="submit-buttons">
		  {% if B_EDIT %}<input type="hidden" name="edit" value="{{ B_EDIT }}" />{% endif %}
		  <input class="button1" type="submit" name="submit" value="{{ lang('SUBMIT') }}" />&nbsp;
		  <input class="button2" type="reset" name="reset" value="{{ lang('RESET') }}" />
    </p>
    {{ S_FORM_TOKEN }}
	</fieldset>
</form>

<table class="table1 zebra-table" id="down">
	<thead>
	<tr>
		<th>{{ lang('ID') }}</th>	
		<th>{{ lang('BANNER_SCROLL_IMAGE_B') }}</th>
		<th>{{ lang('BANNER_SCROLL_NAME_B') }}</th>
		<th>{{ lang('ACTION') }}</th>
	</tr>
	</thead>
	<tbody>
	{% for scroll in loops.scroll %}
		<tr>
		    <td width="10%">{{ scroll.B_ID }}</td>
			<td style="text-align: center;">
				<img src="{{ scroll.B_IMAGE }}"
					title="{{ lang('BANNER_SCROLL_URL_B') }}{{ lang('COLON') }} {{ scroll.B_URL }}"
					alt=""
					style="width: {{ RBS_TARGET_WIDTH }}px; height: {{ RBS_TARGET_HEIGHT }}px; max-width: 100%; object-fit: {{ RBS_PREVIEW_FIT }}; border-radius: 4px; display: block; margin: 0 auto;" />
			</td>
            <td>{{ scroll.B_NAME }}</td>			
			<td class="actions">
				{% if not scroll.S_FIRST_ROW %}<a href="{{ scroll.U_MOVE_UP }}">{{ ICON_MOVE_UP }}</a>{% endif %}
				{% if not scroll.S_LAST_ROW %}<a href="{{ scroll.U_MOVE_DOWN }}">{{ ICON_MOVE_DOWN }}</a>{% endif %}
				<a href="{{ scroll.U_EDIT }}">{{ ICON_EDIT }}</a>
				<a href="{{ scroll.U_DELETE }}" data-ajax="row_delete">{{ ICON_DELETE }}</a>
			</td>
		</tr>
	{% else %}
		<tr class="row3">
			<td colspan="4">{{ lang('ACP_NO_BANNER') }}</td>
		</tr>
	{% endfor %}
	</tbody>
	</table>
    <br />
	<div class="successbox">
    <div style="text-align: center;">&copy; {{ lang('BANNER_SCROLL_COPYRIGHT') }} {{ lang('BANNER_SCROLL_VERSION') }} {{ BANNER_VERSION }}</div>
	</div>

<script type="text/javascript">
// <![CDATA[
(function() {
	var input = document.getElementById('banner_file');
	var modeCrop = document.getElementById('resize_mode_crop');
	var modeContain = document.getElementById('resize_mode_contain');
	if (!input) {
		return;
	}

	var preview = document.getElementById('banner_preview');
	var previewImg = document.getElementById('banner_preview_img');
	var previewMeta = document.getElementById('banner_preview_meta');
	var errorBox = document.getElementById('banner_preview_error');

	var maxBytes = parseInt(input.getAttribute('data-max-bytes'), 10) || 0;
	var maxWidth = parseInt(input.getAttribute('data-max-width'), 10) || 0;
	var maxHeight = parseInt(input.getAttribute('data-max-height'), 10) || 0;
	var errorSize = input.getAttribute('data-error-size') || '';
	var errorDim = input.getAttribute('data-error-dim') || '';
	var targetWidth = {{ RBS_TARGET_WIDTH }};
	var targetHeight = {{ RBS_TARGET_HEIGHT }};

	function updatePreviewFit() {
		if (!previewImg) {
			return;
		}
		var fit = (modeContain && modeContain.checked) ? 'contain' : 'cover';
		previewImg.style.objectFit = fit;
	}

	function showError(message) {
		if (!errorBox) {
			return;
		}
		errorBox.innerHTML = '<p>' + message + '</p>';
		errorBox.style.display = 'block';
	}

	function clearError() {
		if (!errorBox) {
			return;
		}
		errorBox.innerHTML = '';
		errorBox.style.display = 'none';
	}

	function formatSize(bytes) {
		if (bytes < 1024) {
			return bytes + ' B';
		}
		if (bytes < 1048576) {
			return (bytes / 1024).toFixed(1) + ' KB';
		}
		return (bytes / 1048576).toFixed(2) + ' MB';
	}

	if (modeCrop) {
		modeCrop.addEventListener('change', updatePreviewFit);
	}
	if (modeContain) {
		modeContain.addEventListener('change', updatePreviewFit);
	}

	input.addEventListener('change', function() {
		clearError();
		var file = input.files && input.files[0];
		if (!file) {
			if (preview) {
				preview.style.display = 'none';
			}
			return;
		}

		if (maxBytes && file.size > maxBytes && errorSize) {
			showError(errorSize);
		}

		var reader = new FileReader();
		reader.onload = function(e) {
			if (!preview || !previewImg) {
				return;
			}

			previewImg.onload = function() {
				var width = previewImg.naturalWidth || 0;
				var height = previewImg.naturalHeight || 0;

				if (maxWidth && maxHeight && (width > maxWidth || height > maxHeight) && errorDim) {
					showError(errorDim);
				}

				if (previewMeta) {
					previewMeta.textContent = file.name + ' - ' + formatSize(file.size) + ' - ' + targetWidth + 'x' + targetHeight + ' px';
				}
			};

			previewImg.src = e.target.result;
			updatePreviewFit();
			preview.style.display = 'block';
		};
		reader.readAsDataURL(file);
	});
})();
// ]]>
</script>

{% INCLUDE 'overall_footer.html' %}