{if in_array('state', $optionalFields)}
    <script>
        var statesTab = 10,
            stateNotRequired = true;
    </script>
{/if}

<script src="{$BASE_PATH_JS}/StatesDropdown.js"></script>
<script src="{$BASE_PATH_JS}/PasswordStrength.js"></script>
<script>
    window.langPasswordStrength = "{lang key='pwstrength'}";
    window.langPasswordWeak = "{lang key='pwstrengthweak'}";
    window.langPasswordModerate = "{lang key='pwstrengthmoderate'}";
    window.langPasswordStrong = "{lang key='pwstrengthstrong'}";
    jQuery(document).ready(function() {
        jQuery("#inputNewPassword1").keyup(registerFormPasswordStrengthFeedback);
    });
</script>
{if $registrationDisabled}
    {include file="$template/includes/alert.tpl" type="error" msg="{lang key='registerCreateAccount'}"|cat:' <strong><a href="'|cat:"$WEB_ROOT"|cat:'/cart.php" class="alert-link">'|cat:"{lang key='registerCreateAccountOrder'}"|cat:'</a></strong>'}
{/if}

{if !$registrationDisabled}
    <main id="registration" class="auth auth-register bg-light">
        <div class="container h-100 d-flex flex-column align-items-center justify-content-center">
            <div class="row bg-white overflow-hidden border border-top-0">
                <div class="col-xl-7 col-md-12">
                    <div class="h-100 d-flex flex-column p-5 ps-0 pe-0 ps-lg-5 pe-lg-5">
                        {include file="$template/$template/includes/logo.tpl" logoMode="both" classes="mb-5"}
                        <h1 class="h5 mt-2 text-center">{lang key='userLogin.createAccount'}</h1>
                        <p class="text-center">{lang key='orderForm.createAccount'}</p>
                        <form method="post" class="row gy-4 p-3 using-password-strength" action="{$smarty.server.PHP_SELF}" role="form" name="orderfrm" id="frmCheckout">
                            <input type="hidden" name="register" value="true"/>
                            {if ($linkableProviders || $hasLinkedProvidersEnabled)}
                                <div class="col-md-12">
                                    {include file="$template/includes/linkedaccounts.tpl" linkContext="registration"}
                                </div>
                            {/if}
                            {if $errormessage}
                                <div class="col-md-12">
                                    {include file="$template/includes/alert.tpl" type="error" errorshtml=$errormessage}
                                </div>
                            {/if}
                            <div class="col-md-12" id="containerNewUserSignup">
                                <div class="t-separator mt-4">
                                    <span class="t-separator-line"></span>
                                    <span class="t-separator-text">{lang key='orderForm.personalInformation'}</span>
                                </div>
                                <div class="row gy-3 mt-2">
                                    <div class="col-md-6">
                                        <label for="inputFirstName">{lang key='orderForm.firstName'}</label>
                                        <div class="input-group mt-2">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-person"></i></span>
                                            </div>
                                            <input type="text" name="firstname" id="inputFirstName" class="field form-control" placeholder="{lang key='orderForm.firstName'}" value="{$clientfirstname}" {if !in_array('firstname', $optionalFields)}required{/if} autofocus>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="inputLastName">{lang key='orderForm.lastName'}</label>
                                        <div class="input-group mt-2">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-person"></i></span>
                                            </div>
                                            <input type="text" name="lastname" id="inputLastName" class="field form-control" placeholder="{lang key='orderForm.lastName'}" value="{$clientlastname}" {if !in_array('lastname', $optionalFields)}required{/if}>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="inputEmail">{lang key='orderForm.emailAddress'}</label>
                                        <div class="input-group mt-2">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-envelope"></i></span>
                                            </div>
                                            <input type="email" name="email" id="inputEmail" class="field form-control" placeholder="{lang key='orderForm.emailAddress'}" value="{$clientemail}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="inputPhone">{lang key='orderForm.phoneNumber'}</label>
                                        <div class="input-group mt-2">
                                            <div class="input-group-prepend d-none">
                                                <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-telephone"></i></span>
                                            </div>
                                            <input type="tel" name="phonenumber" id="inputPhone" class="field" placeholder="{lang key='orderForm.phoneNumber'}" value="{$clientphonenumber}">
                                        </div>
                                    </div>
                                </div>
                                <div class="t-separator mt-4">
                                    <span class="t-separator-line"></span>
                                    <span class="t-separator-text">{lang key='orderForm.billingAddress'}</span>
                                </div>
                                <div class="row gy-3 mt-2">
                                    <div class="col-md-12">
                                        <label for="inputCompanyName">{lang key='orderForm.companyName'}</label>
                                        <div class="input-group mt-2">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-building"></i></span>
                                            </div>
                                            <input type="text" name="companyname" id="inputCompanyName" class="field form-control" placeholder="{lang key='orderForm.companyName'} ({lang key='orderForm.optional'})" value="{$clientcompanyname}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="inputAddress1">{lang key='orderForm.streetAddress'}</label>
                                        <div class="input-group mt-2">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-geo-alt"></i></span>
                                            </div>
                                            <input type="text" name="address1" id="inputAddress1" class="field form-control" placeholder="{lang key='orderForm.streetAddress'}" value="{$clientaddress1}"  {if !in_array('address1', $optionalFields)}required{/if}>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="inputAddress2">{lang key='orderForm.streetAddress2'}</label>
                                        <div class="input-group mt-2">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-geo-alt"></i></span>
                                            </div>
                                            <input type="text" name="address2" id="inputAddress2" class="field form-control" placeholder="{lang key='orderForm.streetAddress2'}" value="{$clientaddress2}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="inputCity">{lang key='orderForm.city'}</label>
                                        <div class="input-group mt-2">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-geo-alt"></i></span>
                                            </div>
                                            <input type="text" name="city" id="inputCity" class="field form-control" placeholder="{lang key='orderForm.city'}" value="{$clientcity}"  {if !in_array('city', $optionalFields)}required{/if}>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="state">{lang key='orderForm.state'}</label>
                                        <div class="input-group mt-2">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-geo-alt"></i></span>
                                            </div>
                                            <input type="text" name="state" id="state" class="field form-control" placeholder="{lang key='orderForm.state'}" value="{$clientstate}"  {if !in_array('state', $optionalFields)}required{/if}>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="inputPostcode">{lang key='orderForm.postcode'}</label>
                                        <div class="input-group mt-2">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-geo-alt"></i></span>
                                            </div>
                                            <input type="text" name="postcode" id="inputPostcode" class="field form-control" placeholder="{lang key='orderForm.postcode'}" value="{$clientpostcode}" {if !in_array('postcode', $optionalFields)}required{/if}>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="inputCountry">{lang key='orderForm.country'}</label>
                                        <div class="input-group mt-2">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-geo-alt"></i></span>
                                            </div>
                                            <select name="country" id="inputCountry" class="field form-control">
                                                {foreach $clientcountries as $countryCode => $countryName}
                                                    <option value="{$countryCode}"{if (!$clientcountry && $countryCode eq $defaultCountry) || ($countryCode eq $clientcountry)} selected="selected"{/if}>
                                                        {$countryName}
                                                    </option>
                                                {/foreach}
                                            </select>
                                        </div>
                                    </div>
                                    {if $showTaxIdField}
                                    <div class="col-md-6">
                                        <label for="inputTaxId">{lang key='tax.taxLabel'}</label>
                                        <div class="input-group mt-2">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-cash-coin"></i></span>
                                            </div>
                                            <input type="text" name="tax_id" id="inputTaxId" class="field" placeholder="{$taxLabel} ({lang key='orderForm.optional'})" value="{$clientTaxId}">
                                        </div>
                                    </div>
                                    {/if}
                                </div>
                                {if $customfields || $currencies}
                                <div class="t-separator mt-4">
                                    <span class="t-separator-line"></span>
                                    <span class="t-separator-text">{lang key='orderadditionalrequiredinfo'}<br><small>{lang key='orderForm.requiredField'}</small></span>
                                </div>
                                <div class="row gy-3 mt-2">
                                    {if $customfields}
                                        {foreach $customfields as $customfield}
                                            <div class="col-md-6">
                                                <label for="customfield{$customfield.id}">{$customfield.name} {$customfield.required}</label>
                                                <div class="input-group mt-2">
                                                    {$customfield.input}
                                                    {if $customfield.description}
                                                        <span class="field-help-text w-100 mt-1 mb-1">{$customfield.description}</span>
                                                    {/if}
                                                </div>
                                            </div>
                                        {/foreach}
                                    {/if}
                                    {if $customfields && count($customfields)%2 > 0 }
                                        <div class="clearfix"></div>
                                    {/if}
                                    {if $currencies}
                                        <div class="col-md-6">
                                            <label for="inputCurrency">{lang key='choosecurrency'}</label>
                                            <div class="input-group mt-2">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-geo-alt"></i></span>
                                                </div>
                                                <select id="inputCurrency" name="currency" class="field form-control">
                                                    {foreach $currencies as $curr}
                                                        <option value="{$curr.id}"{if !$smarty.post.currency && $curr.default || $smarty.post.currency eq $curr.id } selected{/if}>{$curr.code}</option>
                                                    {/foreach}
                                                </select>
                                            </div>
                                        </div>
                                    {/if}
                                </div>
                                {/if}
                            </div>
                            <div class="col-md-12" id="containerNewUserSecurity" {if $remote_auth_prelinked && !$securityquestions } class="w-hidden"{/if}>
                                <div class="t-separator mt-4">
                                    <span class="t-separator-line"></span>
                                    <span class="t-separator-text">{lang key='orderForm.accountSecurity'}</span>
                                </div>
                                <div class="row gy-3 mt-2{if $remote_auth_prelinked && $securityquestions} hidden{/if}" id="containerPassword">
                                    <div class="col-md-6">
                                        <label for="inputNewPassword1">{lang key='clientareapassword'}</label>
                                        <div class="input-group mt-2">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-file-lock"></i></span>
                                            </div>
                                            <input type="password" name="password" id="inputNewPassword1" data-error-threshold="{$pwStrengthErrorThreshold}" data-warning-threshold="{$pwStrengthWarningThreshold}" class="field form-control" placeholder="{lang key='clientareapassword'}" autocomplete="off"{if $remote_auth_prelinked} value="{$password}"{/if}>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="inputNewPassword2">{lang key='clientareaconfirmpassword'}</label>
                                        <div class="input-group mt-2">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-file-lock"></i></span>
                                            </div>
                                            <input type="password" name="password2" id="inputNewPassword2" class="field form-control" placeholder="{lang key='clientareaconfirmpassword'}" autocomplete="off"{if $remote_auth_prelinked} value="{$password}"{/if}>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <button type="button" class="btn btn-default btn-sm btn-sm-block generate-password border" data-targetfields="inputNewPassword1,inputNewPassword2">
                                                {lang key='Şifre Oluştur'}
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="password-strength-meter">
                                            <div class="progress">
                                                <div class="progress-bar bg-success bg-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="passwordStrengthMeterBar">
                                                </div>
                                            </div>
                                            <p class="text-center small text-muted" id="passwordStrengthTextLabel">{lang key='pwstrength'}: {lang key='pwstrengthenter'}</p>
                                        </div>
                                    </div>
                                </div>
                                {if $securityquestions}
                                    <div class="row gy-3 mt-2">
                                        <div class="col-md-6">
                                            <label for="inputSecurityQId">{lang key='clientareasecurityquestion'}</label>
                                            <div class="input-group mt-2">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-question-lg"></i></span>
                                                </div>
                                                <select name="securityqid" id="inputSecurityQId" class="field form-control">
                                                    <option value="">{lang key='clientareasecurityquestion'}</option>
                                                    {foreach $securityquestions as $question}
                                                        <option value="{$question.id}"{if $question.id eq $securityqid} selected{/if}>
                                                            {$question.question}
                                                        </option>
                                                    {/foreach}
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="inputSecurityQAns">{lang key='clientareasecurityanswer'}</label>
                                            <div class="input-group mt-2">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text bg-light p-2 ps-3 pe-3"><i class="bi bi-question-lg"></i></span>
                                                </div>
                                                <input type="password" name="securityqans" id="inputSecurityQAns" class="field form-control" placeholder="{lang key='clientareasecurityanswer'}" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
                                {/if}
                            </div>
                            {if $showMarketingEmailOptIn}
                                <div class="col-md-12">
                                    <div class="border rounded-1 p-3">
                                        <h3 class="card-title">{lang key='emailMarketing.joinOurMailingList'}</h3>
                                        <p>{$marketingEmailOptInMessage}</p>
                                        <input type="checkbox" name="marketingoptin" value="1"{if $marketingEmailOptIn} checked{/if} class="no-icheck toggle-switch-success" data-size="small" data-on-text="{lang key='yes'}" data-off-text="{lang key='no'}">
                                    </div>
                                </div>
                            {/if}
                            <div class="col-md-12">
                                {include file="$template/includes/captcha.tpl"}
                            </div>
                            {if $accepttos}
                                <div class="col-md-12">
                                    <p class="text-center d-flex">
                                        <label class="form-check">
                                            <input type="checkbox" name="accepttos" class="form-check-input accepttos">
                                            {lang key='ordertosagreement'} <a href="{$tosurl}" target="_blank">{lang key='ordertos'}</a>
                                        </label>
                                    </p>
                                </div>
                            {/if}
                            <div class="col-md-12 mt-3">
                                <input class="btn btn-outline-skyblue hover-skyblue w-100 rounded-1 p-2{$captcha->getButtonClass($captchaForm)}" type="submit" value="{lang key='clientregistertitle'}"/>
                            </div>
                        </form>
                        <span class="mt-auto text-center">{lang key='alreadyregistered'} <a href="{$WEB_ROOT}/login.php" class="text-blue">{lang key='loginbutton'}</a></span>
                    </div>
                </div>
                <div class="col-md-5 auth-info bg-blue-01 border-start">
                    <div class="h-100 d-flex flex-column align-items-center justify-content-center p-5">
                    <div class="owl-carousel overflow-hidden text-start justify-content-center align-items-center" data-slider-loop="on" data-slider-items="1" data-slider-autoplay="on" data-slider-autoplay-timeout="3000" data-slider-dots="on">
                        <div class="d-flex align-items-center justify-content-center align-self-center">
                            <div class="d-flex flex-column rounded p-5 text-center">
                                <div class="content-img d-flex align-self-center mb-5"><img src="{$WEB_ROOT}/templates/{$template}/{$template}/assets/img/design/dashboard-img.png" alt="Dashboard Preview"></div>
                                <span class="h4 font-weight-normal">İmza Medya'a Hoş Geldiniz</span>
                                <span>Lütfen Kayıtlarınızı Eksiksiz Tamamlayınız</span>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            <div class="row auth-footer g-2 mt-2 mb-2">

                <div class="col-md-6 d-flex text-md-center">
                    <div class="d-flex align-items-center justify-content-start">
                    <p class="m-0">{lang key="copyrightFooterNotice" year=$date_year company=$companyname}</p>
                    </div>
                </div>

                <div class="col-md-6 text-md-center">
                    <div class="d-flex align-items-end justify-content-end">
                    <nav class="navbar navbar-expand-lg p-0">
                        <ul class="navbar-nav">
                            <li class="nav-item ms-2"><a href="privacy-policy.php" class="nav-link pe-0">Gizlilik Politikası</a></li>
                            <li class="nav-item ms-2"><a href="terms-of-service." class="nav-link pe-0">Hizmet Şartları</a></li>
                        </ul>
                    </nav>
                    </div>
                </div>

            </div>
        </div>
    </main>
{/if}
