{config_load file="$language/lang_$language.conf" section="create_account"}
{config_load file="$language/own_lang_$language.conf" section="create_account"}
<style type="text/css">
    ul.commercial_select{
        display: none;
        list-style-type: none; 
        margin: 0; 
        padding: 4px;
        font-size: 1.3em;
    }

    .cs_roles{
        display: block;
        padding: 10px;
    }
    .cs_roles .cs_role{
        padding: 20px;
        display: block;
        text-align: center;
    }
</style>
<script>
    var DEFAULT_CUSTOMERS_STATUS_ID = '{$DEFAULT_CUSTOMERS_STATUS_ID}';
    {literal}
    $(function(){
        $('button#private_customer').on('click',function(){
            $('#cs_roles').hide();
            window.location.href='create_account.php?account_type='+DEFAULT_CUSTOMERS_STATUS_ID;
        });
        $('button#commercial_customer').on('click',function(){
            $('#role_private,#role_commercial_desc_container').hide();
            $('ul.commercial_select').show();
        });
    });
    {/literal}
</script>

<div class="cs_roles">
<h3>{#create_account_select_type_title#}</h3>
<p>{#create_account_select_type_description#}</p>
    <div class="cs_role" id="role_private">
		<h4>{#create_account_type_private_description#}</h4>
		<br />
        <button class="btn btn-primary" id="private_customer">{#create_account_type_private#}</button>
        <br />
        
    </div>
	<hr>
    <div class="cs_role" id="role_commercial">
        <span id="role_commercial_desc_container">
		 <h4>{#create_account_type_commercial_description#}</h4>
		 <br />
        <button class="btn btn-primary" id="commercial_customer">{#create_account_type_company#}</button>
        <br />
        </span>
       
        <ul class="commercial_select">
{foreach from=$CUSTOMERS_STATUSES item=cs}
            <li><div style="margin-bottom: 10px;text-align: center;width: 500px;display: inline-block;border: 1px solid #000; padding: 10px;line-height: 40px;"><a style="font-size: 1.6em;" href="create_account.php?account_type={$cs.id}">{$cs.text}</a><br />{$cs.description}</div></li>
{/foreach}
        </ul>
    </div>
</div>