{% INCLUDECSS '@cabot_footericons/spectrum/spectrum.min.css' %}
{% INCLUDECSS '@cabot_footericons/acp_footericons.css' %}
{% INCLUDEJS '@cabot_footericons/spectrum/spectrum.min.js' %}
{% INCLUDEJS '@cabot_footericons/acp_footericons.js' %}
{% INCLUDE 'overall_header.html' %}

<h1>{{ PAGE_HEADING }}</h1>

{% if S_ERROR %}
<div class="errorbox">
	<h3>{{ lang('WARNING') }}</h3>
	<p>{{ ERROR_MSG }}</p>
</div>
{% endif %}

{% if S_ADD_EDIT %}
	<form id="acp_footericon_edit" method="post" action="{{ U_ACTION }}">
		<fieldset class="fi-edit" id="fi_edit">
			<legend class="fi-edit-legend" style="--fi-size: {{ FI_SIZE ?: '2em' }};"{% if FI_DESC %} title="{{ FI_DESC }}"{% endif %}>
				<span class="fi-stack fa-stack" style="--fi-color: {{ FI_COLOR ?: '#105289' }}; --fi-color-hover: {{ FI_COLOR_HOVER ?: '#105289' }};--fi-bgcolor: {{ FI_BGCOLOR|default('transparent') }}; --fi-bgcolor-hover: {{ FI_BGCOLOR_HOVER ?: 'transparent' }};{% if FI_SHADOW_COLOR %} --fi-shadow-color: {{ FI_SHADOW_COLOR }};{% endif %}">
					<i class="fi-icon-bg fa{% if FI_BG eq 1 %} fa-circle{% elseif FI_BG eq 2 %} fa-square{% elseif FI_BG eq 3 %} fa-stop{% endif %} fa-stack-2x" aria-hidden="true"></i>
					<i class="fi-icon {% if (FI_CODE ?: 'fa-caret-right') starts with 'fa-brands ' %}{{ FI_CODE ?: 'fa-caret-right' }}{% else %}fa {{ FI_CODE ?: 'fa-caret-right' }}{% endif %} {{ FI_BG neq 0 ? 'fa-stack-1x' : 'fa-stack-2x' }}" data-icon="{{ FI_CODE ?: 'fa-caret-right' }}" aria-hidden="true"></i>
				</span>
				<span class="fi-edit-name-preview">{{ FI_NAME ?: lang('ACP_FI_DEFAULT_TITLE') }}</span>
			</legend>

			<dl>
				<dt>
					<label for="fi-name">{{ lang('ACP_FI_NAME') ~ '*' ~ lang('COLON') }}</label><br>
					<span>{{ lang('ACP_FI_NAME_EXPLAIN') }}</span>
				</dt>
				<dd>
					<input id="fi-name" class="fi-name-input" name="fi_name" type="text" value="{{ FI_NAME }}" size="20" placeholder="{{ lang('ACP_FI_REQUIRED') }}" required>
				</dd>
			</dl>

			<dl>
				<dt>
					<label for="fi-url">{{ lang('ACP_FI_URL') ~ '*' ~ lang('COLON') }}</label><br>
					<span>{{ lang('ACP_FI_URL_EXPLAIN') }}</span>
				</dt>
				<dd>
					<input id="fi-url" name="fi_url" type="url" value="{{ FI_URL }}" size="50" placeholder="{{ lang('ACP_FI_REQUIRED') }}" required>
				</dd>
			</dl>

			<dl>
				<dt>
					<label for="fi-code">{{ lang('ACP_FI_CODE') ~ '*' ~ lang('COLON') }}</label><br>
					<span>{{ lang('ACP_FI_CODE_EXPLAIN') }}</span>
				</dt>
				<dd>
					<input id="fi-code" class="fi-code-input" name="fi_code" type="text" value="{{ FI_CODE }}" size="20" placeholder="{{ lang('ACP_FI_REQUIRED') }}" required>
					<i class="fi-input-preview fa{{ FI_CODE ? ' ' ~ FI_CODE }}" data-icon="{{ FI_CODE }}"></i>
				</dd>
			</dl>

			<dl>
				<dt>
					<label for="fi-desc">{{ lang('ACP_FI_DESC') ~ lang('COLON') }}</label><br>
					<span>{{ lang('ACP_FI_DESC_EXPLAIN') }}</span>
				</dt>
				<dd>
					<input id="fi-desc" name="fi_desc" type="text" size="50" value="{{ FI_DESC }}">
				</dd>
			</dl>

			<dl>
				<dt>
					<label>{{ lang('ACP_FI_EXTERNAL_LINK') ~ lang('COLON') }}</label><br>
					<span>{{ lang('ACP_FI_EXTERNAL_LINK_EXPLAIN') }}</span>
				</dt>
				<dd>
					<input type="radio" id="fi-open-yes" name="fi_open" value="1"{{ FI_OPEN ? ' checked' }}> <label for="fi-open-yes">{{ lang('YES') }}</label>
					<input type="radio" id="fi-open-no" name="fi_open" value="0"{{ !FI_OPEN ? ' checked' }}> <label for="fi-open-no">{{ lang('NO') }}</label>
				</dd>
			</dl>

			<dl class="">
				<dt>
					<label for="fi-color">{{ lang('ACP_FI_COLOR') ~ lang('COLON') }}</label>
				</dt>
				<dd>
					<input id="fi-color" class="fi-input-color" name="fi_color" type="text" value="{{ FI_COLOR ?: '#105289' }}" data-default-color="{{ FI_COLOR ?: '#105289' }}" data-css-var="--fi-color">
				</dd>
			</dl>

			<dl>
				<dt>
					<label for="fi-color-hover">{{ lang('ACP_FI_COLOR_HOVER') ~ lang('COLON') }}</label>
				</dt>
				<dd>
					<input id="fi-color-hover" class="fi-input-color" name="fi_color_hover" type="text" value="{{ FI_COLOR_HOVER ?: '#105289' }}" data-default-color="{{ FI_COLOR_HOVER ?: '#105289' }}" data-css-var="--fi-color-hover">
				</dd>
			</dl>

			<dl class="has-fi-bg-select has-toggler">
				<dt>
					<label for="fi-bg">{{ lang('ACP_FI_BG') ~ lang('COLON') }}</label><br>
					<span>{{ lang('ACP_FI_BG_EXPLAIN') }}</span>
				</dt>
				<dd>
					<select id="fi-bg" name="fi_bg">
						<option value="0"{{ FI_BG eq 0 ? ' selected' }}>{{ lang('ACP_FI_BG_NONE') }}</option>
						<option value="1"{{ FI_BG eq 1 ? ' selected' }}>{{ lang('ACP_FI_BG_CIRCLE') }}</option>
						<option value="2"{{ FI_BG eq 2 ? ' selected' }}>{{ lang('ACP_FI_BG_SQUARE') }}</option>
						<option value="3"{{ FI_BG eq 3 ? ' selected' }}>{{ lang('ACP_FI_BG_STOP') }}</option>
					</select>
				</dd>
			</dl>

			<dl class="is-togglable">
				<dt>
					<label for="fi-bgcolor">{{ lang('ACP_FI_BGCOLOR') ~ lang('COLON') }}</label>
				</dt>
				<dd>
					<input id="fi-bgcolor" class="fi-input-color" name="fi_bgcolor" type="text" value="{{ FI_BGCOLOR ?: 'transparent' }}" data-default-color="{{ FI_BGCOLOR ?: 'transparent' }}" data-css-var="--fi-bgcolor">
				</dd>
			</dl>

			<dl class="is-togglable">
				<dt>
					<label for="fi-bgcolor-hover">{{ lang('ACP_FI_BGCOLOR_HOVER') ~ lang('COLON') }}</label>
				</dt>
				<dd>
					<input id="fi-bgcolor-hover" class="fi-input-color" name="fi_bgcolor_hover" type="text" value="{{ FI_BGCOLOR_HOVER ?: 'transparent' }}" data-default-color="{{ FI_BGCOLOR_HOVER ?: 'transparent' }}" data-css-var="--fi-bgcolor-hover">
				</dd>
			</dl>

			<dl>
				<dt>
					<label for="fi-shadow-color">{{ lang('ACP_FI_SHADOW_COLOR') ~ lang('COLON') }}</label>
				</dt>
				<dd>
					<input id="fi-shadow-color" class="fi-input-color" name="fi_shadow_color" type="text" value="{{ FI_SHADOW_COLOR ?: 'transparent' }}" data-default-color="{{ FI_SHADOW_COLOR ?: 'transparent' }}" data-css-var="--fi-shadow-color">
				</dd>
			</dl>

		</fieldset>

		<p class="submit-buttons">
			{{ S_FORM_TOKEN }}
			<input class="button1" type="submit" name="submit" value="{{ lang('SUBMIT') }}">
			<input class="button2" type="reset" name="reset" value="{{ lang('RESET') }}">
		</p>
	</form>
{% else %}
	<form method="post" action="{{ U_ACTION }}">
		<fieldset>
			<legend>{{ lang('ACP_GENERAL_CONFIGURATION') }}</legend>
			<dl>
				<dt>
					<label for="footericons_enable">{{ lang('ACP_FI_ENABLE') ~ lang('COLON') }}</label>
				</dt>
				<dd>
					<input type="radio" class="radio" id="footericons_enable" name="footericons_enable" value="1"{{ FI_ENABLE ? ' checked' }}> {{ lang('YES') }} &nbsp;
					<input type="radio" class="radio" name="footericons_enable" value="0"{{ not FI_ENABLE ? ' checked' }}> {{ lang('NO') }}
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="footericons_position">{{ lang('ACP_FI_POSITION') ~ lang('COLON') }}</label>
				</dt>
				<dd>
					<select name="footericons_position" id="footericons_position">
						<option value="0"{{ FI_POSITION eq 0 ? ' selected' }}>{{ lang('ACP_FI_POSITION_PAGE_BODY_AFTER') }}</option>
						<option value="1"{{ FI_POSITION eq 1 ? ' selected' }}>{{ lang('ACP_FI_POSITION_COPYRIGHT_PREPEND') }}</option>
						<option value="2"{{ FI_POSITION eq 2 ? ' selected' }}>{{ lang('ACP_FI_POSITION_COPYRIGHT_APPEND') }}</option>
						<option value="3"{{ FI_POSITION eq 3 ? ' selected' }}>{{ lang('ACP_FI_POSITION_FOOTER_AFTER') }}</option>
					</select>
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="footericons_align">{{ lang('ACP_FI_ALIGN') ~ lang('COLON') }}</label>
				</dt>
				<dd>
					<select name="footericons_align" id="footericons_align">
						<option value="start"{{ FI_ALIGN eq 'start' ? ' selected' }}>{{ lang('ACP_FI_ALIGN_START') }}</option>
						<option value="center"{{ FI_ALIGN eq 'center' ? ' selected' }}>{{ lang('ACP_FI_ALIGN_CENTER') }}</option>
						<option value="end"{{ FI_ALIGN eq 'end' ? ' selected' }}>{{ lang('ACP_FI_ALIGN_END') }}</option>
					</select>
				</dd>
			</dl>
			<dl>
				<dt>
					<label for="footericons_size">{{ lang('ACP_FI_SIZE') ~ lang('COLON') }}</label>
					<br><span>{{ lang('ACP_FI_SIZE_EXPLAIN') }}</span>
				</dt>
				<dd>
					<input id="footericons_size" name="footericons_size" type="text" value="{{ FI_SIZE ?: '2em' }}" size="20">
				</dd>
			</dl>
		</fieldset>
		<p class="submit-buttons">
			{{ S_FORM_TOKEN }}
			<input class="button1" type="submit" name="submit" value="{{ lang('SUBMIT') }}">
		</p>
	</form>

	<fieldset>
		<legend>{{ lang('ACP_FI_ICONS_LIST') }}</legend>
		<table class="table1 zebra-table fi-table">
			<thead>
				<tr>
					<th class="fi-small-cell">{{ lang('ACP_FI_PREVIEW') }}</th>
					<th>{{ lang('ACP_FI_NAME') }}</th>
					<th>{{ lang('ACP_FI_URL') }}</th>
					<th>{{ lang('ACP_FI_DESC') }}</th>
					<th class="fi-small-cell">{{ lang('ACP_FI_EXTERNAL_LINK') }}</th>
					<th>{{ lang('ACTION') }}</th>
				</tr>
			</thead>
			<tbody>
				{% for icon in fi_icons %}
				<tr class="fi-row-preview">
					<td>
						<span class="fi-preview fi-icon-item fi-item-{{ loop.index }}" style="--fi-color: {{ icon.FI_COLOR }}; --fi-color-hover: {{ icon.FI_COLOR_HOVER }}; --fi-bgcolor: {{ icon.FI_BGCOLOR }}; --fi-bgcolor-hover: {{ icon.FI_BGCOLOR_HOVER }};{% if icon.FI_SHADOW_COLOR %} --fi-shadow-color: {{ icon.FI_SHADOW_COLOR }};{% endif %}">
							<a class="fi-link fa-stack{{ icon.FI_BG eq 0 ? ' fi-nobg' }}" href="{{ icon.FI_URL }}"{% if icon.FI_OPEN %} target="_blank"{% endif %} title="{{ icon.FI_DESC ?: icon.FI_NAME }}{{ icon.FI_OPEN ? ' ' ~ lang('FI_OPEN_NEW') }}">
								{% if icon.FI_BG neq 0 %}
								<i class="fi-icon-bg fa {% if icon.FI_BG eq 1 %}fa-circle{% elseif icon.FI_BG eq 2 %}fa-square{% else %}fa-stop{% endif %} fa-stack-2x" aria-hidden="true"></i>
								{% endif %}
								<i class="fi-icon fa {{ icon.FI_CODE }} {{ icon.FI_BG neq 0 ? 'fa-stack-1x' : 'fa-stack-2x' }}" aria-hidden="true"></i>
								<span class="sr-only">{{ icon.FI_NAME }}{{ icon.FI_OPEN ? ' ' ~ lang('FI_OPEN_NEW') }}</span>
							</a>
						</span>
					</td>
					<td>{{ icon.FI_NAME }}</td>
					<td>{{ icon.FI_URL }}</td>
					<td>{{ icon.FI_DESC }}</td>
					<td>{{ icon.FI_OPEN ? lang('YES') }}</td>
					<td class="actions">
						<div class="fi-actions{% if loop.length <= 1 %} fi-disabled{% endif %}">
							<span class="up-disabled" style="display:none;">{{ ICON_MOVE_UP_DISABLED }}</span>
							<span class="up"><a href="{{ icon.U_MOVE_UP }}" data-ajax="row_up">{{ ICON_MOVE_UP }}</a></span>
							<span class="down-disabled" style="display:none;">{{ ICON_MOVE_DOWN_DISABLED }}</span>
							<span class="down"><a href="{{ icon.U_MOVE_DOWN }}" data-ajax="row_down">{{ ICON_MOVE_DOWN }}</a></span>
							<a href="{{ icon.U_EDIT }}">{{ ICON_EDIT }}</a>
							<span class="apply-style-disabled">{{ ICON_STYLE_APPLY_DISABLED }}</span>
							<span class="apply-style"><a href="{{ icon.U_APPLY_STYLE }}" data-ajax="apply_style">{{ ICON_STYLE_APPLY }}</a></span>
							<a href="{{ icon.U_DELETE }}" data-ajax="fi_row_delete">{{ ICON_DELETE }}</a>
						</div>
					</td>
				</tr>
				{% endfor %}
				<tr id="fi_no_items"{{ fi_icons|length ? ' hidden' }}><td colspan="6">{{ lang('ACP_NO_ITEMS') }}</td></tr>
			</tbody>
		</table>
	</fieldset>
	<form method="post" action="{{ U_ACTION }}">
		<fieldset class="quick">
			<input type="hidden" name="action" value="add">
			<input class="button2" name="add" type="submit" value="{{ lang('ACP_FI_ICON_ADD') }}">
			{{ S_FORM_TOKEN }}
		</fieldset>
	</form>
{% endif %}
	<script>
		const noItemLang = "{{ lang('ACP_NO_ITEMS')|e('js') }}",
			defaultLegendLang = "{{ lang('ACP_FI_DEFAULT_TITLE')|e('js') }}",
			closeIconsLang = "{{ lang('ACP_FI_ICON_CLOSE')|e('js') }}",
			searchIconLang = "{{ lang('ACP_FI_ICON_SEARCH')|e('js') }}",
			iconsJsonPath = "{{ FI_EXT_PATH }}adm/style/icons.min.json";
	</script>
{% INCLUDE 'overall_footer.html' %}