<h1 class="breaking-headline">{txt key=TEXT_PAGE_TITLE_LOGIN}</h1>

{$message}
{hook key=login_top}

<div class="row">
    {hook key=login_returning_top}
    <div class="col col-md-6 col-md-push-6">
        <p class="h3 text-primary"><i class="fa fa-user"></i> {txt key=TEXT_RETURNING}</p>
        <div id="loginbox" class="clearfix">
            <div class="info-text well">{txt key=TEXT_TXT_RETURNING}</div>
            {form type=form name=login action='dynamic' link_params='page_action=login' method=post conn=SSL role="form"}
            {form type=hidden name=action value=login}
            {form type=hidden name=link_target value=index}

            <div class="form-group">
                <label for="email">{txt key=text_email}*</label>
                <input id="email" type="email" name="email" maxlength="50" autocomplete="email" required />
            </div>

            <div class="form-group">
                <label for="password">{txt key=text_password}*</label>
                {form id=password type=password name=password params='autocomplete="current-password" required'}
            </div>

            <p class="pull-left">
                <button type="submit" class="btn btn-primary">
                    {txt key=BUTTON_LOGIN}
                </button>
                {txt key=TEXT_EW_EVELATIONS_OR}
                <a href="{link page='customer' paction='password_reset' conn=SSL}">{txt key=text_link_lostpassword}</a>
            </p>

            {form type=formend}
            {hook key=box_login_tpl}
        </div><!-- #loginbox -->
    </div><!-- .col -->
    {hook key=login_returning_bottom}

	<div class="col col-md-6 col-md-pull-6">
        {hook key=login_register_top}
		<p class="h3 text-primary">
            <span class="glyphicon glyphicon-share-alt"></span> {txt key=TEXT_NEW_CUSTOMER}</p>
		<div id="registerbox">
            <div class="info-text well">
                {txt key=TEXT_TXT_NEW_CUSTOMER}
                {if $smarty.const._STORE_ALLOW_GUEST_ORDERS == 'true'}
                    <br /><br />
                    {txt key=TEXT_TXT_GUEST}
                    <br />
                    <br />
                    {txt key=TEXT_NO_GUEST_ALLOWED_WITH_VAT}
                {/if}
            </div>
			{form type=form name=create_account action='dynamic' link_params='page_action=login' method=post conn=SSL role="form"}
			{form type=hidden name=action value=add_customer}
			{form type=hidden name=page value='customer'}
			{form type=hidden name='default_address[address_class]' value=default}

            <fieldset>
                <legend>{txt key=TEXT_PERSONAL}</legend>
                {if $show_gender eq 1}
                    <div class="form-group">
                        <label for="default_address_customers_gender">{txt key=TEXT_GENDER}*</label>
                        {form params='id="default_address_customers_gender"' type=select name='default_address[customers_gender]' value=$gender_data default=$default_address.customers_gender class="form-control" params='required'}
                    </div>
                {/if}
                {if $show_title eq 1}
                    <div class="form-group">
                        <label for="default_address_customers_title">{txt key=TEXT_CUSTOMERS_TITLE}{if $title_required}*{/if}</label>
                        {if $title_data && $title_data|count}
                            {form params='id="default_address_customers_title"' type=select name='default_address[customers_title]' value=$title_data default=$default_address.customers_title class="form-control"}
                        {else}
                            {form params='id="default_address_customers_title"' type=text   name='default_address[customers_title]' default=$title_data class="form-control"}
                        {/if}
                    </div>
                {/if}
                <div class="form-group">
                    <label for="default_address_customers_firstname">{txt key=TEXT_FIRSTNAME}*</label>
                    {form id=default_address_customers_firstname type=text name='default_address[customers_firstname]' value=$default_address.customers_firstname params='required'}
                </div>
                <div class="form-group">
                    <label for="default_address_customers_lastname">{txt key=TEXT_LASTNAME}*</label>
                    {form id=default_address_customers_lastname type=text name='default_address[customers_lastname]' value=$default_address.customers_lastname params='required'}
                </div>
                {if $show_birthdate eq 1}
                    <div class="form-group">
                        <label for="default_address_customers_dob">{txt key=TEXT_BIRTHDATE}*</label>
                        <input type="date"
                            id="default_address_customers_dob"
                            name="default_address[customers_dob]"
                            value="{if $default_address.customers_dob}{$default_address.customers_dob|date_format:'Y-m-d'}{/if}"
                            required
                        />
                    </div>
                {/if}
                <div class="form-group">
                    <label for="cust_info_customers_email_address">{txt key=TEXT_EMAIL}*</label>
                    <input id="cust_info_customers_email_address" type="email" name="cust_info[customers_email_address]" value="{$cust_info.customers_email_address}" maxlength="50" autocomplete="email" required />
                </div>
                <div class="form-group">
                    <label for="cust_info_customers_email_address_confirm">{txt key=TEXT_EMAIL_CONFIRM}*</label>
                    <input id="cust_info_customers_email_address_confirm" type="email" name="cust_info[customers_email_address_confirm]" value="{$cust_info.customers_email_address_confirm}" maxlength="50" autocomplete="email" required />
                </div>
            </fieldset>

			{if $show_company eq 1}
                <fieldset>
                    <legend>{txt key=TEXT_COMPANY}</legend>
                    <div class="form-group">
                        <label for="default_address_customers_company">{txt key=TEXT_COMPANY_NAME}{if _STORE_COMPANY_MIN_LENGTH > 0}*{/if}</label>
                        {form id=default_address_customers_company type=text name='default_address[customers_company]' value=$default_address.customers_company}
                    </div>
                    <div class="form-group">
                        <label for="default_address_customers_company_2">{txt key=TEXT_COMPANY_NAME_2}</label>
                        {form id=default_address_customers_company_2 type=text name='default_address[customers_company_2]' value=$default_address.customers_company_2}
                    </div>
                    <div class="form-group">
                        <label for="default_address_customers_company_3">{txt key=TEXT_COMPANY_NAME_3}</label>
                        {form id=default_address_customers_company_3 type=text name='default_address[customers_company_3]' value=$default_address.customers_company_3}
                    </div>
                    {if $show_vat eq 1}
                        <div class="form-group">
                            <label for="cust_info_customers_vat_id">{txt key=TEXT_VAT_ID}</label>
                            {form id=cust_info_customers_vat_id type=text name='cust_info[customers_vat_id]' value=$cust_info.customers_vat_id class='guest-not-allowed-input'}
                            <small class="guest-account-text hidden">{txt key=TEXT_NO_VAT_ALLOWED_WITH_GUEST}</small>
                        </div>
                    {/if}
                </fieldset>
			{/if}

            <fieldset>
                <legend>{txt key=TEXT_ADDRESS}</legend>

                {hook key=login_register_address_top}

                <div class="form-group">
                    <label for="default_address_customers_street_address">{txt key=TEXT_STREET}*</label>
                    {form id=default_address_customers_street_address type=text name='default_address[customers_street_address]' value=$default_address.customers_street_address params='required'}
                </div>
                <div class="form-group">
                    <label for="default_customers_address_addition">{txt key=TEXT_ADDRESS_ADDITION}</label>
                    {form id=default_customers_address_addition type=text name='default_address[customers_address_addition]' value=$default_address.customers_address_addition}
                </div>
                {if $show_suburb eq 1}
                    <div class="form-group">
                        <label for="default_address_customers_suburb">{txt key=TEXT_SUBURB}</label>
                        {form id=default_address_customers_suburb type=text name='default_address[customers_suburb]' value=$default_address.customers_suburb}
                    </div>
                {/if}
                <div class="form-group">
                    <label for="default_address_customers_postcode">{txt key=TEXT_CUSTOMERS_POSTCODE}*</label>
                    {form id=default_address_customers_postcode type=text name='default_address[customers_postcode]' value=$default_address.customers_postcode params='required'}
                </div>
                <div class="form-group">
                    <label for="default_address_customers_city">{txt key=TEXT_CITY}*</label>
                    {form id=default_address_customers_city type=text name='default_address[customers_city]' value=$default_address.customers_city params='required'}
                </div>
                <div id="countries" class="form-group">
                    <label for="default_address_customers_country_code">{txt key=TEXT_COUNTRY}*</label>
                    {if $default_address.customers_country_code}
                        {form params='id="default_address_customers_country_code"' class="form-control" type=select name='default_address[customers_country_code]' value=$country_data default=$default_address.customers_country_code params='required'}
                    {else}
                        {if $default_country}
                            {form params='id="default_address_customers_country_code"' class="form-control" type=select name='default_address[customers_country_code]' value=$country_data default=$default_country params='required'}
                        {else}
                            {form params='id="default_address_customers_country_code"' class="form-control" type=select name='default_address[customers_country_code]' value=$country_data default=$smarty.const._STORE_COUNTRY params='required'}
                        {/if}
                    {/if}
                </div>
                {if $show_federal_states eq 1}
                    <div id="federals" class="form-group"></div>
                {/if}

                {hook key=login_register_address_bottom}
            </fieldset>

            <fieldset>
                <legend>{txt key=TEXT_CONTACT}</legend>
                <div class="form-group">
                    <label for="default_address_customers_phone">{txt key=TEXT_PHONE}{if _STORE_TELEPHONE_MIN_LENGTH > 0}*{/if}</label>
                    {if _STORE_SHOW_PHONE_PREFIX eq 'true'}
                        <div class="row">
                            <div class="col col-xs-5">
                                {if isset($default_address.customers_phone_prefix)}
                                    {form params='id="default_address_customers_phone_prefix"' type=select name='default_address[customers_phone_prefix]' value=$phone_prefix default=$default_address.customers_phone_prefix}
                                {else}
                                    {form params='id="default_address_customers_phone_prefix"' type=select name='default_address[customers_phone_prefix]' value=$phone_prefix default=$smarty.const._STORE_PHONE_PREFIX}
                                {/if}
                            </div>
                            <div class="col col-xs-7">
                                {form id=default_address_customers_phone type=text name='default_address[customers_phone]' value=$default_address.customers_phone}
                            </div>
                        </div>
                    {else}
                        <input type="tel"
                            id="default_address_customers_phone"
                            name="default_address[customers_phone]"
                            value="{$default_address.customers_phone}"
                            {if _STORE_TELEPHONE_MIN_LENGTH > 0}required{/if}
                        />
                    {/if}
                </div>

                <div class="form-group">
                    <label for="default_address_customers_mobile_phone">{txt key=TEXT_MOBILE_PHONE}{if _STORE_MOBILE_PHONE_MIN_LENGTH > 0}*{/if}</label>
                    {if _STORE_SHOW_PHONE_PREFIX eq 'true'}
                        <div class="row">
                            <div class="col col-xs-5">
                                {if isset($default_address.customers_mobile_phone_prefix)}
                                    {form params='id="default_address_customers_mobile_phone_prefix"' type=select name='default_address[customers_mobile_phone_prefix]' value=$phone_prefix default=$default_address.customers_mobile_phone_prefix}
                                {else}
                                    {form params='id="default_address_customers_mobile_phone_prefix"' type=select name='default_address[customers_mobile_phone_prefix]' value=$phone_prefix default=$smarty.const._STORE_PHONE_PREFIX}
                                {/if}
                            </div>
                            <div class="col col-xs-7">
                                {form id=default_address_customers_mobile_phone type=text name='default_address[customers_mobile_phone]' value=$default_address.customers_mobile_phone}
                            </div>
                        </div>
                    {else}
                        <input type="tel"
                            id="default_address_customers_mobile_phone"
                            name="default_address[customers_mobile_phone]"
                            value="{$default_address.customers_mobile_phone}"
                            {if _STORE_MOBILE_PHONE_MIN_LENGTH > 0}required{/if}
                        />
                    {/if}
                </div>

                <div class="form-group">
                    <label for="default_address_customers_fax">{txt key=TEXT_FAX}{if _STORE_FAX_MIN_LENGTH > 0}*{/if}</label>
                    {if _STORE_SHOW_PHONE_PREFIX eq 'true'}
                        <div class="row">
                            <div class="col col-xs-5">
                                {if isset($default_address.customers_fax_prefix)}
                                    {form params='id="default_address_customers_fax_prefix"' type=select name='default_address[customers_fax_prefix]' value=$phone_prefix default=$default_address.customers_fax_prefix}
                                {else}
                                    {form params='id="default_address_customers_fax_prefix"' type=select name='default_address[customers_fax_prefix]' value=$phone_prefix default=$smarty.const._STORE_PHONE_PREFIX}
                                {/if}
                            </div>
                            <div class="col col-xs-7">
                                {form id=default_address_customers_fax type=text name='default_address[customers_fax]' value=$default_address.customers_fax}
                            </div>
                        </div>
                    {else}
                        <input type="tel"
                            id="default_address_customers_fax"
                            name="default_address[customers_fax]"
                            value="{$default_address.customers_fax}"
                            {if _STORE_FAX_MIN_LENGTH > 0}required{/if}
                        />
                    {/if}
                </div>
            </fieldset>

            <fieldset>
                <legend>{txt key=TEXT_PASSWORD}</legend>
                {if $smarty.const._STORE_ALLOW_GUEST_ORDERS == 'true'}
                    <div class="alert alert-warning guest-account-text hidden">
                        {txt key=TEXT_TXT_GUEST}
                        <br />
                        {txt key=TEXT_NO_GUEST_ALLOWED_WITH_VAT}
                    </div>
                {/if}
                {if $smarty.const._STORE_ALLOW_GUEST_ORDERS == 'true'}
                    <div class="form-group guest-option">
                        <div class="btn-group" data-toggle="buttons">
                            <label id="account-button" class="btn btn-default active">
                                <input type="radio" name="guest-account" value="register" id="account" checked="checked" />
                                <span class="glyphicon glyphicon-ok text-success"></span>
                                {txt key=TEXT_I_WANT_TO_REGISTER}
                            </label>
                            <label id="guest-button" class="btn btn-default">
                                <input type="radio" name="guest-account" value="guest" id="guest" />
                                <span class="glyphicon glyphicon-remove text-danger"></span>
                                {txt key=TEXT_I_AM_A_GUEST}
                            </label>
                        </div>
                    </div>
                {/if}
                <div id="guest-account">
                    <div class="form-group">
                        <label for="cust_info_customers_password">{txt key=TEXT_PASSWORD_ENTRY}*</label>
                        {form id=cust_info_customers_password type=password name='cust_info[customers_password]' value=$cust_info.customers_password params='autocomplete="new-password"'}
                    </div>

                    <div class="form-group" style="font-size:90%">
                        <!-- Regeln / Fehler -->
                        <ul id="password-rules" aria-live="polite"></ul>

                        <!-- Stärke -->
                        <div class="form-group"
                             id="password-strength"
                             role="status"
                             aria-live="polite"
                        ></div>

                        <!-- Stärke-Balken -->
                        <div  class="form-group"
                              id="password-strength-bar"
                              role="progressbar"
                              aria-valuemin="0"
                              aria-valuemax="5"
                              aria-valuenow="0"
                              aria-label="{txt key=TEXT_PASSWORD_STRENGTH}"
                        >
                            <div class="strength-fill"></div>
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="cust_info_customers_password_confirm">{txt key=TEXT_PASSWORD_ENTRY_CONFIRM}*</label>
                        {form id=cust_info_customers_password_confirm type=password name='cust_info[customers_password_confirm]' value=$cust_info.customers_password_confirm params='autocomplete="new-password"'}
                    </div>
                </div>

                <div class="pull-left">
                    {if $show_privacy eq 1}
                        {content cont_id=2 is_id='false'}
                        {if $show_privacy_type eq 1}
                            <label>
                                {form type=checkbox name=privacy value=1 params='required'}
                                {txt key=TEXT_PRIVACY_TEXT_INFO_1} <a href="{$privacy_link}" target="_blank">{txt key=TEXT_PRIVACY_TEXT}</a> {txt key=TEXT_PRIVACY_TEXT_INFO_2}{txt key=TEXT_DOT}
                            </label>
                        {else}
                            <p>{txt key=TEXT_PRIVACY_TEXT_INFO} <a href="{$privacy_link}" target="_blank">{txt key=TEXT_PRIVACY_TEXT}</a>{txt key=TEXT_DOT}</p>
                        {/if}
                    {/if}

                    <p class="required">{txt key=TEXT_MUST}</p>
                </div>
                <div class="form-submit pull-right text-right">
                    {hook key=login_create_account_tpl}

                    {if $smarty.const._USE_CAPTCHA_AT_REGISTRATION }
                        {if $smarty.const._STORE_CAPTCHA == 'ReCaptcha'}

                        <div class="recaptcha-wrapper"></div>

                        {elseif $smarty.const._STORE_CAPTCHA == 'Standard'}
                        <p id="captcha-img" class="right">
                            <img id="captchaImg" src="" alt="{txt key=TEXT_CAPTCHA}"/>
                        </p>
                        <label for="captcha_code">{txt key=TEXT_CAPTCHA}*</label>
                        {form id=captcha_code type=text name=captcha params='maxlength="30"'}
                        <script>

                            document.addEventListener('DOMContentLoaded', function () {
                                const captchaImg = document.getElementById('captchaImg');
                                console.log(captchaImg);
                                if(captchaImg)
                                {
                                    setTimeout(function(captchaImg){ captchaImg.src = '{$captcha_link}'; }, 500, captchaImg);
                                }
                            });

                        </script>
                        {/if}
                    {/if}
                    <p>
                        <button type="submit" class="btn btn-primary">
                            {txt key=BUTTON_NEXT}
                        </button>
                    </p>
                </div>

                <div class="clearfix"></div>
            </fieldset>

			{form type=formend}

            <div style="display:none;">
                {foreach item='federal_states' from=$country_data}
                    {if $federal_states.federal_states}
                        <div class="form-group {$federal_states.id}">
                            <label for="default_address_customers_federal_state_code">{txt key=TEXT_FEDERAL_STATES}*</label>
                            {form params='id="default_address_customers_federal_state_code"' type=select name='default_address[customers_federal_state_code]' value=$federal_states.federal_states default=$default_address.customers_federal_state_code}
                        </div>
                    {/if}
                {/foreach}
            </div>

            {literal}
            <script type="text/javascript">
                /* <![CDATA[ */
                $(document).ready(function(){
                    $('#countries').change(function(){
                        var selected_country = $('#countries option:selected').val();
                        if($('.'+selected_country).length != 0){
                            $('#federals').html($('.'+selected_country).html());
                        } else {
                            $('#federals').html('');
                        }

                        //update bootstrap-select
                        $("#federals select, #countries select").attr('data-live-search', 'true').selectpicker('render');
                    });
                    var selected_country = $('#countries option:selected').val();
                    if($('.'+selected_country).length != 0){
                        $('#federals').html($('.'+selected_country).html());
                    } else {
                        $('#federals').html('');
                    }

                    //update bootstrap-select
                    $("#federals select, #countries select").attr('data-live-search', 'true').selectpicker('render');
                });
                /* ]]> */
            </script>
            {/literal}

        </div><!-- #registerbox -->

        {hook key=login_register_bottom}
	</div><!-- .col -->

</div><!-- .row -->

<style>
    #password-strength-bar {
        width: 100%;
        max-width: 120px;
        height: 12px;
        background-color: #e0e0e0;
        border-radius: 6px;
        margin-top: 6px;
    }

    .strength-fill {
        height: 100%;
        width: 0%;
        border-radius: 6px;
        transition: width 0.3s ease;
    }
</style>

<script>

    const passwordInput = document.getElementById("cust_info_customers_password");
    const rulesList = document.getElementById("password-rules");
    const strengthDiv = document.getElementById("password-strength");
    const strengthBar = document.getElementById("password-strength-bar");
    let strengthFill = null;
    if(passwordInput && strengthBar)
    {
        strengthFill = strengthBar.querySelector(".strength-fill");
        passwordInput.addEventListener("input", updatePasswordUI);
    }

</script>

{hook key=login_bottom}
