<div class="pr-smart-checkout-title fsz-20 fw-700 dark-text d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 pb-4 mb-4 border-bottom">
	<span class="d-flex align-items-center gap-3">
		<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
			<path d="M2.35115 20.3306L3.45034 18.7917C4.70175 17.0398 6.72222 16 8.87523 16H13.1248C15.2778 16 17.2983 17.0398 18.5497 18.7917L19.6489 20.3306M4.33333 1H17.6667C19.5076 1 21 2.49238 21 4.33333V17.6667C21 19.5076 19.5076 21 17.6667 21H4.33333C2.49238 21 1 19.5076 1 17.6667V4.33333C1 2.49238 2.49238 1 4.33333 1ZM14.6111 8.5C14.6111 10.4944 12.9944 12.1111 11 12.1111C9.00564 12.1111 7.38889 10.4944 7.38889 8.5C7.38889 6.50564 9.00564 4.88889 11 4.88889C12.9944 4.88889 14.6111 6.50564 14.6111 8.5Z" stroke="var(--pr-black-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		{{ heading_user_block }}
	</span>
	{% if not user_logged and authorization_enabled %}
		<span class="d-flex align-items-center grey-text fsz-14 fw-500 gap-1">
			{{ text_have_account }} <a onclick="octPopupLogin();" class="blue-link">{{ heading_login_block }}</a>
		</span>
	{% endif %}
