{% include 'part_header.html' %}
{% include 'part_menu.html' %}

{% if site_env == 'cusa' %}
    {% include 'part_banner.html' %}
{% endif %}

{% include 'part_menu_puntos_priv.html' %}
{% include 'part_menu_priv_small.html' %}
<!-- <div class="row bg-gris hide-for-large login-small">
    <div class="column small-24 medium-12">
        {% include 'part_login.html' %}
    </div>
    <div class="column small-24 medium-12">
        {% include 'part_menu_banner_small.html' %}
    </div>
</div> -->
<script>{% include 'page_registro_casillero.js' %}</script>
<div class="content" ng-controller="page_registro_casillero">
    <div class="content-titulo">
        <div class="row">
            <div class="column small-24">
                <h1 class="titulo-pagina">
                    {% if site_env=='cusa' %}
                        tw{{registrarme.attrs.titulo.data[0]}}
                        <img src="tw{{template_url}}/img_tw{{site_env}}/icon-titulo.png" alt=""/>
                    {% else %}
                        tw{{registrarme.attrs.titulo.data[0]}}
                    {% endif %}
                </h1>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="column small-24 medium-15 large-16">
            <form class="form" action="" method="">
                <div class="row">
                    <div class="column small-24">
                        <div class="media-object">
                            <div class="media-object-section">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/icono-uno.png" alt=""/>
                            </div>
                            <div class="media-object-section">
                                <div class="titulo">
                                    Tipo de Casillero
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column small-24 centrado">


                        <div class="columns small-24 margen-abajo">
                            <div class="column small-24 medium-24 large-5">
                                <label>País</label>
                            </div>
                            <div class="columns small-24 medium-24 large-19">
                                <cye-web-boton-seleccion-pais></cye-boton-web-seleccion-pais>
                            </div>
                        </div>

                        <div class="columns small-24 margen-abajo">
                            <div class="column small-24 medium-24 large-5">
                                <label>Modalidad</label>
                            </div>
                            <div class="columns small-24 medium-24 large-19">
                                <div class="content-radio">
                                    <input ng-model="f.modalidad" ng-click="consultarTipoIdentificion()" type="radio" name="modalidad" value="personal" class="check-toggle" id="personal"/><label for="personal" class="text-small">Personal (Factura a titulo Personal)</label>
                                </div>
                                <div class="content-radio">
                                    <input ng-model="f.modalidad" ng-click="consultarTipoIdentificion()" type="radio" name="modalidad" value="corporativo" class="check-toggle" id="modalidad"/>
                                    <label ng-if="isColombia()" for="modalidad" class="text-small">Corporativo (Factura a su Nit o Rut)</label>
                                    <label ng-if="!isColombia()" for="modalidad" class="text-small">Corporativo</label>
                                </div>
                            </div>
                        </div>
                        <div class="column small-24" ng-show="f.modalidad">
                            <div class="columns small-24 medium-12 large-12">
                                <label>Tipo de Identificación</label>
                                <select ng-model="f.tipo_identificacion" ng-options="r.label disable when r.disabled for r in ers.tipos_identificacion track by r.data">
                                </select>
                            </div>
                            <div class="columns small-24 medium-12 large-12">
                                <label>Identificación</label>
                                <input ng-model="f.identificacion" type="text"/>
                            </div>
                            <div ng-if="f.modalidad == 'corporativo'" class="columns small-24 medium-24 large-24">
                                <label>Nombre de la empresa:</label>
                                <input ng-model="f.nombre_empresa" type="text"/>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>
                <div class="row">
                    <div class="column small-24">
                        <div class="media-object">
                            <div class="media-object-section">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/icono-dos.png" alt=""/>
                            </div>
                            <div class="media-object-section">
                                <div class="titulo">
                                    Información de Contacto
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column small-24 centrado">
                        <div class="column small-24">
                            <div class="columns small-24 medium-12 large-12">
                                <label>Primer Nombre</label>
                                <input ng-model="f.primer_nombre" type="text"/>
                            </div>
                            <div class="columns small-24 medium-12 large-12">
                                <label>Segundo Nombre</label>
                                <input ng-model="f.segundo_nombre" type="text"/>
                            </div>
                        </div>
                        <div class="column small-24">
                            <div class="columns small-24 medium-12 large-12">
                                <label>Primer Apellido</label>
                                <input ng-model="f.primer_apellido" type="text"/>
                            </div>
                            <div class="columns small-24 medium-12 large-12">
                                <label>Segundo Apellido</label>
                                <input ng-model="f.segundo_apellido" type="text"/>
                            </div>
                        </div>
                        <div class="column small-24">
                            <div class="column small-24 medium-24 large-3">
                                <label>Sexo</label>
                            </div>
                            <div class="column small-24 medium-24 large-4">
                                <div class="content-radio">
                                    <input ng-model="f.sexo" type="radio" name="sexo" value="femenino" class="check-toggle" id="femenino"/><label for="femenino">Femenino</label>
                                </div>
                            </div>

                            <div class="column small-24 medium-24 large-4 end">
                                <div class="content-radio">
                                    <input ng-model="f.sexo" type="radio" name="sexo" value="masculino" class="check-toggle" id="masculino"/><label for="masculino">Masculino</label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            &nbsp;
                        </div>
                        <div class="column small-24">
                            <div class="columns small-24 medium-24 large-8">
                                <label>Año Nacimiento</label>
                                <select ng-model="f.ano_nacimiento" ng-options="r.label disable when r.disabled for r in ers.anos track by r.data"></select>
                            </div>
                            <div class="columns small-24 medium-24 large-8">
                                <label>Mes Nacimiento</label>
                                <select ng-model="f.mes_nacimiento" ng-options="r.label disable when r.disabled for r in ers.meses track by r.data"></select>
                            </div>
                            <div class="columns small-24 medium-24 large-8">
                                <label>Día Nacimiento</label>
                                <select ng-model="f.dia_nacimiento" ng-options="r.label disable when r.disabled for r in ers.dias track by r.data"></select>
                            </div>
                        </div>
                        <div class="column small-24">
                            <div class="columns small-24 medium-12 large-12">
                                <label>Teléfono Fijo</label>
                                <input ng-model="f.telefono_fijo" type="text"/>
                            </div>
                            <div class="columns small-24 medium-12 large-12">
                                <label>Teléfono Celular</label>
                                <input ng-model="f.telefono_celular" type="text"/>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>
                <div class="row">
                    <div class="column small-24">
                        <div class="media-object">
                            <div class="media-object-section">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/icono-tres.png" alt=""/>
                            </div>
                            <div class="media-object-section">
                                <div class="titulo">
                                    Información de Acceso
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column small-24 centrado">
                        <div class="column small-24">
                            <div class="columns small-24">
                                <label>Correo Electronico</label>
                                <input ng-model="f.correo_electronico" type="email"/>
                            </div>
                            <div class="columns small-24 large-12">
                                <label>Contraseña</label>
                                <input ng-model="f.contrasena" type="password"/>
                            </div>
                            <div class="columns small-24 large-12">
                                <label>Confirma tu Contraseña</label>
                                <input ng_model="f.confirma_contrasena" type="password"/>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>
                <div class="row">
                    <div class="column small-24">
                        <div class="media-object">
                            <div class="media-object-section">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/icono-cuatro.png" alt=""/>
                            </div>
                            <div class="media-object-section">
                                <div class="titulo">
                                    Dirección de Entrega
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column small-24 centrado">
                        <div class="column small-24" ng-if="isColombia()">
                            <div class="columns small-24">
                                <label>Departamento</label>
                                <select ng-model="f.id_departamento" ng-options="r.label disable when r.disabled for r in ers.departamentos track by r.data"></select>
                            </div>
                            <div class="columns small-24">
                                <label>Ciudad</label>
                                <select ng-model="f.id_ciudad" ng-options="r.label disable when r.disabled for r in ers.ciudades track by r.data"></select>
                            </div>
                            <div class="columns small-24">
                                <label>Dirección</label>
                                <input ng-model="f.direccion" type="text"/>
                            </div>
                        </div>

                        <div class="column small-24" ng-if="!isColombia()">
                            <div class="columns small-24">
                                <label>Ciudad</label>
                                <input ng-model="f.nombre_ciudad" type="text"/>
                            </div>
                            <div class="columns small-18">
                                <label>Dirección</label>
                                <input ng-model="f.direccion" type="text"/>
                            </div>
                            <div class="columns small-6">
                                <label>Código Postal</label>
                                <input ng-model="f.codigo_postal" type="text"/>
                            </div>
                        </div>

                    </div>
                </div>
                <br/>
                <div class="row">
                    <div class="column small-24">
                        <div class="media-object">
                            <div class="media-object-section">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/icono-cinco.png" alt=""/>
                            </div>
                            <div class="media-object-section">
                                <div class="titulo">
                                    Otros
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column small-24 centrado">
                        <div class="column small-24">
                            <div class="columns small-24">
                                <label>Como te enteraste de nosotros:</label>
                                <select ng-model="f.id_fuente" ng-options="r.label disable when r.disabled for r in ers.fuentes track by r.data"></select>
                            </div>
                        </div>
                    </div>

                    <div class="column small-24 centrado" ng-if="isColombia()">
                        <div class="column small-24">
                            <div class="column small-24">
                                <label>
                                    Si estas siendo atendido por un vendedor de Coordinadora por favor diligencia los siguientes campos:
                                </label>
                            </div>
                        </div>
                        <div>
                            <div class="column small-12">
                                <div class="columns small-24">
                                    <label>Código del Vendedor:</label>
                                    <input type="text" ng-model="f.codigo_vendedor"/>
                                </div>
                            </div>
                            <div class="column small-12">
                                <div class="columns small-24">
                                    <label>Nombre del Vendedor:</label>
                                    <input type="text" ng-model="f.nombre_vendedor"/>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <br/>
                <div class="row">
                    <div class="column small-24">
                        <div class="media-object">
                            <div class="media-object-section">
                                <img src="tw{{template_url}}/img_tw{{site_env}}/icon-seis.png" alt=""/>
                            </div>
                            <div class="media-object-section">
                                <div class="titulo">
                                    Términos y Condiciones
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column small-24 centrado">
                        <div class="column small-24">
                            <div class="columns small-24">
                                <fieldset>
                                    <div class="contenido-cms">
                                        tw{{terminos.attrs.contenido.data[0]|raw}}
                                    </div>
                                </fieldset>
                            </div>
                            <div class="columns small-24">
                                <input ng-model="f.terminos_condiciones" type="checkbox" class="acepto" name="acepto" id="acepto"><label for="acepto">Acepto términos y condiciones</label>
                            </div>
                            <div class="columns small-24">
                                <button type="button" ng-click="save()" class="button submit">ENVIAR</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="column small-24 medium-9 large-8 show-for-medium">
            <div class="bg-gris destacado">
                {% for r in destacado %}
                    <div class="text-center">
                        <a href="tw{{r.attrs.url.data[0]}}" target="tw{{r.attrs.abrir_en.data[0]}}">
                            <img src="tw{{r.attrs.imagen.data[0]|image}}"/>
                        </a>
                        <br/>
                        <br/>
                        tw{{r.attrs.descripcion.data[0]|truncate(180, true, "...")|raw}}
                    </div>
                {% endfor %}
            </div>
        </div>

    </div>

</div>
<br/>
<br/>
{% include 'part_footer.html' %}