{extends file="layout.tpl"}

{block name="breadcrumb"}
    <nav class="nav-breadcrumb" role="navigation" aria-labelledby="breadcrumb-label">
        <strong id="breadcrumb-label">{intl l="You are here"}: </strong>
        <ul class="breadcrumb" itemprop="breadcrumb">
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="index.php" itemprop="url"><span itemprop="title">{intl l="Home"}</span></a></li>
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="active"><span itemprop="title">{intl l="Register"}</span></li>
        </ul>
    </nav><!-- /.nav-breadcrumb -->
{/block}


{block name="main-content"}
    <div class="main">

        <article class="col-main" role="main" aria-labelledby="main-label">

            <h1 id="main-label" class="page-header">{intl l="Create New Account"}</h1>
            {form name="thelia.customer.creation"}
            <form id="form-register" class="form-horizontal" action="{url path="/customer/create"}" method="post" role="form">

                <fieldset id="register-info" class="panel panel">
                    <div class="panel-heading">
                        1. {intl l="Personal Informations"}
                    </div>

                    <div class="panel-body">
                        {form_field form=$form field="firstname"}
                        <div class="form-group group-firstname {if $error}has-error{elseif $value != "" && !$error}has_success{/if}">
                            <label class="control-label" for="{$label_attr.for}">{$label} <span class="required">*</span></label>
                            <div class="control-input">
                                <input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="John" value="{$value}" autofocus required>
                                {if $error }
                                    <span class="help-block"><i class="icon-remove"></i> {$message}</span>
                                {elseif $value != "" && !$error}
                                    <span class="help-block"><i class="icon-ok"></i></span>
                                {/if}
                            </div>
                        </div><!--/.form-group-->
                        {/form_field}
                        {form_field form=$form field="lastname"}
                            <div class="form-group group-lastname {if $error}has-error{elseif $value != "" && !$error}has_success{/if}">
                                <label class="control-label" for="{$label_attr.for}">{$label} <span class="required">*</span></label>
                                <div class="control-input">
                                    <input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="John" value="{$value}" autofocus required>
                                    {if $error }
                                        <span class="help-block"><i class="icon-remove"></i> {$message}</span>
                                    {elseif $value != "" && !$error}
                                        <span class="help-block"><i class="icon-ok"></i></span>
                                    {/if}
                                </div>
                            </div><!--/.form-group-->
                        {/form_field}
                        {form_field form=$form field="email"}
                        <div class="form-group group-email {if $error}has-error{elseif $value != "" && !$error}has_success{/if}">
                            <label class="control-label" for="{$label_attr.for}">{$label} <span class="required">*</span></label>

                            <div class="control-input">
                                <input type="email" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="johndoe@domain.com" required value="{$smarty.get.email|default:$value}">
                                {if $error }
                                    <span class="help-block"><i class="icon-remove"></i> {$message}</span>
                                {elseif $value != "" && !$error}
                                    <span class="help-block"><i class="icon-ok"></i></span>
                                {/if}
                            </div>
                        </div><!--/.form-group-->
                        {/form_field}
                        {form_field form=$form field="phone"}
                            <div class="form-group group-phone {if $error}has-error{elseif $value != "" && !$error}has_success{/if}">
                                <label class="control-label" for="{$label_attr.for}">{$label}</label>
                                <div class="control-input">
                                    <input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="John" value="{$value}" autofocus>
                                    {if $error }
                                        <span class="help-block"><i class="icon-remove"></i> {$message}</span>
                                    {elseif $value != "" && !$error}
                                        <span class="help-block"><i class="icon-ok"></i></span>
                                    {/if}
                                </div>
                            </div><!--/.form-group-->
                        {/form_field}
                        {form_field form=$form field="cellphone"}
                            <div class="form-group group-cellphone {if $error}has-error{elseif $value != "" && !$error}has_success{/if}">
                                <label class="control-label" for="{$label_attr.for}">{$label}</label>
                                <div class="control-input">
                                    <input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" placeholder="John" value="{$value}" autofocus>
                                    {if $error }
                                        <span class="help-block"><i class="icon-remove"></i> {$message}</span>
                                    {elseif $value != "" && !$error}
                                        <span class="help-block"><i class="icon-ok"></i></span>
                                    {/if}
                                </div>
                            </div><!--/.form-group-->
                        {/form_field}
                    </div>
                </fieldset>

                <fieldset id="register-delivery" class="panel">
                    <div class="panel-heading">
                        2. {intl l="Delivery Informations"}
                    </div>

                    <div class="panel-body">
                        <div class="form-group group-company">
                            <label class="control-label" for="company">Company Name: <span class="required">*</span></label>
                            <div class="control-input">
                                <input type="text" name="company" id="company" class="form-control" placeholder="Thelia" required>
                            </div>
                        </div><!--/.form-group-->

                        <div class="form-group group-address">
                            <label class="control-label" for="address">Street Address: <span class="required">*</span></label>
                            <div class="control-input">
                                <input type="text" name="asresss" id="address" class="form-control" placeholder="Street address" required>
                            </div>
                        </div><!--/.form-group-->

                        <div class="form-group group-address_2">
                            <label class="control-label" for="address_2">Address 2:</label>
                            <div class="control-input">
                                <input type="text" name="address_2" id="address_2" class="form-control" placeholder="">
                            </div>
                        </div><!--/.form-group-->

                        <div class="form-group group-city">
                            <label class="control-label" for="city">City: <span class="required">*</span></label>
                            <div class="control-input">
                                <input type="text" name="city" id="city" class="form-control" placeholder="New york" required>
                            </div>
                        </div><!--/.form-group-->

                        <div class="form-group group-zip">
                            <label class="control-label" for="zip">Postal Code: <span class="required">*</span></label>
                            <div class="control-input">
                                <input type="text" name="zip" id="zip" class="form-control" placeholder="H2T 2V6" required>
                            </div>
                        </div><!--/.form-group-->

                        <div class="form-group group-country">
                            <label class="control-label" for="country">Country: <span class="required">*</span></label>
                            <div class="control-input">
                                <select name"country" id="country" class="form-control" required>
                                <option value="">-- Select Country --</option>
                                <option value="1">Country1</option>
                                <option value="2">Country2</option>
                                <option value="3">Country3</option>
                                <option value="4">Country4</option>
                                </select>
                            </div>
                        </div><!--/.form-group-->
                    </div>
                </fieldset>
                <fieldset id="register-login" class="panel">
                    <div class="panel-heading">
                        3. Login Information
                    </div>

                    <div class="panel-body">
                        <div class="form-group group-password">
                            <label class="control-label" for="password">Password: <span class="required">*</span></label>
                            <div class="control-input">
                                <input type="password" name="password" id="password" class="form-control" required autocomplete="off">
                            </div>
                        </div><!--/.form-group-->

                        <div class="form-group group-confirm_password">
                            <label class="control-label" for="confirm_password">Confirm Password: <span class="required">*</span></label>
                            <div class="control-input">
                                <input type="password" name="confirm_password" id="confirm_password" class="form-control" required autocomplete="off">
                            </div>
                        </div><!--/.form-group-->
                    </div>
                </fieldset>

                <div class="form-group group-agreed">
                    <div class="control-input">
                        <div class="checkbox">
                            <label class="control-label" for="agreed">
                                <input type="checkbox" name="agreed" id="agreed" value="1"> I've read and agreed on <a href="#">Terms &amp; Conditions</a>.
                            </label>
                        </div>
                    </div>
                </div><!--/.form-group-->

                <div class="form-group group-btn">
                    <div class="control-btn">
                        <button type="submit" class="btn btn-register">Sign in</button>
                    </div>
                </div><!--/.form-group-->
            </form>
            {/form}
        </article>

    </div><!-- /.layout -->
{/block}