{{ header }}
<header class="background-white bottom-margin-large bottom-padding-large">
	<div class="container-fluid">
		<div class="row no-space-xs middle-xs">
			<div class="col-xs-12 col-sm-6 col-md">
				<div class="content-box top-padding-large">
					<span class="text-x-large text-dark">{{ heading_title }}</span>
					<div class="adm-breadcrumb">
						{% for breadcrumb in breadcrumbs %}
							<i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
							<a href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">{{ breadcrumb.text }}</a>
						{% endfor %}
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-sm-6 col-md-width-auto">
				<div class="content-box vertical-padding-x-large flex flex-row middle-xs">
					<a href="{{ cancel }}" class="btn-default btn-medium btn-outline right-margin-small">
						<span>{{ button_cancel }}</span>
					</a>
					<a class="btn-default btn-medium btn-primary js-submit-main-form">
						<span>{{ button_save }}</span>
					</a>
				</div>
			</div>
			<div class="col-xs-12">
				{% if error_warning %}
					<div class="warning full-width">{{ error_warning }}</div>
				{% endif %}
				{% if success %}
					<div class="success full-width">{{ success }}</div>
				{% endif %}
			</div>
		</div>
	</div>
</header>

<div class="container-fluid">
	<div class="row center-xs">
		<div class="col-xs-12 col-md-8">
			<form method="post" action="{{ action }}" class="content-box js-main-form">

				<div>
                   <div id="root"> <base-manual class="top-margin-medium" title="{{text_info}}">
            <div>{{text_manual}}</div>
          </base-manual>
        </div>
        </div>

				<div class="background-white horizontal-padding-medium shadow-small hover:shadow-large bottom-margin-medium">
					<label class="checkbox checkbox-large">
						<input type="checkbox" name="fc_back_to_top[status]" class="checkbox-entry js-floating-content-item" value="1" {{ fc_back_to_top.status ? 'checked' : '' }}>
						<span class="checkbox-text">{{ text_back_to_top }}</span>
					</label>
					<div class="horizontal-padding-large bottom-padding-large" hidden>
						<hr class="bottom-border-gray bottom-margin-medium">
						<span class="field-label">{{ text_position }}</span>
						{% for key, position in fc_back_to_top.position %}
							<label class="radio radio-medium">
								<input type="radio" name="fc_back_to_top[position]" class="radio-entry" value="{{ position.value }}" {{ position.choice ? 'checked' : '' }}>
								<span class="radio-text">{{ position.description }}</span>
							</label>
						{% endfor %}
					</div>
				</div>

				<div class="background-white horizontal-padding-medium shadow-small hover:shadow-large bottom-margin-medium">
					<label class="checkbox checkbox-large">
						<input type="checkbox" name="fc_whatsapp[status]" class="checkbox-entry js-floating-content-item" value="1" {{ fc_whatsapp.status ? 'checked' : '' }}>
						<span class="checkbox-text">{{ text_whatsapp }}</span>
					</label>
					<div class="horizontal-padding-large bottom-padding-large" hidden>
						<hr class="bottom-border-gray bottom-margin-medium">
						<label class="field field-medium{{ error_whatsapp_number ? ' field-error' : '' }}">
							<span class="field-label">{{ text_phone_number }}</span>
							<span class="field-description">{{ text_phone_number_description }}</span>
							<input type="tel" name="fc_whatsapp[number]" class="field-entry" placeholder="Ex.: 19996184543" value="{{ fc_whatsapp.number }}">
							{% if error_whatsapp_number %}
								<span class="field-error-message">{{ error_whatsapp_number }}</span>
							{% endif %}
						</label>
						<span class="field-label top-margin-large">{{ text_position }}</span>
						{% for key, position in fc_whatsapp.position %}
							<label class="radio radio-medium">
								<input type="radio" name="fc_whatsapp[position]" class="radio-entry" value="{{ position.value }}" {{ position.choice ? 'checked' : '' }}>
								<span class="radio-text">{{ position.description }}</span>
							</label>
						{% endfor %}
					</div>
				</div>

				<div class="background-white horizontal-padding-medium shadow-small hover:shadow-large bottom-margin-medium">
					<label class="checkbox checkbox-large">
						<input type="checkbox" name="fc_facebook[status]" class="checkbox-entry js-floating-content-item" value="1" {{ fc_facebook.status ? 'checked' : '' }}>
						<span class="checkbox-text">{{ text_facebook }}</span>
					</label>
					<div class="horizontal-padding-large bottom-padding-large" hidden>
						<hr class="bottom-border-gray bottom-margin-medium">
						<label class="field field-medium{{ error_facebook_page ? ' field-error' : '' }}">
							<span class="field-label">{{ text_page_name }}</span>
							<span class="field-description">{{ text_page_name_description }}</span>
							<input type="text" name="fc_facebook[page]" class="field-entry" placeholder="Ex.: SistemasFutura" value="{{ fc_facebook.page }}">
							{% if error_facebook_page %}
								<span class="field-error-message">{{ error_facebook_page }}</span>
							{% endif %}
						</label>
						<span class="field-label top-margin-large">{{ text_position }}</span>
						{% for key, position in fc_facebook.position %}
							<label class="radio radio-medium">
								<input type="radio" name="fc_facebook[position]" class="radio-entry" value="{{ position.value }}" {{ position.choice ? 'checked' : '' }}>
								<span class="radio-text">{{ position.description }}</span>
							</label>
						{% endfor %}
					</div>
				</div>

				{# <div class="background-white horizontal-padding-medium shadow-small hover:shadow-large bottom-margin-medium">
					<label class="checkbox checkbox-large">
						<input type="checkbox" name="fc_instagram[status]" class="checkbox-entry js-floating-content-item" value="1" {{ fc_instagram.status ? 'checked' : '' }}>
						<span class="checkbox-text">{{ text_instagram }}</span>
					</label>
					<div class="horizontal-padding-large bottom-padding-large" hidden>
						<hr class="bottom-border-gray bottom-margin-medium">
						{% if error_instagram_page %}
							<span class="field-error-message">{{ error_instagram_page }}</span>
						{% endif %}

						{% if showAuthorize %}
							<div class="padding-large text-center">
								<a href="{{ action_authorize }}" class="btn-default btn-medium btn-primary visible-inline-block">
									<span>{{ text_authorize }}</span>
								</a>
							</div>
						{% else %}
							{% if instagram_user_name %}
								<label class="field field-medium{{ error_instagram_page ? ' field-error' : '' }}">
									<span class="field-label">{{ text_user_name }}</span>
									<input type="text" class="field-entry" value="{{ instagram_user_name }}" disabled>
								</label>
							{% endif %}

							<span class="field-label top-margin-large">{{ text_position }}</span>
							{% for key, position in fc_instagram.position %}
								<label class="radio radio-medium">
									<input type="radio" name="fc_instagram[position]" class="radio-entry" value="{{ position.value }}" {{ position.choice ? 'checked' : '' }}>
									<span class="radio-text">{{ position.description }}</span>
								</label>
							{% endfor %}
						{% endif %}
					</div>
				</div> #}

				<div class="background-white horizontal-padding-medium shadow-small hover:shadow-large bottom-margin-medium">
					<label class="checkbox checkbox-large">
						<input type="checkbox" name="fc_popup[status]" class="checkbox-entry js-floating-content-item" value="1" {{ fc_popup.status ? 'checked' : '' }}>
						<span class="checkbox-text">{{ text_popup }}</span>
					</label>
					<div class="horizontal-padding-large bottom-padding-large" hidden>
						<hr class="bottom-border-gray bottom-margin-medium">

						<label class="field field-medium">
							<span class="field-label">{{ text_link_image }}</span>
							<input type="url" name="fc_popup[link]" class="field-entry" placeholder="Ex.: http://www.futurasistemas.com.br/" value="{{ fc_popup.link }}">
						</label>

						<label class="checkbox checkbox-large">
							<input type="checkbox" name="fc_popup[new_tab]" class="checkbox-entry" value="1" {{ fc_popup.new_tab ? 'checked' : '' }}>
							<span class="checkbox-text">{{ text_new_tab }}</span>
						</label>

						<label class="field field-medium top-margin-large">
							<span class="field-label">{{ text_describe_image }}</span>
							<span class="field-description">{{ text_describe_image_description }}</span>
							<input type="text" name="fc_popup[describe]" class="field-entry" placeholder="Ex.: Promoção de TVs com até 50% de desconto, confira!" value="{{ fc_popup.describe }}">
						</label>

						<div class="flex middle-xs">
							<div class="full-width bottom-margin-x-small">
								<span class="field-label top-margin-large">{{ text_image }}</span>
								<span class="field-description">{{ text_image_description }}</span>
							</div>
							<div class="flex-0 background-white border-gray right-margin-medium hidden-overflow cursor-pointer logo-colors" style="width: 5rem; height: 5rem;">
								<img id="popup_thumb" src="{{ fc_popup.thumb }}" class="js-open-file-manager" width="80" height="80">
								<input type="hidden" id="popup_image" name="fc_popup[image]" value="{{ fc_popup.image }}">
							</div>
							<div class="flex-1">
								<div class="flex">
									<button type="button" class="btn-default right-margin-small btn-primary btn-small js-open-file-manager">
										<span>{{ text_choice }}</span>
									</button>
									<button type="button" class="btn-default btn-outline btn-small js-btn-clear-image">
										<span>{{ text_remove }}</span>
									</button>
								</div>
							</div>
						</div>

            <div class="flex middle-xs">
              <div class="full-width bottom-margin-x-small">
                <span class="field-label top-margin-large">{{ text_mobile_image }}</span>
                <span class="field-description">{{ text_mobile_image_description }}</span>
              </div>
              <div class="flex-0 background-white border-gray right-margin-medium hidden-overflow cursor-pointer logo-colors" style="width: 5rem; height: 5rem;">
                <img id="popup_responsive_thumb" src="{{ fc_popup.responsive_thumb }}" class="responsive js-open-file-manager" width="80" height="80">
                <input type="hidden" id="popup_responsive_image" name="fc_popup[responsive_image]" value="{{ fc_popup.responsive_image }}">
              </div>
              <div class="flex-1">
                <div class="flex">
                  <button type="button" class="responsive btn-default right-margin-small btn-primary btn-small js-open-file-manager">
                    <span>{{ text_choice }}</span>
                  </button>
                  <button type="button" class="btn-default btn-outline btn-small js-btn-clear-responsive-image">
                    <span>{{ text_remove }}</span>
                  </button>
                </div>
              </div>
            </div>

					</div>
				</div>

				<div class="background-white horizontal-padding-medium shadow-small hover:shadow-large bottom-margin-medium">
					<label class="checkbox checkbox-large">
						<input type="checkbox" name="fc_exit_popup[status]" class="checkbox-entry js-floating-content-item" value="1" {{ fc_exit_popup.status ? 'checked' : '' }}>
						<span class="checkbox-text">{{ text_exit_popup }}</span>
					</label>
					<div class="horizontal-padding-large bottom-padding-large" hidden>
						<hr class="bottom-border-gray bottom-margin-medium">

						<label class="field field-medium">
							<span class="field-label">{{ text_popup_message }}</span>
							<input class="field-entry" name="fc_exit_popup[message]" type="text" placeholder="Ex: Não vá embora, temos um cupom de desconto para você!" value="{{ fc_exit_popup.message }}">
						</label>

						<label class="field field-medium top-margin-large">
							<span class="field-label">{{ text_product_list }}</span>
							<select class="field-entry" name="fc_exit_popup[product_list]">
								{% for key, modules_list in Type_Modules_List_Banner %}
									<option value="{{ key }}" {{ key == fc_exit_popup.product_list ? 'selected' : '' }}>{{ modules_list }}</option>
								{% endfor %}
							</select>
						</label>

					</div>
				</div>

			</form>
		</div>
	</div>
</div>

{{ footer }}
<script type="text/javascript">
    const DATA = {{ data|json_encode() }};
</script>