</div>
<div class="row g-4 register_block">
	{% for key, field in fields %}
		<div class="col-lg-6">
			{% if field.custom_field and field.type in ['radio', 'checkbox'] %}
				<div class="form-group custom-field">
					<label class="dark-text fsz-14 fw-500 mb-1">
						{% if field.required %}<span class="required">*</span> {% endif %}
						{% if field.localization[language_id].name is not empty %}
							{{ field.localization[language_id].name }}
						{% else %}
							{{ field.name }}
						{% endif %}
					</label>

					{% if field.type == 'radio' %}
						{% for option in field.options %}
							<div class="form-check d-flex align-items-center">
								<input class="form-check-input" type="radio" name="custom_{{ field.custom_field_id }}" id="custom_{{ field.custom_field_id }}_{{ option.custom_field_value_id }}" value="{{ option.custom_field_value_id }}" {% if option.custom_field_value_id == field.value %}checked{% endif %}>
								<label for="custom_{{ field.custom_field_id }}_{{ option.custom_field_value_id }}" class="form-check-label">{{ option.name }}</label>
							</div>
						{% endfor %}
					{% elseif field.type == 'checkbox' %}
						{% for option in field.options %}
							<div class="form-check d-flex align-items-center gap-2">
								<input class="form-check-input" type="checkbox" id="custom_{{ field.custom_field_id }}_{{ option.custom_field_value_id }}" name="custom_{{ field.custom_field_id }}[]" value="{{ option.custom_field_value_id }}" {% if option.custom_field_value_id in field.value %}checked{% endif %}>
								<label for="custom_{{ field.custom_field_id }}_{{ option.custom_field_value_id }}" class="form-check-label d-flex align-items-center fsz-12 dark-text">{{ option.name }}</label>
							</div>
						{% endfor %}
					{% endif %}
				</div>
			{% else %}
				<div class="form-floating">
					{% if field.custom_field %}
						{% if field.type == 'text' %}
							<input type="text" placeholder="{% if field.localization[language_id].placeholder is not empty %}{{ field.localization[language_id].placeholder }}{% endif %}" class="form-control" id="custom_{{ field.custom_field_id }}" name="custom_{{ field.custom_field_id }}" value="{{ field.value }}">
						{% elseif field.type == 'textarea' %}
							<textarea class="form-control" placeholder="{% if field.localization[language_id].placeholder is not empty %}{{ field.localization[language_id].placeholder }}{% endif %}" id="custom_{{ field.custom_field_id }}" name="custom_{{ field.custom_field_id }}">{{ field.value }}</textarea>
						{% elseif field.type == 'date' %}
							<input type="date" class="form-control" id="custom_{{ field.custom_field_id }}" name="custom_{{ field.custom_field_id }}" value="{{ field.value }}">
						{% elseif field.type == 'datetime' %}
							<input type="datetime-local" class="form-control" id="custom_{{ field.custom_field_id }}" name="custom_{{ field.custom_field_id }}" value="{{ field.value }}">
						{% elseif field.type == 'time' %}
							<input type="time" class="form-control" id="custom_{{ field.custom_field_id }}" name="custom_{{ field.custom_field_id }}" value="{{ field.value }}">
						{% elseif field.type == 'select' %}
							<select class="form-control form-select" id="custom_{{ field.custom_field_id }}" name="custom_{{ field.custom_field_id }}">
								{% for option in field.options %}
									<option value="{{ option.custom_field_value_id }}" {% if option.custom_field_value_id == field.value %}selected{% endif %}>{{ option.name }}</option>
								{% endfor %}
							</select>
						{% endif %}
					{% else %}
						{% if key == 'telephone' %}
							<input type="tel" pattern="[0-9]*" inputmode="numeric" autocomplete="tel" class="form-control" id="{{ key }}" name="mask_telephone_display" value="{{ field.value }}">
							<input type="hidden" id="oct_full_telephone" name="telephone" value="{{ field.value }}">
						{% else %}
							<input type="{{ field.type }}" placeholder="{% if field.localization[language_id].placeholder is not empty %}{{ field.localization[language_id].placeholder }}{% elseif attribute(_context, 'entry_' ~ key) is not empty %}{{ attribute(_context, 'entry_' ~ key) }} {% endif %}" autocomplete="{% if key == 'firstname' %}given-name{% elseif key == 'lastname' %}family-name{% elseif key == 'email' %}email{% else %}off{% endif %}" class="form-control" id="{{ key }}" name="{{ key }}" value="{{ field.value }}">
						{% endif %}
					{% endif %}
					{% if key != 'telephone' %}
						<label class="px-3 secondary-text fsz-14" for="{% if field.custom_field %}custom_{{ field.custom_field_id }}{% else %}{{ key }}{% endif %}">
							{% if field.required %}<span class="required">*</span>{% endif %}
							{% if field.localization[language_id].name is not empty %}
								{{ field.localization[language_id].name }}
							{% elseif attribute(_context, 'entry_' ~ key) is not empty %}
								{{ attribute(_context, 'entry_' ~ key) }}
							{% else %}
								{{ field.name }}
							{% endif %}
						</label>
					{% endif %}
				</div>
			{% endif %}
		</div>
	{% endfor %}
	{% if not user_logged and registration_enabled %}
		<div class="col-lg-12{% if not config_checkout_guest %} d-none{% endif %}">
			<div class="form-check d-flex align-items-center gap-2">
				<input class="form-check-input" type="checkbox" name="register" onclick="$('.register-form').toggle(); formChangeData();" id="registerCheckbox" {% if register_check or not config_checkout_guest %}checked{% endif %}>
				<label class="form-check-label d-flex align-items-center fsz-12 dark-text" for="registerCheckbox">{{ text_register }}</label>
			</div>
		</div>
		<div class="form-group col-md-12 register-form mt-0"{% if not register_check %} style="display: none;"{% endif %}>
			<div class="row">
				<label class="col-md-12 dark-text fsz-14 fw-500 mb-2 mt-3" for="password">
					<span class="required">*</span> {{ entry_password }}
				</label>
				<div class="col-md-6">
					<div class="input-group password-input-group">
						<span class="input-group-text">
							<button type="button" class="no-btn button-show position-absolute" onclick="togglePasswordVisibility();">
								<svg xmlns="http://www.w3.org/2000/svg" width="19" height="16" viewBox="0 0 19 16" fill="none" role="img">
									<path d="M18.0244 6.22877C16.8124 4.199 14.0921 0.793945 9.5 0.793945C4.90786 0.793945 2.18755 4.199 0.975598 6.22877C0.341467 7.28842 0.341467 8.60571 0.975598 9.66629C2.18755 11.6961 4.90786 15.1011 9.5 15.1011C14.0921 15.1011 16.8124 11.6961 18.0244 9.66629C18.6585 8.60571 18.6585 7.28934 18.0244 6.22877ZM16.8363 8.95553C15.7748 10.7333 13.4091 13.7165 9.5 13.7165C5.59091 13.7165 3.22515 10.7342 2.16366 8.95553C1.79259 8.3334 1.79259 7.56076 2.16366 6.93863C3.22515 5.16085 5.59091 2.17761 9.5 2.17761C13.4091 2.17761 15.7748 5.15992 16.8363 6.93863C17.2083 7.56168 17.2083 8.3334 16.8363 8.95553ZM9.5 4.0246C7.33639 4.0246 5.57707 5.78484 5.57707 7.94753C5.57707 10.1102 7.33639 11.8705 9.5 11.8705C11.6636 11.8705 13.4229 10.1102 13.4229 7.94753C13.4229 5.78484 11.6636 4.0246 9.5 4.0246ZM9.5 10.4859C8.09974 10.4859 6.96163 9.34778 6.96163 7.94753C6.96163 6.54727 8.09974 5.40916 9.5 5.40916C10.9003 5.40916 12.0384 6.54727 12.0384 7.94753C12.0384 9.34778 10.9003 10.4859 9.5 10.4859Z" fill="var(--pr-black-color)"></path>
								</svg>
							</button>
						</span>
						<input type="password" name="password" oninput="updateStrengthIndicator(this.value)" value="{{ password }}" placeholder="{{ entry_password }}" id="password" autocomplete="new-password" class="form-control">
						<input type="number" class="d-none" id="length" value="12" min="8" max="24">
						<button type="button" class="no-btn button-copy position-absolute" onclick="copyToClipboard();">
							<svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg" role="img">
								<path d="M17.7863 6.06681L12.9083 1.18876C12.7707 1.0512 12.5853 0.974121 12.3911 0.974121H7.90325C5.95008 0.974121 4.83017 2.09412 4.83017 4.04729V4.87656H4.00081C2.04764 4.87656 0.927734 5.99655 0.927734 7.94973V17.901C0.927734 19.8532 2.04764 20.9741 4.00081 20.9741H11.0244C12.9776 20.9741 14.0975 19.8541 14.0975 17.901V17.0717H14.9269C16.88 17.0717 18 15.9517 18 13.9985V6.58388C18.0009 6.38973 17.9239 6.20339 17.7863 6.06681ZM13.1229 3.47266L15.5023 5.85217H14.8302C13.6009 5.85217 13.1229 5.37315 13.1229 4.14485V3.47266ZM12.6351 17.901C12.6351 19.059 12.1834 19.5107 11.0254 19.5107H4.00176C2.84274 19.5107 2.3921 19.059 2.3921 17.901V7.94973C2.3921 6.79168 2.84371 6.33997 4.00176 6.33997H4.83113V13.9985C4.83113 15.9507 5.95103 17.0717 7.9042 17.0717H12.636V17.901H12.6351ZM14.9278 15.6083H7.9042C6.74518 15.6083 6.29454 15.1566 6.29454 13.9985V4.04729C6.29454 2.88924 6.74615 2.43754 7.9042 2.43754H11.6604V4.14485C11.6604 6.18973 12.7862 7.31558 14.8311 7.31558H16.5384V13.9985C16.5375 15.1566 16.0859 15.6083 14.9278 15.6083Z" fill="var(--pr-black-color)"></path>
							</svg>
						</button>
					</div>
					<div id="strengthIndicator" class="strength-indicator mb-2"></div>
				</div>
				<div class="col-md-6 align-self-stretch">
					<button class="button button-light button-generate py-3 w-100 fsz-14" onclick="generatePassword()">{{ text_generate_password }}</button>
				</div>
			</div>
		</div>
	{% endif %}
</div>